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

🎓 Урок: Структура конфігураційних файлів Nginx

Привіт, друзі! Це CS50 (умовно 😉), і сьогодні ми заглянемо під капот найпопулярнішого веб-сервера у світі — Nginx.

1. 🔥 Вступ: Хаос у великому місті

Уявіть собі величезний бізнес-центр у центрі Києва. Тисячі людей заходять у головні двері щохвилини. Хтось іде в офіс Google, хтось — у кав’ярню на першому поверсі, а хтось — до нотаріуса в кабінет 305.

А тепер уявіть, що на вході немає нікого. Жодних вказівників, жодного рецепшну. Люди блукають коридорами, заходять на чужі кухні, губляться. Хаос!

Nginx — це і є той самий ідеальний адміністратор на рецепшні.

Коли запит (користувач) приходить на ваш сервер (у бізнес-центр), саме Nginx вирішує: * "Ти хочеш картинку? Тобі сюди." * "Ти хочеш завантажити відео? Тобі туди." * "А ти прийшов на сайт myshop.com? Тобі на 5-й поверх."

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

Сьогодні ми навчимося писати інструкції для цього адміністратора. Ми розберемо структуру nginx.conf.

2. 🧠 Теоретична база: Матрьошка контекстів

Nginx не читає думки. Він читає директиви (команди). Але найголовніше — це те, ДЕ ці команди написані.

Уявіть структуру Nginx як матрьошку (або вкладені коробки). У програмуванні ми називаємо це контекстами.

Основні рівні (запам'ятайте цю ієрархію!):

Main (Global) Context:
- Це найбільша коробка. Тут ми задаємо глобальні налаштування для всього сервера (наприклад, від імені якого користувача працює Nginx).
Events Context:
- Технічна "кімната". Тут вирішується, скільки з'єднань одночасно ми можемо обробити.
HTTP Context:
- Це наш світ вебу. Все, що стосується сайтів, лежить тут.
Server Context (всередині HTTP):
- Це конкретний "віртуальний хост". Один сервер (машина) може тримати 10 різних сайтів. Блок server описує один конкретний сайт (наприклад, google.com).
Location Context (всередині Server):
- Це конкретна папка або URL на сайті. Наприклад, /images/ або /admin/.

Синтаксис (дуже просто):

Блоки беруться у фігурні дужки { ... }.
Команди закінчуються крапкою з комою ;.
- Увага! Забута ; — це причина 90% помилок новачків. Це як забути закрити дужку в математиці.

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

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

Приклад 1: Абсолютний мінімум

Що тут відбувається?

events {} # Порожній, але обов'язковий блок для запуску

http {
    server {
        listen 80;
        return 200 "Hello from Nginx!";
    }
}

Питання до вас: Якщо я зайду на цей сервер через браузер, що я побачу? . . . Відповідь: Ви побачите просто білий екран з текстом "Hello from Nginx!". Nginx послухав порт 80 (стандартний веб-порт) і просто віддав текст.

Приклад 2: Класичний статичний сайт

Тепер реальна задача. У нас є папка /var/www/html, де лежить наш index.html.

http {
    server {
        listen 80;
        server_name mywebsite.com; # Реагуємо тільки на це ім'я

        root /var/www/html;        # Головна папка з файлами
        index index.html;          # Який файл відкривати першим

        # Спеціальна обробка для папки картинок
        location /images/ {
            root /var/www/media;
        }
    }
}

Аналіз логіки: 1. Приходить запит на mywebsite.com. 2. Nginx бачить server_name, каже "О, це до мене!". 3. Якщо запит mywebsite.com/images/cat.png, Nginx піде шукати файл у /var/www/media/images/cat.png. 4. Для всього іншого він шукатиме у /var/www/html.

Приклад 3: Проксіювання (Back-end розробка)

Припустимо, ви написали крутий додаток на Python або Node.js, який працює на порту 3000. Nginx має бути "фасадом".

server {
    listen 80;
    server_name app.com;

    location / {
        proxy_pass http://localhost:3000; # Перенаправляємо запит "всередину"
    }
}

Тут Nginx працює як кур’єр: він бере запит від клієнта, передає його вашому Python-додатку, чекає відповідь і віддає її назад клієнту.

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

А тепер ваша черга! Відкрийте редактор (або уявіть його) і спробуйте вирішити ці завдання.

Завдання 1 (Copy-Paste + Fix): Ви скопіювали цей код, але Nginx лається і не запускається. Знайдіть дві помилки:

server {
    listen 80
    server_name test.com;
    location / {
        root /var/www/test
    }
}

(Підказка: згадайте про "крапки" в кінці речень).

Завдання 2 (Зміна порту): Ваш провайдер заблокував порт 80. Змініть конфігурацію з Прикладу 1 так, щоб сайт відкривався за адресою http://localhost:8080.

Завдання 3 (Безпека): У вас є папка /secret, яку не можна показувати нікому. Допишіть location блок, який для шляху /secret повертає помилку 403 (Forbidden). Підказка: директива виглядає як deny all; або return 403;.

Завдання 4 (Два сайти): У вас один сервер, але два домени: blog.com і shop.com. Напишіть структуру http блоку, де буде два блоки server. Один має вести в папку /var/www/blog, інший — у /var/www/shop.

Завдання 5 (Міні-кейс "А що, якщо..."): Що станеться, якщо у вас буде два блоки server з однаковим server_name, але різними портами? А якщо і порти однакові? Як Nginx зрозуміє, кого вибрати? (Спробуйте сформулювати гіпотезу перед гуглінням).

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

Як відрізнити новачка від профі, дивлячись на конфіг Nginx?

"Don't Repeat Yourself" (DRY) не завжди працює. У коді ми звикли не повторюватися. У Nginx іноді краще продублювати 2 рядки в різних блоках server, ніж писати складну логіку з if (if у Nginx — це зло, запам'ятайте це!).
Тестування — це закон. Профі ніколи не перезавантажує сервер без команди: sudo nginx -t Ця команда перевіряє синтаксис і каже, чи все ок, до того, як ваш сайт впаде.
Порядок має значення. Nginx обирає location за принципом "найбільш точного співпадіння". Якщо у вас є location / і location /images/, то запит на картинку піде в другий, бо він точніший. Розуміння пріоритетів — ключ до майстерності.
Розділяй і володарюй. Замість того, щоб писати один файл на 1000 рядків, профі створюють окремий файл для кожного сайту в папці /etc/nginx/sites-available/ і підключають їх через команду include. Це як розкласти документи по папках, а не тримати все на столі купою.

6. 🧩 Підсумок

Отже, що ми сьогодні зробили? * Ми розібрали ієрархію: http -> server -> location. * Зрозуміли, що Nginx — це диспетчер, який направляє трафік. * Навчилися знаходити синтаксичні помилки (ці підступні ;!). * Створили свій перший віртуальний хост.

Тепер ви не просто "запускаєте сервер", ви керуєте потоками даних!

🔜 У наступній серії: Ви налаштували сайт, але браузер пише "Not Secure"? У наступному уроці ми розберемо HTTPS та SSL-сертифікати. Ми зробимо ваш замок зеленим!

А поки — sudo nginx -t і успіхів у коді! 🚀