Урок 13 · Слайд 1
🌍

Интернет: клиент и сервер

Как работает интернет на самом деле

💻
Твой браузер
(клиент)
→
📡
DNS
имя → IP
→
🖥️
Сервер
отправляет файлы
→
🎉
Страница
в браузере

Когда ты вводишь google.com в браузер происходит целая цепочка событий: DNS-запрос, TCP-соединение, HTTP-запрос, получение HTML, CSS, JS — всё за миллисекунды!

📖 Словарик
Клиент
Программа, запрашивающая данные (браузер, приложение).
"Браузер — клиент, который просит у сервера страницу"
Сервер
Компьютер, отвечающий на запросы клиентов.
"Серверы Google работают 24/7 по всему миру"
Протокол
Правила общения между клиентом и сервером.
"HTTP — протокол передачи веб-страниц"
Урок 13 · Слайд 2
🔢

IP-адрес: адрес в интернете

Как письмо с почтовым индексом

terminal
# Узнать IP любого сайта
$ ping google.com
PING google.com (142.250.185.46): 56 bytes...

# Свой внешний IP
$ curl ifconfig.me
77.88.55.88

# IPv4: 4 числа по 0-255
192.168.1.1 ← локальная сеть (роутер)
127.0.0.1 ← localhost (твой компьютер)

# IPv6: новый формат (больше адресов)
2001:0db8:85a3:0000:0000:8a2e:0370:7334
📖 Словарик
IP-адрес
Уникальный числовой адрес устройства в сети.
"142.250.185.46 — один из адресов Google"
localhost (127.0.0.1)
Адрес самого себя — петлевой интерфейс.
"localhost:3000 — сервер на твоём компьютере"
192.168.x.x
Адреса локальной сети (за роутером, не видны из интернета).
"192.168.1.100 — телефон в домашней сети"
Урок 13 · Слайд 3
📖

Домен и DNS

Телефонная книга интернета

DNS запрос
# DNS = Domain Name System
# Переводит имена в IP-адреса

google.com → 142.250.185.46
github.com → 140.82.112.4

# Структура доменного имени:
www . google . com
│ │ │
субдомен домен второго зона (.ru, .com)
уровня

# Записи DNS (в панели регистратора):
A-запись: domain.com → 1.2.3.4 (IPv4)
CNAME: www → domain.com (псевдоним)
MX: для почты (mail.domain.com)
📖 Словарик
DNS
Система доменных имён — "телефонная книга" интернета.
"DNS переводит google.com в 142.250.185.46"
Домен
Читаемое имя сайта вместо IP-адреса.
"mysite.ru — домен, его покупают у регистраторов"
A-запись
DNS-запись: связывает домен с IP-адресом сервера.
"mysite.ru → 185.10.20.30"
Урок 13 · Слайд 4
🔐

HTTP и HTTPS

Протоколы веб-общения

HTTP запрос/ответ
# HTTP-запрос от браузера:
GET /index.html HTTP/1.1
Host: example.com
User-Agent: Chrome/120

# HTTP-ответ от сервера:
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234
<!DOCTYPE html>...

# Коды ответа:
200 OK → всё хорошо ✅
404 Not Found → страница не найдена ❌
500 Server Error → ошибка на сервере 💥
301 Redirect → переадресация ↗️
📖 Словарик
HTTP
HyperText Transfer Protocol — протокол передачи данных в вебе.
"HTTP — язык на котором общаются браузер и сервер"
HTTPS
HTTP + шифрование TLS/SSL. Замочек в браузере.
"HTTPS шифрует данные — никто не подсмотрит"
Код состояния
3-значный номер ответа сервера (200, 404, 500).
"404 — самая известная ошибка веба"
Урок 13 · Слайд 5
⚙️

Nginx: веб-сервер

Официант между интернетом и твоим кодом

/etc/nginx/sites-available/mysite.conf
server {
  listen 80; # HTTP порт
  server_name mysite.ru www.mysite.ru;

  # Статические файлы (HTML, CSS, JS)
  root /var/www/mysite;
  index index.html;

  # API запросы → Node.js
  location /api {
    proxy_pass http://localhost:3000;
  }

  # Всё остальное → index.html (SPA)
  location / {
    try_files $uri $uri/ /index.html;
  }
}
📖 Словарик
Nginx
Высокопроизводительный веб-сервер и обратный прокси.
"Nginx отдаёт статику и перенаправляет API к Node.js"
Reverse proxy (обратный прокси)
Nginx принимает запросы и пересылает к нужному сервису.
"Nginx на 80 порту → Node.js на 3000"
location
Блок настроек для конкретного URL-пути.
"location /api {..} — правила для API-запросов"
Урок 13 · Слайд 6
🔒

SSL-сертификат: замочек в браузере

Certbot делает это бесплатно!

terminal — получаем SSL от Let's Encrypt
# Устанавливаем certbot
$ sudo apt install certbot python3-certbot-nginx

# Получаем сертификат (бесплатно!)
$ sudo certbot --nginx -d mysite.ru -d www.mysite.ru
Obtaining a new certificate...
Successfully deployed certificate! ✅

# Certbot сам обновит nginx.conf
# Теперь сайт доступен по HTTPS!

# Автообновление (каждые 90 дней)
$ sudo certbot renew --dry-run
Congratulations, all simulated renewals succeeded!
📖 Словарик
SSL/TLS сертификат
Цифровой документ, подтверждающий подлинность сайта и шифрующий данные.
"Замочек 🔒 в браузере = SSL сертификат"
Let's Encrypt
Некоммерческий центр сертификации, выдающий SSL бесплатно.
"Let's Encrypt используют миллионы сайтов"
Certbot
Инструмент для автоматического получения SSL от Let's Encrypt.
"certbot --nginx автоматически настраивает HTTPS"
Урок 13 · Слайд 7
🗺️

Полная схема работы сайта

От браузера до базы данных

🌍 Пользователь вводит mysite.ru в браузере
↓
📖 DNS сервер: mysite.ru → 185.10.20.30
↓
⚙️ Nginx на сервере 185.10.20.30 получает запрос
↓
📄 Статика (HTML/CSS/JS) → сразу клиенту ИЛИ /api → Node.js
↓
🗄️ Node.js → база данных → JSON ответ → Nginx → браузер
↓
🎉 Страница загружена! (~200мс)