Вебсервери, хостинг і домени: де живе сайт і як він стає доступним в інтернеті

1. Де насправді знаходиться вебсайт

У попередніх статтях ми поступово розібрали основні технології, завдяки яким працює веб:

• HTML визначає структуру вебсторінки.

• CSS відповідає за її оформлення.

• JavaScript додає інтерактивність.

• HTTP забезпечує обмін повідомленнями між браузером і сервером.

• HTTPS захищає цей обмін за допомогою TLS.

Коли ми створюємо HTML-файл на власному комп'ютері, він доступний локально. Наприклад, ми можемо відкрити його в браузері та побачити результат.

Але інші люди не зможуть просто ввести адресу цього файлу у своїх браузерах і відкрити його через інтернет.

Для цього використовуються:

• доменне ім'я — зрозуміла людині адреса сайту;

• DNS — система, яка допомагає знайти IP-адресу за доменом;

• вебсервер — комп'ютер та програмне забезпечення, які забезпечують обробку запитів і передавання ресурсів;

• хостинг — послуга розміщення сайту на серверній інфраструктурі.

Розглянемо кожне з них.

2. Що таке вебсервер

Термін «вебсервер» має два значення. І це важливо розуміти, оскільки в технічних матеріалах він може використовуватися в різних контекстах.

2.1. Вебсервер як комп'ютер

У першому значенні вебсервер — це комп'ютер, на якому розміщуються файли та програмне забезпечення сайту.

Такий комп'ютер може містити:

• HTML-документи;

• CSS-файли;

• JavaScript-файли;

• зображення;

• відео;

• шрифти;

• інші ресурси;

• серверні програми, якщо сайт їх використовує.

Вебсервер підключений до мережі та має можливість приймати запити від інших пристроїв.

Сервер отримує запит і повертає відповідний вміст.

2.2. Вебсервер як програмне забезпечення

У другому значенні вебсервер — це програма, яка приймає та обробляє HTTP-запити.

Вона відповідає за взаємодію між клієнтом і розміщеними на сервері ресурсами.

Наприклад, браузер надсилає запит:

GET /index.html HTTP/1.1

Host: example.com

Вебсервер отримує його, визначає потрібний ресурс і, якщо все налаштовано правильно, повертає HTML-документ.

Якщо запитаний ресурс відсутній, сервер може повернути відповідь:

HTTP/1.1 404 Not Found

Тобто вебсервер як програмне забезпечення розуміє HTTP, обробляє запити та формує відповіді.

2.3. Популярні програми вебсерверів

Існують різні програмні рішення для організації роботи вебсерверів.

Nginx

https://nginx.org/

Популярне програмне забезпечення, яке використовується як вебсервер, зворотний проксі та балансувальник навантаження.

Його часто застосовують для обслуговування статичних файлів і перенаправлення запитів до інших серверних програм.

Apache HTTP Server

https://httpd.apache.org/

Один із відомих вебсерверів із тривалою історією розвитку. Використовується для обробки HTTP-запитів і розміщення вебсайтів.

Caddy

https://caddyserver.com/

Вебсервер, який відомий простотою конфігурації та підтримкою автоматичного отримання й оновлення TLS-сертифікатів у відповідних умовах.

Microsoft IIS

https://www.iis.net/

Вебсервер від Microsoft, який використовується в середовищах Windows Server для розміщення вебсайтів і вебзастосунків.

Важливо: Nginx, Apache, Caddy та IIS — це програмне забезпечення. Самі по собі вони не є фізичними серверами.

3. Як вебсервер обробляє запит

Розглянемо ситуацію, коли користувач відкриває сайт:

https://example.com

Браузер встановлює з'єднання із сервером і надсилає HTTP-запит через HTTPS.

1. Браузер надсилає запит на /products/15.

2. Nginx отримує цей запит.

3. Nginx визначає, що запит потрібно передати серверній програмі.

4. Серверна програма звертається до бази даних.

5. База даних повертає інформацію про товар.

6. Серверна програма формує відповідь.

7. Nginx передає її браузеру.

1. Вебсервер отримує запит.

2. Визначає, до якого сайту або маршруту він належить.

3. Визначає, який ресурс потрібно повернути або яку програму потрібно викликати.

4. Отримує потрібний вміст.

5. Формує HTTP-відповідь.

6. Передає її браузеру через захищене з'єднання.

Останній випадок особливо важливий: вебсервер не обов'язково сам виконує всю логіку сайту. Часто він лише приймає запити та передає їх іншим компонентам системи.

Це стане зрозуміліше, коли ми розглядатимемо серверну розробку, API та бази даних у наступних статтях.

4. Статичні та динамічні вебсайти

Вебсайти можуть працювати по-різному залежно від того, як формується їхній вміст.

Для початку розглянемо два основні типи: статичні та динамічні.

4.1. Статичний вебсайт

Статичний сайт складається з готових файлів, які сервер передає браузеру без необхідності генерувати нову сторінку для кожного запиту.

Наприклад, у нас є така структура:

my-website/

│

├── index.html

├── about.html

│

├── css/

│   └── style.css

│

├── js/

│   └── script.js

│

└── images/

    └── logo.png

Усі файли вже створені.

Коли користувач відкриває сайт, вебсервер знаходить потрібний файл і повертає його браузеру.

Наприклад:

GET /index.html HTTP/1.1

Host: example.com

Сервер знаходить index.html і передає його клієнту.

JavaScript може змінювати вміст сторінки, реагувати на дії користувача, відкривати меню та виконувати інші операції.

Назва «статичний» означає передусім те, що сервер віддає заздалегідь підготовлені файли, а не генерує їх заново під час кожного запиту.

Переваги статичних сайтів:

• простіше розміщення;

• невисокі вимоги до серверної інфраструктури;

• швидке завантаження за належної організації;

• менша кількість серверних компонентів;

• простіше обслуговування.

Такі сайти підходять для портфоліо, інформаційних сторінок, документації, невеликих блогів та інших проєктів, яким не потрібна складна серверна логіка.

4.2. Динамічний вебсайт

Динамічний сайт може формувати вміст залежно від запиту, даних користувача, інформації з бази даних та інших умов.

Користувач відкриває сторінку товару:

https://example.com/products/15

Сервер може виконати такі дії:

1. Отримати запит на сторінку товару.

2. Передати його серверній програмі.

3. Знайти товар із відповідним ідентифікатором.

4. Отримати інформацію про назву, ціну, опис і наявність.

5. Сформувати HTML-сторінку.

6. Повернути її браузеру.

Наприклад, у базі даних зберігається:

{

  "id": 15,

  "name": "Wireless Mouse",

  "price": 850,

  "available": true

}

Серверна програма використовує ці дані для формування сторінки.

Переваги динамічних сайтів:

• персоналізація вмісту;

• робота з обліковими записами;

• обробка форм;

• управління товарами та замовленнями;

• взаємодія з базами даних;

• можливість реалізації складної бізнес-логіки.

Водночас такі системи зазвичай складніші в розробці, налаштуванні та обслуговуванні.

4.3. Порівняння статичних і динамічних сайтів

Важливе уточнення: сучасні сайти можуть поєднувати обидва підходи. Наприклад, частина сторінок може бути заздалегідь згенерована, а інша частина — формуватися динамічно.

5. Що таке хостинг

Ми вже знаємо, що сайт має десь зберігатися та звідкись передаватися користувачам.

Але не кожен власник сайту хоче купувати фізичний сервер, встановлювати операційну систему, налаштовувати мережу, забезпечувати електроживлення та самостійно стежити за його доступністю.

Для цього існує хостинг.

Компанія, яка надає таку послугу, називається хостинг-провайдером.

Провайдер забезпечує необхідну інфраструктуру, а клієнт розміщує на ній свій сайт.

Важливо пояснити, що хостинг-провайдер не обов'язково відповідає за всі аспекти безпеки сайту. Навіть якщо він обслуговує сервер, власник може залишатися відповідальним за вразливості CMS, паролі, плагіни та програмний код. 

Залежно від типу послуги провайдер може відповідати за:

• фізичне обладнання;

• підключення до інтернету;

• електроживлення;

• мережеву інфраструктуру;

• доступність серверів;

• резервне копіювання;

• оновлення програмного забезпечення;

• технічну підтримку.

Наприклад, на простому хостингу адміністрування операційної системи зазвичай бере на себе провайдер, а на орендованому VPS значна частина відповідальності за налаштування системи переходить до користувача.

6. Основні види хостингу

Існує декілька популярних способів розміщення сайтів.

Вони відрізняються обсягом доступних ресурсів, рівнем контролю, вартістю та відповідальністю за обслуговування.

6.1. Shared Hosting — віртуальний спільний хостинг

Це один із найпростіших варіантів розміщення сайту.

На одному фізичному сервері розміщується багато сайтів різних користувачів.

Вони використовують спільні ресурси сервера, але зазвичай із певним розподілом обмежень та ізоляцією.

Кожен мешканець має власну квартиру, але всі використовують спільну інфраструктуру будинку.

Приблизно так працює shared hosting: різні сайти розміщені на одному сервері, але кожен має власний простір для файлів та налаштувань.

Переваги:

• невисока вартість;

• просте налаштування;

• часто є панель керування;

• не потрібно самостійно адмініструвати фізичний сервер;

• підходить для невеликих сайтів.

Недоліки:

• обмежені ресурси;

• менший контроль над серверним середовищем;

• продуктивність може залежати від інших сайтів на тому самому сервері;

• не всі спеціальні програми та налаштування доступні.

Такий варіант підходить для невеликих блогів, інформаційних сайтів і простих вебпроєктів.

6.2. VPS — Virtual Private Server

VPS (Virtual Private Server) Віртуалізація — це технологія, яка дає змогу одному фізичному комп'ютеру працювати як декілька окремих віртуальних машин. Кожна така машина має власну операційну систему та виділені їй ресурси. 

• Його створюють за допомогою технологій віртуалізації на фізичному обладнанні.

• На одному фізичному сервері можуть працювати декілька незалежних віртуальних серверів.

• Кожен VPS отримує виділені в межах тарифу ресурси, власну операційну систему та окреме середовище.

• певну кількість процесорних ресурсів;

• оперативну пам'ять;

• дисковий простір;

• мережеве підключення;

• доступ адміністратора;

• можливість встановлювати потрібне програмне забезпечення.

На відміну від звичайного shared hosting, користувач має значно більше контролю над сервером.

Наприклад, можна самостійно встановити Nginx, налаштувати вебсервер, розмістити власні програми та керувати системними параметрами.

• більший контроль;

• можливість встановлювати власне програмне забезпечення;

• ізольоване середовище;

• гнучкість налаштування;

• підходить для складніших проєктів.

• потрібно розуміти адміністрування серверів;

• необхідно самостійно стежити за оновленнями та безпекою;

• ресурси обмежені обраним тарифом;

• відповідальність за налаштування вища, ніж на звичайному хостингу.

VPS часто використовують для вебзастосунків, невеликих сервісів, API та сайтів із нестандартними вимогами.

6.3. Dedicated Server — виділений сервер

Dedicated Server — це фізичний сервер, який надається одному клієнту.

На відміну від VPS, користувач отримує доступ до окремого фізичного обладнання, а не лише до віртуального середовища на спільному сервері.

• високий рівень контролю;

• доступ до ресурсів фізичного обладнання;

• можливість налаштувати спеціалізоване середовище;

• відсутність інших клієнтів на цьому фізичному сервері.

• вища вартість;

• необхідність адміністрування;

• відповідальність за налаштування та обслуговування;

• потреба в технічних знаннях.

Такий варіант може використовуватися для великих проєктів, ресурсомістких систем або сервісів зі спеціальними вимогами до обладнання.

6.4. Cloud Hosting — хмарний хостинг

Хмарний хостинг використовує ресурси хмарної інфраструктури.

На відміну від моделі, у якій сайт прив'язаний до одного конкретного фізичного сервера, хмарна платформа може використовувати розподілені ресурси декількох серверів та дата-центрів.

• масштабувати ресурси;

• розподіляти навантаження;

• запускати додаткові серверні екземпляри;

• автоматизувати резервування;

• використовувати керовані мережеві та обчислювальні сервіси.

• Amazon Web Services (AWS);

• Microsoft Azure;

• Google Cloud.

Хмарний хостинг не обов'язково означає, що сайт автоматично працює швидше або дешевше.

Результат залежить від архітектури, конфігурації, навантаження та вартості використаних ресурсів.

6.5. Managed Hosting — керований хостинг

Managed Hosting описує насамперед рівень технічного обслуговування, а не окремий спосіб організації серверних ресурсів. 

Наприклад, він може відповідати за:

• оновлення серверного програмного забезпечення;

• резервне копіювання;

• моніторинг;

• безпеку;

• оптимізацію;

• технічну підтримку.

Це дає змогу власнику сайту більше зосередитися на самому проєкті, а не на адмініструванні інфраструктури.

Однак конкретний перелік послуг залежить від договору та провайдера.

6.6. Порівняння видів хостингу

Це не рейтинг якості. Кожен тип має власне призначення.

Наприклад, VPS може працювати на хмарній інфраструктурі, а його адміністрування може виконувати провайдер у межах Managed Hosting.

Тому під час вибору послуги потрібно враховувати не лише назву тарифу, а й те, які ресурси надаються та хто відповідає за їх обслуговування. 

Для невеликого інформаційного сайту оренда фізичного сервера може бути зайвою. Для складного вебзастосунку простого shared hosting може бути недостатньо.

7. Що таке доменне ім'я

Ми вже знаємо, що сайт розміщується на сервері, який має мережеву адресу.

Але виникає проблема: запам'ятовувати числові IP-адреси для кожного сайту незручно.

203.0.113.10

Значно простіше використовувати:

example.com

Для цього й існують доменні імена.

Доменне ім'я (Domain Name) — це текстова адреса, яка використовується для ідентифікації ресурсу в інтернеті.

Наприклад:

google.com

wikipedia.org

example.com

Доменне ім'я допомагає користувачу звертатися до сайту, не запам'ятовуючи його IP-адресу.

Домен — це адреса. Файли сайту можуть зберігатися на окремому сервері або в хмарній інфраструктурі.

8. Як влаштоване доменне ім'я

Розглянемо адресу:

blog.example.com

Вона складається з декількох частин.

Приклад: blog.example.com

blog

example

.com

Доменні імена читаються в ієрархії справа наліво: від вищого рівня до нижчих. 

8.1. Домен верхнього рівня — TLD

У нашому прикладі:

.com

Це домен верхнього рівня (Top-Level Domain, TLD).

Інші приклади:

.org

.net

.info

.ua

.edu

Домен верхнього рівня розташований у кінці доменного імені.

Наприклад:

shop.blog.example.com. 

8.2. Домен другого рівня

У прикладі:

example.com

• example — це мітка другого рівня

• example.com — домен другого рівня.

Саме такі домени найчастіше реєструють для компаній, проєктів та особистих сайтів.

8.3. Піддомен

У прикладі:

blog.example.com

Він може використовуватися для розділення різних частин вебсистеми.

Наприклад:

www.example.com

shop.example.com

blog.example.com

api.example.com

Це можуть бути різні частини одного проєкту:

• www — основний вебсайт;

• shop — інтернет-магазин;

• blog — блог;

• api — програмний інтерфейс.

Важливо: піддомен не обов'язково має бути окремим фізичним сервером. Це лише окреме доменне ім'я, для якого можна налаштувати власну обробку.

8.4. Чи належить домен власнику сайту

Коли людина реєструє домен, вона отримує право користуватися ним відповідно до правил реєстратора та доменної зони.

Реєстрація зазвичай здійснюється на певний період, після якого її потрібно продовжити.

Якщо власник не продовжить реєстрацію, домен може перейти в інший стан і згодом стати доступним для повторної реєстрації відповідно до правил конкретної доменної зони.

9. Що таке реєстратор доменів

Для реєстрації доменного імені використовують послуги спеціальних компаній — реєстраторів доменів (Domain Registrars).

Реєстратор допомагає перевірити доступність домену, оформити його реєстрацію та керувати відповідними налаштуваннями.

myproject.com

• Тобто

1. Користувач обирає домен і звертається до реєстратора.

2. Реєстратор перевіряє можливість реєстрації.

3. Якщо домен доступний, реєстратор передає необхідні дані до відповідної системи реєстру.

4. Реєстр зберігає реєстраційні дані домену відповідно до правил доменної зони.

5. Після налаштування DNS домен може використовуватися для пошуку відповідних мережевих ресурсів.

1. Відкриваєш сайт реєстратора.

2. Вводиш бажане доменне ім'я.

3. Перевіряєш його доступність.

4. Обираєш строк реєстрації.

5. Оплачуєш послугу.

6. Отримуєш можливість керувати доменом.

https://www.cloudflare.com/products/registrar/

https://www.namecheap.com/

https://www.godaddy.com/

Це лише приклади компаній, які надають послуги реєстрації доменів. Доступність конкретних доменних зон, ціни та умови можуть відрізнятися.

9.1. Реєстратор і реєстр — не одне й те саме

Ці поняття часто плутають.

Реєстратор (Registrar) — організація, через яку користувач реєструє домен.

Реєстр (Registry) — організація, яка відповідає за базу даних і технічне адміністрування певної доменної зони.

Користувач зазвичай взаємодіє з реєстратором, а не безпосередньо з реєстром.

10. Що таке DNS і навіщо він потрібен

Ми вже знаємо, що доменне ім'я — це зручна адреса сайту.

Але для встановлення мережевого з'єднання браузеру потрібно дізнатися, до якої IP-адреси потрібно звернутися.

Для цього використовується DNS (Domain Name System) — система доменних імен.

DNS можна порівняти з адресною книгою інтернету.

Ти відкриваєш контакти, знаходиш ім'я та отримуєш потрібний номер.

Приблизно так працює DNS:

• користувач вводить доменне ім'я;

• пристрій або DNS-резолвер шукає відповідний запис;

• у результаті отримується IP-адреса або інша інформація, необхідна для подальшого пошуку;

• браузер може встановити з'єднання з потрібним сервером.

Наприклад:

example.com → 203.0.113.10

Це умовний приклад відповідності домену та IP-адреси.

Важливо: один домен може мати декілька IP-адрес, а одна IP-адреса може використовуватися для багатьох доменів.

Тому зв'язок між доменом і сервером не завжди є схемою «один домен — одна IP-адреса».

10.1. Як працює DNS-запит

Розглянемо спрощену послідовність.

Ти вводиш у браузері:

example.com

Далі відбуваються такі дії:

Пристрій перевіряє, чи має він уже збережену інформацію про потрібний домен.

Якщо відповідь є і вона ще актуальна, її можна використати.

Якщо потрібної інформації немає, пристрій звертається до DNS-резолвера.

Резолвер — це система, яка виконує пошук потрібної DNS-інформації від імені клієнта.

Ним може бути сервіс провайдера, публічний DNS-сервіс або інша налаштована система.

DNS-резолвер виконує пошук відповіді для клієнта. Він може використовувати власний кеш або звертатися до інших DNS-серверів.

Авторитетний DNS-сервер зберігає DNS-записи конкретного домену та надає офіційну відповідь щодо них.

Тобто резолвер шукає інформацію, а авторитетний сервер є джерелом відповідних DNS-записів.

Якщо резолвер не має відповіді в кеші, він може звернутися до інших DNS-серверів.

Кореневі DNS-сервери допомагають визначити, до яких серверів потрібно звернутися для пошуку інформації про відповідну доменну зону.

Наприклад, для домену example.com резолвер спочатку отримує інформацію про сервери зони .com, а вже потім звертається до авторитетних серверів домену. 

Спрощено процес може виглядати так:

1. Звернення до кореневого DNS-сервера.

2. Отримання інформації про сервери відповідної доменної зони.

3. Звернення до серверів доменної зони.

4. Отримання інформації про авторитетні DNS-сервери потрібного домену.

5. Отримання потрібного DNS-запису.

Резолвер повертає результат пристрою.

Тепер браузер знає, куди потрібно встановлювати мережеве з'єднання.

Це спрощена схема. У реальності процес може бути коротшим, оскільки частина інформації вже є в кеші.

10.2. DNS-кеш

DNS-запити не потрібно щоразу виконувати повністю.

Щоб зменшити навантаження та прискорити пошук, результати можуть зберігатися в кеші.

Наприклад, якщо пристрій уже знайшов IP-адресу домену, він може використати збережену відповідь під час наступного звернення.

TTL визначає, як довго відповідь може зберігатися в кеші відповідно до правил DNS.

Наприклад:

TTL: 3600

Це означає 3600 секунд, тобто одну годину.

Після завершення TTL кешований запис потрібно перевірити знову.

Саме тому зміни DNS-налаштувань не завжди стають видимими для всіх користувачів миттєво.

10.3. Основні типи DNS-записів

DNS зберігає не лише відповідність домену та IP-адреси.

Наприклад:

• A та AAAA допомагають знайти IP-адреси;

• MX визначає, куди доставляти електронну пошту;

• NS вказує авторитетні DNS-сервери;

• TXT може використовуватися для перевірки домену та налаштування поштової автентифікації;

• CNAME створює псевдонім іншого доменного імені.

Існують різні типи DNS-записів, кожен із яких має своє призначення.

Розглянемо кілька прикладів.

example.com → 203.0.113.10

• Вказує IPv4-адресу.

example.com → 2001:db8::10

• Вказує IPv6-адресу.

www.example.com → example.com

• Вказує, що одне доменне ім'я є псевдонімом іншого.

example.com → 10 mail.example.com 

Використовується для визначення поштових серверів, які приймають електронну пошту для домену.

• 10 — це пріоритет поштового сервера.

Може використовуватися для підтвердження володіння доменом або налаштування поштової автентифікації, наприклад SPF.

Важливо: наведені адреси та записи умовні. Реальні значення залежать від налаштувань домену.

11. Як домен пов'язується з хостингом

Ми вже окремо розглянули домен, DNS і хостинг.

Тепер потрібно зрозуміти, як вони працюють разом.

Уявімо, що ти створив сайт і придбав домен:

myproject.com

А сам сайт розмістив на хостингу, який надав тобі IP-адресу:

203.0.113.10

Щоб користувачі могли відкривати сайт за доменним ім'ям, потрібно налаштувати DNS.

myproject.com → 203.0.113.10

Тепер DNS допомагає браузеру знайти сервер за доменом.

На сервері потрібно налаштувати вебсервер, щоб він знав, який сайт потрібно віддавати для відповідного доменного імені.

Наприклад, на одному сервері можуть розміщуватися:

myproject.com

blog.example.net

shop.example.org

Вебсервер отримує запит і за інформацією про домен визначає, який сайт має його обробити.

Для цього використовуються налаштування віртуальних хостів або серверних блоків.

12. Як один сервер може обслуговувати декілька сайтів

На перший погляд може здатися, що для кожного сайту потрібен окремий сервер.

Один фізичний сервер може обслуговувати десятки, сотні або навіть більше доменів залежно від його ресурсів та конфігурації.

Це можливо завдяки механізму віртуальних хостів.

Наприклад, вебсервер може мати такі налаштування:

example.com      → сайт №1

shop.example.com → сайт №2

blog.example.com → сайт №3

Коли надходить запит, вебсервер аналізує доменне ім'я, до якого звертається клієнт, і вибирає відповідну конфігурацію.

У HTTP це пов'язано із заголовком Host для HTTP/1.1, а в HTTPS домен також може використовуватися на етапі встановлення TLS-з'єднання через розширення SNI.

SNI (Server Name Indication) дає змогу клієнту повідомити назву потрібного домену під час TLS Handshake. Це допомагає серверу вибрати відповідний сертифікат, якщо на одній IP-адресі розміщено декілька сайтів із різними доменами.

13. Що таке IP-адреса і порти сервера

Ми вже згадували IP-адреси в контексті DNS. Тепер розглянемо їхню роль у роботі сервера.

IP-адреса (Internet Protocol Address) — це мережева адреса, яка використовується для ідентифікації мережевого інтерфейсу та маршрутизації пакетів у мережі.

Існують дві основні версії IP:

• IPv4;

• IPv6.

13.1. IPv4

IPv4 використовує 32-бітну адресу.

Зазвичай вона записується у вигляді чотирьох чисел, розділених крапками:

192.0.2.10

Кожне число може мати значення від 0 до 255.

13.2. IPv6

IPv6 використовує 128-бітну адресу.

Приклад:

2001:db8::10

IPv6 створений, зокрема, для розширення адресного простору, оскільки кількість доступних IPv4-адрес обмежена.

13.3. Що таке порт

IP-адреса допомагає визначити мережевий вузол, а порт дає змогу спрямувати з'єднання до відповідної програми або служби на цьому вузлі.

Порт — це не просто номер служби, а числовий ідентифікатор кінцевої точки транспортного з'єднання, який допомагає операційній системі передати дані відповідній програмі. 

Якщо коротко це числовий ідентифікатор у транспортному рівні мережевої взаємодії.

Наприклад:

203.0.113.10:443

• 203.0.113.10 — IP-адреса;

• 443 — номер порту.

Для вебтрафіку найчастіше використовуються такі порти:

Вебсервер може слухати інші порти, наприклад під час розробки або спеціальної конфігурації.

13.4. Як IP-адреса та порт працюють разом

Уявімо, що на одному сервері працюють:

• вебсервер;

• поштовий сервіс;

• інша мережева програма.

Тобто IP-адреса відповідає на запитання «до якого мережевого вузла звертаємося?», а порт — «до якої служби на цьому вузлі?».

14. Як відбувається повний шлях від введення домену до відкриття сайту

Тепер об'єднаємо все, що ми вивчили, в один процес.

Уявімо, що ти хочеш відкрити сайт:

https://example.com

Що відбувається після натискання Enter?

Крок 1. Браузер аналізує адресу

Браузер визначає:

• протокол — HTTPS;

• домен — example.com;

• потрібний шлях — /, якщо інший не зазначений.

Крок 2. Визначається IP-адреса

Браузер або операційна система перевіряє DNS-кеш.

Якщо потрібної інформації немає, виконується DNS-запит.

Крок 3. Встановлюється мережеве з'єднання

Клієнт звертається до відповідного сервера.

Для HTTPS зазвичай використовується порт 443.

Крок 4. Виконується TLS Handshake

Браузер і сервер узгоджують параметри захищеного з'єднання.

Цей процес ми детально розглянули в шостій статті.

Крок 5. Браузер надсилає HTTP-запит

Після встановлення захищеного з'єднання браузер надсилає запит:

GET / HTTP/1.1

Host: example.com

Це вже HTTP-повідомлення, яке передається через TLS.

Крок 6. Вебсервер отримує запит

Вебсервер визначає, який сайт потрібно обслуговувати.

Крок 7. Сервер отримує потрібний вміст

Якщо сайт статичний, сервер може знайти готовий HTML-файл і повернути його.

Якщо сайт динамічний, запит може бути переданий серверній програмі, яка сформує відповідь.

Крок 8. Сервер повертає HTTP-відповідь

Наприклад:

HTTP/1.1 200 OK

Content-Type: text/html

Після заголовків передається HTML-документ.

Крок 9. Браузер обробляє сторінку

Браузер аналізує HTML і знаходить посилання на CSS, JavaScript, зображення та інші ресурси.

Браузер не отримує всю сторінку одним запитом. Після отримання HTML він аналізує документ, знаходить пов'язані ресурси та надсилає додаткові запити. 

Наприклад, HTML-документ може містити посилання на один CSS-файл, два JavaScript-файли та декілька зображень. Браузер окремо запитує ці ресурси, щоб повністю сформувати сторінку. 

Наприклад, HTML-документ може містити посилання на один CSS-файл, два JavaScript-файли та декілька зображень. Браузер окремо запитує ці ресурси, щоб повністю сформувати сторінку. 

Наведена схема спрощено показує типовий процес роботи HTTPS поверх TCP. У HTTP/3 використовується протокол QUIC поверх UDP, у якому TLS 1.3 інтегрований у механізм встановлення з'єднання. 

15. Практична робота: створюємо простий сайт і готуємо його до розміщення

Тепер спробуємо застосувати отримані знання.

15.1. Створюємо структуру проєкту

• my-first-site

my-first-site/

│

├── index.html

├── style.css

└── script.js

15.2. Створюємо HTML

<!DOCTYPE html>

<html lang="uk">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Мій перший сайт</title>

    <link rel="stylesheet" href="style.css">

    <script src="script.js" defer></script>

</head>

<body>




    <h1>Вітаю на моєму сайті!</h1>




    <p id="message">

        Це моя перша вебсторінка.

    </p>




    <button id="changeButton">

        Натисни мене

    </button>




</body>

</html>

15.3. Створюємо CSS

body {

    font-family: Arial, sans-serif;

    max-width: 700px;

    margin: 60px auto;

    padding: 20px;

    text-align: center;

    background: #f2f2f2;

}




h1 {

    color: #333;

}




button {

    padding: 12px 20px;

    border: none;

    border-radius: 6px;

    background: #2563eb;

    color: white;

    cursor: pointer;

}

15.4. Створюємо JavaScript

const button = document.querySelector("#changeButton");

const message = document.querySelector("#message");




button.addEventListener("click", function() {

    message.textContent = "Вітаю! JavaScript працює!";

});

15.5. Перевіряємо результат

1. Збережи всі три файли.

2. Відкрий index.html у браузері.

3. Переконайся, що сторінка відображається правильно.

4. Натисни кнопку.

5. Перевір, чи змінився текст.

15.6. Що потрібно зробити, щоб сайт став доступним в інтернеті

У загальному випадку процес буде таким:

1. Обрати хостинг.

2. Отримати доступ до серверного середовища.

3. Завантажити файли сайту.

4. Придбати або використати наявний домен.

5. Налаштувати DNS-записи.

6. Налаштувати вебсервер або скористатися автоматичними налаштуваннями хостингу.

7. Підключити HTTPS.

8. Перевірити доступність сайту через домен.

У цій практичній роботі ми не будемо виконувати реальне розміщення на сервері, оскільки для цього потрібно обрати конкретного провайдера та врахувати його інтерфейс і налаштування.

16. Практика з DNS: перевіряємо домен через командний рядок

Ще один корисний експеримент — самостійно перевірити DNS-записи.

Для цього не потрібно встановлювати додаткові програми, якщо ти використовуєш Windows.

16.1. Відкриваємо командний рядок

1. Натисни Win + R.

2. Введи cmd.

3. Натисни Enter.

Відкриється командний рядок Windows.

16.2. Перевіряємо IP-адресу домену

nslookup example.com

Команда nslookup виконає DNS-запит і покаже отриману інформацію.

Також команда має різні режими запиту, і саме параметр -type дозволяє перевіряти різні види DNS-записів. 

• DNS-сервер, який обробив запит;

• доменне ім'я;

• одну або декілька IP-адрес, якщо вони повертаються.

Server:  192.168.1.1

Address: 192.168.1.1




Non-authoritative answer:

Name:    example.com

Address: 93.184.216.34

• Server — DNS-сервер, який обробив запит;

• Address у першій частині — адреса DNS-сервера;

• Name — домен, інформацію про який шукають;

• Address у відповіді — отримана IP-адреса;

• Non-authoritative answer — відповідь отримана не безпосередньо від авторитетного DNS-сервера, а, наприклад, від резолвера.

Це умовний приклад формату виведення, а не гарантований результат запиту.

Команда nslookup усе одно повертає його актуальні DNS-записи.
Для перевірки можна також використовувати інші загальнодоступні домени. 

16.3. Перевіряємо NS-записи

nslookup -type=NS example.com

Ця команда допомагає отримати інформацію про авторитетні DNS-сервери домену.

16.4. Перевіряємо MX-записи

nslookup -type=MX example.com

Команда запитує інформацію про поштові сервери домену.

Не кожен домен обов'язково має MX-записи.

16.5. Що потрібно зрозуміти після експерименту

Спробуй відповісти:

• Яку інформацію повертає nslookup?

• Яка різниця між A та NS-записами?

• Для чого потрібні MX-записи?

• Чому доменне ім'я зручніше за IP-адресу?

• Чи може один домен мати декілька IP-адрес?

Це простий спосіб побачити, що DNS — не абстрактне поняття, а реальна система, з якою твій комп'ютер взаємодіє під час відкриття сайтів.

17. Типові помилки та непорозуміння

Під час знайомства з доменами, хостингом і серверами часто виникають однакові помилки в розумінні.

Розглянемо найважливіші.

17.1. Домен і хостинг — це одне й те саме

• Домен — адреса, за якою користувач знаходить сайт.

• Хостинг — послуга, яка надає ресурси для розміщення сайту.

• Можна придбати домен в одній компанії, а хостинг — в іншій.

17.2. Купівля домену автоматично створює сайт

Після реєстрації домену ти отримуєш право користуватися відповідним доменним ім'ям.

Але сам сайт потрібно створити та розмістити окремо.

17.3. Один сайт обов'язково потребує одного фізичного сервера

Один сервер може обслуговувати багато сайтів.

І навпаки, великий сайт може використовувати багато серверів, які виконують різні завдання.

17.4. DNS зберігає сам сайт

DNS не зберігає HTML, CSS, JavaScript або зображення.

Він зберігає інформацію, яка допомагає знаходити потрібні мережеві ресурси.

17.5. Вебсервер — це завжди окремий комп'ютер

Термін може позначати як комп'ютер, на якому розміщений сайт, так і програмне забезпечення, яке обробляє HTTP-запити.

17.6. Якщо сайт не відкривається, проблема обов'язково в хостингу

Причини можуть бути різними:

• неправильні DNS-записи;

• проблеми з доменом;

• помилка в конфігурації вебсервера;

• несправність серверної програми;

• проблеми з мережею;

• прострочений TLS-сертифікат;

• помилки в самому сайті.

18. Підсумок: як пов'язані домен, DNS, хостинг і вебсервер

Доменне ім'я — це зрозуміла людині адреса сайту.

DNS — система, яка допомагає знайти інформацію про відповідний мережевий ресурс, зокрема його IP-адресу.

IP-адреса — мережева адреса, за допомогою якої пристрої знаходять один одного в мережі.

Хостинг — послуга, яка надає інфраструктуру для розміщення сайту.

Вебсервер як комп'ютер — пристрій або серверна інфраструктура, де розміщуються файли та програми сайту.

Вебсервер як програма — програмне забезпечення, яке приймає HTTP-запити та повертає відповіді.

Порт — числовий ідентифікатор, який допомагає спрямувати мережеве з'єднання до відповідної служби.

Статичний сайт — сайт, у якому сервер переважно віддає заздалегідь підготовлені файли.

Динамічний сайт — сайт, вміст якого може формуватися під час запиту за допомогою серверної логіки та даних.

Користувач вводить домен → DNS допомагає знайти сервер → браузер встановлює з'єднання → вебсервер отримує HTTP-запит → сервер повертає потрібний ресурс → браузер відображає сайт.

Тепер ми знаємо не лише те, як браузер обмінюється даними із сервером, а й де розміщений сайт, як він отримує свою адресу та які компоненти забезпечують його доступність.

19. Практичні запитання для самоперевірки

1. Що таке вебсервер?

2. Чим відрізняється вебсервер як комп'ютер від вебсервера як програмного забезпечення?

3. Для чого використовуються Nginx та Apache?

4. Чим відрізняються статичні та динамічні сайти?

5. Що таке хостинг?

6. Які завдання виконує хостинг-провайдер?

7. Чим відрізняються Shared Hosting і VPS?

8. Що таке Dedicated Server?

9. Що таке Cloud Hosting?

10. Що означає Managed Hosting?

11. Що таке доменне ім'я?

12. Чим відрізняються домен, піддомен і домен верхнього рівня?

13. Що таке реєстратор доменів?

14. Чим відрізняється реєстратор від реєстру?

15. Що таке DNS?

16. Як DNS допомагає браузеру знайти сервер?

17. Для чого потрібен DNS-кеш?

18. Що означає TTL?

19. Чим відрізняються A, AAAA, CNAME, MX, NS та TXT?

20. Чи може один сервер обслуговувати декілька сайтів?

21. Що таке IP-адреса?

22. Чим відрізняються IPv4 та IPv6?

23. Що таке порт?

24. Для чого використовуються порти 80 і 443?

25. Який повний шлях проходить запит від введення домену до відображення сайту?

20. Словник основних термінів

Web Server (Вебсервер) — комп'ютер або програмне забезпечення, яке забезпечує обробку вебзапитів і передавання ресурсів.

Web Hosting (Хостинг) — послуга розміщення сайтів та вебзастосунків на серверній інфраструктурі.

Hosting Provider (Хостинг-провайдер) — компанія, яка надає послуги хостингу.

Static Website (Статичний сайт) — сайт, сервер якого переважно повертає заздалегідь підготовлені файли.

Dynamic Website (Динамічний сайт) — сайт, вміст якого може формуватися під час запиту за допомогою програмної логіки.

Shared Hosting — тип хостингу, за якого декілька клієнтів використовують ресурси одного сервера.

VPS (Virtual Private Server) — віртуальний приватний сервер, створений за допомогою технологій віртуалізації.

Dedicated Server — окремий фізичний сервер, який надається одному клієнту.

Cloud Hosting — модель хостингу, що використовує ресурси хмарної інфраструктури.

Managed Hosting — хостинг із передаванням провайдеру частини завдань з адміністрування та обслуговування.

Domain Name (Доменне ім'я) — текстова адреса, яка використовується для ідентифікації ресурсу в інтернеті.

TLD (Top-Level Domain) — домен верхнього рівня, наприклад .com, .org або .ua.

Subdomain (Піддомен) — доменне ім'я, розташоване нижче іншого домену в ієрархії, наприклад blog.example.com.

Domain Registrar (Реєстратор доменів) — організація, через яку користувач реєструє доменні імена.

Registry (Реєстр) — організація або система, яка підтримує реєстраційні дані певної доменної зони.

DNS (Domain Name System) — система доменних імен, яка допомагає знаходити мережеві ресурси за доменними іменами.

DNS Resolver (DNS-резолвер) — система, яка виконує пошук DNS-інформації для клієнта.

DNS Cache (DNS-кеш) — тимчасово збережені результати DNS-запитів.

TTL (Time To Live) — параметр, який визначає час кешування DNS-запису.

A Record — DNS-запис, який пов'язує доменне ім'я з IPv4-адресою.

AAAA Record — DNS-запис, який пов'язує доменне ім'я з IPv6-адресою.

CNAME Record — DNS-запис, який створює псевдонім для іншого доменного імені.

MX Record — DNS-запис, який визначає поштові сервери домену.

NS Record — DNS-запис, який вказує авторитетні DNS-сервери домену.

TXT Record — DNS-запис для зберігання текстової інформації, яку можуть використовувати різні сервіси.

IP Address (IP-адреса) — мережева адреса, яка використовується для ідентифікації мережевого інтерфейсу та маршрутизації даних.

Port (Порт) — числовий ідентифікатор мережевої служби на пристрої.

Virtual Host (Віртуальний хост) — механізм, який дає змогу одному вебсерверу обслуговувати декілька сайтів або доменів.

SNI (Server Name Indication) — розширення TLS, яке дає змогу клієнту повідомити серверу доменне ім'я під час встановлення захищеного з'єднання.