⚡ ѕ–ќ…ƒ» Ќќ¬џ… ќЌЋј…Ќ  ”–— ѕќ —≈“≈¬џћ “≈’ЌќЋќ√»яћ —ќ — »ƒ ќ… 50%

до конца скидки осталось

Ќачать обучение 🚀
ћерион Ќетворкс

8 минут чтени€

¬ предыдущем материале мы рассмотрели, как работает »нтернет на базовом уровне, включа€ взаимодействие между клиентом (вашим компьютером) и сервером (другим компьютером, который отвечает на запросы клиента о веб-сайтах).

¬ этой же части рассмотрим, как устроены клиент, сервер и веб-приложение, что мы можем удобно серфить в »нтернете.

ќбучайс€ в Merion Academy

ѕройди курс по
сетевым технологи€м

Ќачать

ћодель клиент-сервер

Ёта иде€ взаимодействи€ клиента и сервера по сети называетс€ моделью Ђклиент-серверї. Ёто делает возможным просмотр веб-сайтов (например, сайт wiki.merionet.ru) и взаимодействие с веб-приложением (как Gmail).

Ќа самом деле, модель клиент-сервер - это ни что иное, как способ описать отношени€ между клиентом и сервером в веб-приложении. Ёто детали того, как информаци€ переходит от одного конца к другому, где картина усложн€етс€.


Ѕазова€ конфигураци€ веб-приложени€

—уществует сотни способов настройки веб-приложени€. ѕри этом большинство из них следуют одной и той же базовой структуре: клиент, сервер, база данных.


 лиент

 лиент - это то, с чем взаимодействует пользователь. “ак что Ђклиентскийї код отвечает за большую часть того, что на самом деле видит пользователь. Ёто включает в себ€:

  1. ќпределение структуры веб-страницы
  2. Ќастройка внешнего вида веб-страницы
  3. –еализаци€ механизма пользовательского взаимодействи€ (нажатие кнопок, ввод текста и т.д.)

—труктура: ћакет и содержимое веб-страницы определ€ютс€ с помощью HTML (обычно HTML 5, если речь идет о современных веб-приложени€х, но это друга€ истори€.)

HTML означает €зык гипертекстовой разметки (Hypertext Markup Language). ќн позвол€ет описать основную физическую структуру документа с помощью HTML-тэгов.  аждый HTML-тэг описывает определенный элемент документа.

Ќапример:

HTML-тэги
  • —одержимое тега Ђ<h1>ї описывает заголовок.
  • —одержимое тега Ђ<p>ї описывает абзац.
  • —одержимое тега Ђ<button>ї описывает кнопку.
  • » так далее...

¬еб-браузер использует эти HTML-тэги дл€ определени€ способа отображени€ документа.

Look and Feel: „тобы определить внешний вид веб-страницы, веб-разработчики используют CSS, который расшифровываетс€ как каскадные таблицы стилей (Cascading Style Sheets). CSS - это €зык, который позвол€ет описать стиль элементов, определенных в HTML, позвол€€ измен€ть шрифт, цвет, макет, простые анимации и другие поверхностные элементы.

—тили дл€ указанной выше HTML-страницы можно задать следующим образом:

CSS

¬заимодействие с пользователем: Ќаконец, дл€ реализации механизма взаимодействи€ с пользователем, на сцену выходит JavaScript.

Ќапример, если вы хотите что-то сделать, когда пользователь нажимает кнопку, вы можете сделать что-то подобное:

JavaScript

»ногда взаимодействие с пользователем, может быть реализовано без необходимости обращени€ к вашему серверу - отсюда и термин "JavaScript на стороне клиента". ƒругие типы взаимодействи€ требуют отправки запросов на сервер дл€ обработки.

Ќапример, если пользователь публикует комментарий в потоке, может потребоватьс€ сохранить этот комментарий в базе данных, чтобы весь материал был структурирован и собран в одном месте. “аким образом, вы отправл€ете запрос на сервер с новым комментарием и идентификатором пользовател€, а сервер прослушивает эти запросы и обрабатывает их соответствующим образом.


—ервер

—ервер в веб-приложении прослушивает запросы, поступающие от клиента. ѕри настройке HTTP-сервера он должен прослушивать конкретный номер порта. Ќомер порта всегда св€зан с IP-адресом компьютера.

¬ы можете рассматривать порты как отдельные каналы на каждом компьютере, которые можно использовать дл€ выполнени€ различных задач: один порт может быть использован дл€ серфинга на wiki.merionet.ru, в то врем€ как через другой получаете электронную почту. Ёто возможно, поскольку каждое из приложений (веб-браузер и клиент электронной почты) использует разные номера портов.

ѕосле настройки HTTP-сервера дл€ прослушивани€ определенного порта сервер ожидает клиентские запросов, поступающие на этот порт, выполн€ет все действи€, указанные в запросе, и отправл€ет все запрошенные данные через HTTP-ответ.


Ѕаза данных

Ѕазы данных Ц это подвалы веб-архитектуры - большинство из нас бо€тс€ туда спускатьс€, но они критически важны дл€ прочного фундамента. Ѕаза данных - это место дл€ хранени€ информации, чтобы к ней можно было легко обращатьс€, управл€ть и обновл€ть.

Ќапример, при создании сайта в социальных сет€х можно использовать базу данных дл€ хранени€ сведений о пользовател€х, публикаци€х и комментари€х.  огда посетитель запрашивает страницу, данные, вставленные на страницу, поступают из базы данных сайта, что позвол€ет нам воспринимать взаимодействие пользователей в реальном времени как должное на таких сайтах, как Facebook или в таких приложени€х, как Gmail.

 лиент, сервер и база данных

 ак масштабировать простое веб-приложение

¬ышеописанна€ конфигураци€ отлично подходит дл€ простых приложений. Ќо по мере роста приложени€ один сервер не сможет обрабатывать тыс€чи - если не миллионы - одновременных запросов от посетителей.

„тобы выполнить масштабирование в соответствии с этими большими объемами, можно распределить вход€щий трафик между группой внутренних серверов.

«десь все становитс€ интересно. »меетс€ несколько серверов, каждый из которых имеет собственный IP-адрес. »так, как сервер доменных имен (DNS) определ€ет, на какой экземпл€р вашего приложени€ отправить трафик?

ќтвет очевиден - никак. ”правление всеми этими отдельными экземпл€рами приложени€ происходит через средство балансировки нагрузки.

ѕодсистема балансировки нагрузки действует как гаишник, который маршрутизирует клиентские запросы по серверам как можно быстрее и эффективнее, насколько это возможно.

ѕоскольку вы не можете транслировать IP-адреса всех экземпл€ров сервера, вы создаете виртуальный IP-адрес, который транслируетс€ клиентам. Ётот виртуальный IP-адрес указывает на подсистему балансировки нагрузки. “аким образом, когда DNS ищет ваш сайт, он указывает на балансировщик нагрузки. «атем подсистема балансировки нагрузки перескакивает дл€ распределени€ трафика на различные внутренние серверы в реальном времени.

¬озможно, вам интересно, как подсистема балансировки нагрузки узнаЄт, на какой сервер следует отправл€ть трафик. ќтвет: алгоритмы.

ќдин попул€рный алгоритм, Round Robin, включает равномерное распределение вход€щих запросов по ферме серверов (все доступные серверы). ¬ы обычно выбираете такой подход, если все ваши серверы имеют одинаковую скорость обработки и пам€ть.

— помощью другого алгоритма, Least Connections, следующий запрос отправл€етс€ на сервер с наименьшим количеством активных соединений.

—уществует гораздо больше алгоритмов, которые вы можете реализовать, в зависимости от ваших потребностей.

“еперь поток трафика выгл€дит следующим образом:

Ѕалансировщик

—лужбы

»так, мы решили проблему трафика, создав пулы серверов и балансировщик нагрузки дл€ управлени€ ими.

Ќо одной репликаци€ серверов может быть недостаточно дл€ обслуживани€ приложени€ по мере его роста. ѕо мере добавлени€ дополнительных функциональных возможностей в приложение необходимо поддерживать тот же монолитный сервер, пока он продолжает расти. ƒл€ решени€ этой проблемы нам нужен способ разобщить функциональные возможности сервера.

«десь и по€вл€етс€ иде€ служб. —лужба €вл€етс€ просто другим сервером, за исключением того, что она взаимодействует только с другими серверами, в отличие от традиционного веб-сервера, который взаимодействует с клиентами.

 ажда€ служба имеет автономную единицу функциональности, такую как авторизаци€ пользователей или предоставление функции поиска. —лужбы позвол€ют разбить один веб-сервер на несколько служб, кажда€ из которых выполн€ет отдельные функции.

ќсновное преимущество разделени€ одного сервера на множество сервисов заключаетс€ в том, что он позвол€ет масштабировать сервисы полностью независимо.

ƒругое преимущество здесь заключаетс€ в том, что он позвол€ет командам внутри компании работать независимо над конкретной услугой, а не иметь 10, 100 или даже 1000 инженеров, работающих на одном монолитном сервере, который быстро становитс€ кошмаром дл€ менеджера проекта.

—лужбы

 раткое примечание: эта концепци€ балансировщиков нагрузки и пулов внутренних серверов и служб становитс€ очень сложной, поскольку вы масштабируете все больше и больше серверов в вашем приложении. Ёто особенно сложно с такими вещами, как, например, сохранение сеанса, обработка отправки нескольких запросов от клиента на один и тот же сервер в течение сеанса, развертывани€ решени€ дл€ балансировки нагрузки. “акие продвинутые темы не будет затрагивать в данном материале.


—ети доставки контента (Conten Delivery Network Ц CDN)

¬се вышеперечисленное отлично подходит дл€ масштабировани€ трафика, но приложение все еще централизовано в одном месте.  огда ваши пользователи начинают посещать ваш сайт из других концов страны или с другого конца мира, они могут столкнутьс€ с длительной задержкой из-за увеличенного рассто€ни€ между клиентом и сервером. ¬едь речь идет о "всемирной паутине" - не о "местной соседней паутине".

√лавный веб-сервер

ѕопул€рна€ тактика решени€ этой проблемы - использование сети доставки контента (CDN). CDN - это больша€ распределенна€ система Ђпроксиї серверов, развернута€ во многих центрах обработки данных. ѕрокси-сервер - это просто сервер, который действует как посредник между клиентом и сервером.

 омпании с большим объемом распределенного трафика могут платить CDN-компани€м за доставку контента конечным пользовател€м с помощью серверов CDN. CDN имеет тыс€чи серверов, расположенных в стратегических географических точках по всему миру.

ƒавайте сравним, как веб-сайт работает с CDN и без него.

 ак мы уже говорили в разделе 1, дл€ типичного веб-сайта доменное им€ URL преобразуетс€ в IP-адрес сервера хоста.

ќднако если клиент использует CDN, доменное им€ URL преобразуетс€ в IP-адрес пограничного сервера, принадлежащего CDN. «атем CDN доставл€ет веб-контент пользовател€м клиента, не затрагива€ серверы клиента.

CDN может сделать это, сохран€€ копии часто используемых элементов, таких как HTML, CSS, загрузки программного обеспечени€ и медиаобъектов с серверов клиентов.

CDN

√лавна€ цель - расположить контент сайта как можно ближе к конечному пользователю. ¬ итоге пользователь получает более быструю загрузку сайта.


>