Модуль 1

Що таке Nginx і навіщо він потрібен

Ось урок, створений спеціально для тебе у стилі David Malan. Вмикай уяву, ми починаємо! 🚀

🎓 Тема уроку: Що таке Nginx і навіщо він потрібен?

Привіт, друзі! 👋

Уявіть, що ви щойно написали свій геніальний веб-застосунок. Нехай це буде інтернет-магазин кросівок на Python (Django/FastAPI) або Node.js. На вашому ноутбуці все літає: ви відкриваєте localhost:3000 — і все працює.

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

1. 🔥 Вступ: Проблема та мотивація

Уявіть собі елітний ресторан. 🍽️ Ваш код (Python/Node.js) — це Шеф-кухар. Він геній. Він вміє готувати неймовірні страви (обробляти складну бізнес-логіку, працювати з базою даних).

Але уявіть, що Шеф-кухар змушений сам бігати до вхідних дверей, зустрічати гостей, забирати в них пальто, показувати столик, наливати воду, а потім бігти на кухню готувати. Що станеться? 1. Кухня зупиниться. 2. Гості будуть чекати вічність. 3. Шеф збожеволіє.

Риторичне запитання: Чи ефективно використовувати геніального кухаря як гардеробника? Звісно, ні!

У світі вебу: * Ваш застосунок (Backend) — це Шеф. Він має "думати" і рахувати. * Віддача картинок, CSS-файлів, перевірка безпеки та розподіл гостей — це робота для когось іншого.

Ось тут на сцену виходить Nginx (читається як "Engine-X"). Це ідеальний метрдотель (адміністратор) вашого ресторану. Він стоїть на вході, швидко розсаджує гостей, віддає їм меню (статику) і передає на кухню (вашому коду) тільки замовлення на складні страви.

Чому без цього не обійтись? Без Nginx ваш "ніжний" Python-сервер може впасти від навали простих запитів або хакерських атак, наче картковий будинок.

2. 🧠 Теоретична база (без нудної академічності)

Отже, що таке Nginx?

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

Звучить страшно? Давайте розберемо "під капотом", але просто.

⚙️ Як це працює? (Архітектура подій)

Старі сервери (як старий Apache) працювали так: на кожного нового клієнта вони створювали окремий процес (або потік). * Прийшло 1000 клієнтів $\to$ створили 1000 потоків. Пам'ять закінчилась, сервер "ліг".

Nginx працює інакше. Він використовує подієво-орієнтовану модель (Event-driven). * Аналогія: Уявіть гросмейстера, який грає сеанс одночасної гри на 50 дошках. Він не чекає, поки один гравець подумає. Він робить хід тут, переходить до наступного, робить хід там. * Один процес Nginx може тримати тисячі з'єднань одночасно, майже не споживаючи пам'яті.

🔑 Ключові ролі Nginx (що треба запам’ятати):

  1. Веб-сервер для статики: Він віддає картинки, HTML, CSS миттєво, не турбуючи ваш Python/Node.js.
  2. Зворотний проксі (Reverse Proxy): Клієнт звертається до Nginx, а Nginx передає запит вашому застосунку. Клієнт навіть не знає, що там всередині Python.
  3. Балансувальник навантаження: Якщо ваш ресторан переповнений, Nginx може направляти гостей на дві різні кухні (два сервери) по черзі.

3. 🧪 Приклади (від простого до реального)

Давайте подивимось на конфігураційний файл nginx.conf. Не лякайтесь фігурних дужок!

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

Задача: Просто показати HTML-сторінку, коли хтось заходить на сайт.

server {
    listen 80;                 # Слухаємо порт 80 (стандартний для вебу)
    server_name my-site.com;   # На яке доменне ім'я реагуємо

    location / {
        root /var/www/html;    # Звідки брати файли
        index index.html;      # Який файл відкривати першим
    }
}

Питання до вас: Якщо я зайду на http://my-site.com/photo.jpg, де Nginx шукатиме цей файл? (Пауза для роздумів...) Відповідь: У папці /var/www/html/photo.jpg. Все просто!

Приклад 2: Реальний проєкт (Reverse Proxy)

Задача: У вас запущено FastAPI або Express застосунок на порті 3000. Ми хочемо, щоб світ бачив його на порті 80.

server {
    listen 80;
    server_name api.my-app.com;

    location / {
        # Магія тут! 👇
        proxy_pass http://127.0.0.1:3000;

        # Передаємо заголовки, щоб бекенд знав, хто справжній клієнт
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Що тут відбувається? Nginx стоїть "обличчям" до клієнта. Він бере запит, дзвонить на внутрішній телефон localhost:3000, отримує відповідь і віддає її клієнту. Ваш додаток на порті 3000 захищений, до нього ззовні доступу немає.

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

Час забруднити руки! 👐 (Можна робити на Linux/WSL або просто аналізувати).

🔹 Завдання 1: "Hello Nginx"

Встановіть Nginx (sudo apt install nginx або через Docker). Зайдіть у браузер на localhost. * Ви маєте побачити сторінку "Welcome to nginx!". * Питання: Звідки він взяв цей HTML? (Підказка: зазвичай /var/www/html/index.nginx-debian.html).

🔹 Завдання 2: "Підміна"

Знайдіть файл index.html, який показує Nginx, і змініть текст на "Привіт! Я хакнув Nginx!". Оновіть сторінку.

🔹 Завдання 3: "Проксі"

Уявімо, що ви запустили сервер на Python (python3 -m http.server 8000). Напишіть конфіг (у /etc/nginx/sites-available/default), який перенаправляє запити з порту 80 на порт 8000.

location / {
    proxy_pass http://127.0.0.1:8000;
}

Не забудьте перезавантажити Nginx!

🔹 Міні-кейс: "Фейс-контроль"

У вас є секретний файл secret.txt. Як налаштувати Nginx, щоб він віддавав всі файли, КРІМ secret.txt? (Спробуйте здогадатись перед тим, як читати рішення)

Рішення:

location /secret.txt {
    deny all;
    return 403; # Forbidden
}

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

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

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

Як думає сеньйор?

"Nginx не читає думки. Він читає конфіг тільки при старті або перезавантаженні".

⚠️ Типові помилки (Golden Rules):

  1. Забув крапку з комою ; В Nginx це критично. Немає ; в кінці рядка — сервер не запуститься.
  2. Не перевірив конфіг. Перед тим, як перезапускати бойовий сервер, завжди пишіть магічну команду: sudo nginx -t (t = test). Вона скаже, чи є у вас помилки в синтаксисі. Якщо скаже "OK" — тільки тоді робіть перезапуск.
  3. Забув Reload. Змінив файл $\to$ sudo systemctl reload nginx.

Порада з практики: Ніколи не змушуйте Nginx робити те, для чого він не створений. Не пишіть на ньому бізнес-логіку (Lua скрипти можна, але обережно). Nginx має бути тупим і швидким. Розумним має бути ваш бекенд.

6. 🧩 Підсумок

Отже, друзі! Що ми сьогодні з'ясували?

  1. Nginx — це не просто програма, це ваш надійний метрдотель, який захищає "кухню" (бекенд) від хаосу.
  2. Він вміє швидко віддавати статику і перенаправляти запити (Reverse Proxy).
  3. Він працює асинхронно, тому тримає тисячі клієнтів і не потіє.

Тепер ви вмієте: ✅ Розуміти, як ваш код потрапляє в інтернет. ✅ Читати базовий конфіг Nginx. ✅ Налаштувати просте проксіювання (найпопулярніша задача для Junior-розробника при деплої).

🚀 Тизер наступного уроку: Ви, напевно, помітили, що ми використовували http://, а браузери кажуть, що це "Небезпечно". У наступному уроці ми прикрутимо до нашого Nginx SSL-сертифікат (зелений замочок 🔒) і дізнаємося, що таке HTTPS і як це зробити безкоштовно за 2 хвилини!

А поки — спробуйте запустити свій локальний проксі. Успіхів! Kodom na radist! 💻✨

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