Модуль 36

Nginx у production-середовищі

Ось готовий урок, створений спеціально за твоїм запитом у стилі CS50 та Девіда Малана.

🎓 CS50: Nginx. Ваш охоронець та регулювальник руху

Всім привіт! Радий вас бачити.

Сьогодні ми поговоримо про технологію, яка стоїть «на варті» майже всього інтернету. Ви написали свій код, він працює локально, ви натискаєте Run... і все чудово. Але що станеться, коли ви випустите його у великий світ?

Сьогоднішня тема — Nginx (вимовляється як "engine-ex").

1. 🔥 Вступ: Коли ваш додаток "задихається"

Уявіть собі ситуацію. Ви відкрили найкращу у місті кав'ярню. У вас є геніальний бариста (це ваш Back-end додаток — Python, Node.js, Go), який робить найсмачнішу каву у світі.

Але є проблема: цей бариста — творча натура. Він робить одну чашку за раз, дуже зосереджено. І тут... набігає натовп із 10,000 клієнтів одночасно.

  • Що станеться? Бариста запанікує, кавомашина перегріється, черга заблокує вхід, і ніхто не отримає кави. Сервер впаде.

  • Риторичне запитання: Чи варто змушувати вашого дорогого, розумного баристу (Python/Node) займатися тим, щоб відчиняти двері клієнтам, перевіряти їхні документи або подавати серветки (статичні файли)?

Ні! Вам потрібен адміністратор залу. Людина, яка зустрічає гостей, розсаджує їх, швидко видає меню (статику) і передає баристі лише замовлення на каву.

Ось цим адміністратором і є Nginx. Без нього в production ("на проді") ваш додаток — як оголений провід під напругою: небезпечно і ненадійно.

2. 🧠 Теоретична база: Що там "під капотом"?

Давайте розберемося без складних термінів. Nginx — це веб-сервер, але в сучасному світі він найчастіше виконує роль зворотного проксі (Reverse Proxy).

Як це працює?

Уявіть собі схему:

  1. Клієнт (Браузер) стукає у двері сервера (на порт 80 або 443).
  2. Nginx відчиняє двері. Він працює неймовірно швидко.
  3. Він дивиться на запит:
    • "Ти хочеш картинку logo.png?" -> "Тримай, вона у мене в кишені" (віддає сам, не турбуючи бекенд).
    • "Ти хочеш залогінитися?" -> "Окей, це складно, я передам тебе Баристі (вашому додатку на порту 3000)".

🔑 Ключові поняття (запам'ятайте це):

  1. Reverse Proxy (Зворотний проксі): Сервер, який стоїть перед вашим додатком. Клієнт думає, що спілкується з Nginx, а Nginx потайки спілкується з вашим додатком. Це безпека.
  2. Static Content (Статика): Файли, які не змінюються (HTML, CSS, картинки). Nginx віддає їх у сотні разів ефективніше за будь-який Python чи Ruby.
  3. Load Balancing (Балансування навантаження): Якщо у вас три баристи, Nginx може розподіляти замовлення між ними по черзі, щоб ніхто не втомився.

Інтуїтивно: Ваш додаток — це мозок (обчислення). Nginx — це м'язи та шкіра (захист і швидка робота).

3. 🧪 Приклади: Від "Hello World" до реальності

Конфігурація Nginx зазвичай живе у файлі /etc/nginx/nginx.conf або у папці /etc/nginx/sites-available/.

Приклад 1: Найпростіший файловий сервер

Припустимо, ви просто хочете показати світові папку з HTML-файлами.

Чого ми очікуємо? Що при заході на сайт відкриється index.html.

server {
    listen 80;                 # Слухаємо стандартний веб-порт
    server_name mysite.com;    # Реагуємо, якщо звернулися за цим доменом

    location / {
        root /var/www/html;    # Звідси беремо файли
        index index.html;      # Головний файл
    }
}

Пояснення: Це базовий рівень. Nginx просто бере файли з диска і віддає їх. Жодної магії.

Приклад 2: Типовий Production (Reverse Proxy)

У вас запущено Node.js додаток на localhost:3000. Ви не можете змусити користувачів писати :3000 у браузері.

Чого ми очікуємо? Користувач заходить на mysite.com (порт 80), а Nginx непомітно переправляє його на порт 3000.

server {
    listen 80;
    server_name mysite.com;

    location / {
        # Ось тут магія проксі!
        proxy_pass http://localhost:3000;

        # Передаємо додатку справжню IP-адресу клієнта, а не IP сервера
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Чому це важливо? proxy_pass — це міст. А proxy_set_header потрібні, щоб ваш бекенд знав, хто до нього прийшов, адже для бекенда всі запити тепер приходять від "сусіда" (localhost).

Приклад 3: "Дорослий" підхід (Статика + Proxy)

Найефективніша схема. Картинки віддає Nginx, логіку — додаток.

server {
    listen 80;
    server_name mysite.com;

    # 1. Якщо просять картинки чи стилі — віддай сам!
    location /static/ {
        alias /var/www/myapp/public/;
        expires 30d; # Кешуй це у браузері на 30 днів!
    }

    # 2. Все інше — до бекенду
    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
    }
}

Результат: Ваш Node.js/Python додаток більше не витрачає ресурси процесора на відправку логотипів. Він займається тільки бізнес-логікою. Продуктивність зростає в рази! 🚀

4. 🛠 Практична частина

Час забруднити руки. Уявіть, що ви вже на сервері (Ubuntu/Linux).

Завдання 1: Встановлення та перевірка 1. Встановіть Nginx (sudo apt update && sudo apt install nginx). 2. Переконайтеся, що він працює (systemctl status nginx). 3. Зайдіть у браузері на IP вашого сервера. Ви повинні побачити "Welcome to nginx!".

Завдання 2: Налаштування Proxy 1. Запустіть будь-який простий сервер на порту 8080 (можна навіть через python3 -m http.server 8080). 2. Створіть конфіг Nginx, який перенаправляє трафік з порту 80 на 8080. 3. Важливо: Не забудьте перевірити синтаксис командою sudo nginx -t і перезавантажити сервіс sudo systemctl reload nginx.

Завдання 3: "А що, якщо..." (Error Pages) 1. Змініть конфіг так, щоб при виникненні помилки 404 (сторінка не знайдена) Nginx показував не стандартний білий екран, а вашу смішну картинку або кастомний HTML. * Підказка: шукайте директиву error_page.

Завдання 4: Міні-кейс (Безпека) 1. Уявіть, що у вас в папці проєкту є файл .env з паролями. 2. Напишіть location, який забороняє (deny all) доступ до будь-яких файлів, що починаються з крапки. Це критично для безпеки!

5. 💡 Мислення як у розробника

Як думає новачок?

"Я змінив конфіг, зберіг файл, але нічого не змінилося! Nginx зламався!"

Як думає Senior Dev?

"Nginx завантажує конфігурацію тільки на старті. Я маю зробити reload. Але перед цим я обов'язково перевірю синтаксис, щоб не покласти весь сервер."

🏆 Золоті правила профі:

  1. Завжди sudo nginx -t перед перезавантаженням. Це як компіляція коду перед запуском. Якщо там помилка (забули крапку з комою ;), Nginx вам про це скаже, і ви не "вб'єте" сайт.
  2. Крапка з комою ;. В Nginx це найчастіша помилка. Кожна директива має закінчуватися нею.
  3. Логи — це святе. Якщо щось не працює, дивіться /var/log/nginx/error.log. Там написано все. Не гадайте, читайте.

6. 🧩 Підсумок

Отже, що ми сьогодні зробили? Ми взяли ваш "тендітний" додаток і поставили перед ним професійного охоронця. Тепер ви вмієте: 1. Приймати запити на 80-му порту. 2. Проксіювати їх на ваш додаток. 3. Швидко віддавати статику. 4. Базово захищати сервер.

Тепер ваш код готовий до реального навантаження.

Що далі? Зараз наш сайт працює по HTTP — це як відправляти листи у прозорому конверті. Будь-хто по дорозі може їх прочитати. На наступному уроці ми поговоримо про SSL/TLS та HTTPS, і як зробити той самий "зелений замочок" у браузері безкоштовно за допомогою Certbot.

Це був CS50. До зустрічі! 👋

← До списку уроків Наступний урок →