Ось готовий урок, створений у стилі CS50: енергійний, з аналогіями та чітким фокусом на розумінні суті.

🎓 Тема: Nginx у Docker-контейнерах

Або як змусити ваш код «жити» в будь-якій точці світу за лічені секунди

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

Уявіть, що ви написали крутий веб-сайт. Він лежить у вас на ноутбуці, ви відкриваєте файл index.html у браузері, і все виглядає чудово. Але постає питання: як показати це світові?

Ви можете сказати: «Ну, я просто запущу це на сервері». А тепер уявіть, що ваш сервер — це орендована квартира. * Ви приносите туди свої меблі (файли сайту). * Ви налаштовуєте проводку (конфіги сервера). * Ви фарбуєте стіни (встановлюєте залежності).

І раптом власник квартири каже: «Вибач, ми закриваємось, переїжджай на інший сервер». Жах, правда? Вам доведеться все налаштовувати заново.

А що, якби ви могли перевезти всю квартиру разом зі стінами, меблями та проводкою в одній коробці?

Ось тут на сцену виходить Docker. А Nginx (читається як «енджін-екс») — це той швейцар, який стоїть на вході у вашу коробку-квартиру і приймає гостей (HTTP-запити).

Без цього тандему (Nginx + Docker) сучасний розробник схожий на теслю, який щоразу будує майстерню заново, перш ніж зробити стілець. З ними — ви розгортаєте свій проект на будь-якому комп'ютері однією командою.

Готові навчитися пакувати цю магію?

2. 🧠 Теоретична база (без нудьги)

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

1. Що таке Nginx?

Уявіть великий бізнес-центр. Ви не можете просто зайти в будь-який кабінет. Спочатку ви підходите до ресепшну. * Ви кажете: «Я хочу до відділу продажів». * Ресепшн (Nginx) каже: «Проходьте, 3-й поверх, двері праворуч».

Nginx — це цей ресепшн для вашого сайту. Він приймає запит від користувача і віддає йому потрібний файл (картинку, HTML-сторінки) або перенаправляє запит далі (наприклад, до Python чи Node.js).

2. Що таке Docker-контейнер з Nginx?

Це ізольована кімната всередині вашого комп'ютера, де вже встановлено і налаштовано Nginx.

🔑 Головна концепція, яку треба зрозуміти: Контейнер — це закритий світ. Nginx всередині контейнера не бачить файли на вашому комп'ютері, якщо ви йому їх явно не покажете.

Це працює через механізм Volumes (Томи).

Аналогія: Уявіть, що контейнер — це акваріум. Рибка (Nginx) всередині. Ви (ваші файли сайту) ззовні. Щоб рибка побачила ваші файли, ви повинні «притулити» їх до скла акваріума. У Docker це називається "mapping" (мапінг) томів.

3. Порти

Ваш комп'ютер має порти (двері). Контейнер теж має свої порти. Команда -p 8080:80 означає: «Якщо хтось стукає у двері 8080 мого ноутбука, телепортуй його миттєво до дверей 80 всередині контейнера».

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

Приклад №1: "Hello World" від Nginx

Давайте просто перевіримо, чи працює наш "швейцар".

Що ви очікуєте побачити, якщо ми запустимо "голий" Nginx? Правильно, стандартну сторінку привітання розробників Nginx.

Виконуємо в терміналі:

docker run --name my-nginx -p 8080:80 -d nginx

Розбір магії: * docker run: Створити і запустити. * --name my-nginx: Дали ім'я, щоб не звертатися до нього як a1b2c3d4. * -p 8080:80: Вхід через 8080 (ноутбук) -> вихід на 80 (всередині Nginx). * -d: Detached mode (працюй у фоні, не блокуй мій термінал). * nginx: Назва образу (програми), яку качаємо.

👉 Результат: Відкрийте в браузері http://localhost:8080. Ви побачите "Welcome to nginx!".

Приклад №2: Ваш власний сайт (Мапінг томів)

Стандартна сторінка — це нудно. Давайте покажемо ваш HTML.

Створіть папку my-site і в ній файл index.html:

<!-- index.html -->
<h1>Привіт! Я працюю з Докера! 🐳</h1>

Тепер найцікавіше. Нам треба "підкласти" цей файл всередину контейнера. Nginx за стандартом шукає файли в папці /usr/share/nginx/html.

Виконуємо (перебуваючи в папці з файлом):

# Спочатку зупинимо і видалимо старий контейнер
docker rm -f my-nginx

# Запускаємо новий з вашим файлом
docker run --name my-site -p 8080:80 -v $(pwd):/usr/share/nginx/html -d nginx

Що тут нового? * -v $(pwd):/usr/share/nginx/html: * $(pwd) — це поточна папка на вашому комп'ютері (де лежить ваш index.html). * /usr/share/nginx/html — це папка всередині контейнера. * Ми буквально сказали: "Зроби так, щоб папка всередині контейнера стала дзеркалом моєї папки на комп'ютері".

👉 Результат: Оновіть http://localhost:8080. Ви побачите: "Привіт! Я працюю з Докера! 🐳".

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

Теорія без практики мертва. Спробуйте виконати ці завдання прямо зараз.

🔹 Завдання 1: Зміна порту Запустіть ваш сайт (з прикладу №2), але зробіть так, щоб він відкривався за адресою http://localhost:3000. (Підказка: яку частину -p X:Y треба змінити? Зовнішню чи внутрішню?)

🔹 Завдання 2: "Гаряча" заміна Не зупиняючи контейнер, змініть текст у вашому локальному файлі index.html на "Docker — це супер!". Оновіть сторінку в браузері. (Питання: Чому текст змінився без перезапуску контейнера? Згадайте про "дзеркало").

🔹 Завдання 3: Виправ помилку Студент спробував запустити команду: docker run -p 80:80 -v ./website:/var/www/html nginx Але бачить стандартну сторінку Nginx, а не свій сайт. Чому? (Підказка: де Nginx за замовчуванням шукає файли? Який шлях ми використовували в Прикладі 2?)

🔹 Завдання 4: Міні-кейс (Dockerfile) Уявіть, що ви віддаєте свій код клієнту. Ви не можете змусити його писати довгі команди з -v. Ви хочете "запекти" сайт всередину образу. Створіть файл Dockerfile поруч з index.html:

FROM nginx:alpine
COPY index.html /usr/share/nginx/html/index.html

Зберіть образ (docker build -t my-final-site .) і запустіть його без -v. Перевірте, чи працює.

🔹 Завдання 5: Питання "А що, якщо..." Що станеться, якщо ви запустите два різних контейнери, але обом спробуєте призначити порт 8080 (-p 8080:80)? Спробуйте. Що каже Docker?

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

Як відрізнити новачка від профі в роботі з Docker та Nginx?

Новачок редагує файли всередині контейнера. Він заходить всередину через docker exec, міняє конфіг і радіє. Чому це погано: Як тільки контейнер видалиться (а це стається часто), всі зміни зникнуть. Як думає профі: "Контейнери ефемерні (тимчасові). Все важливе має зберігатися зовні (через Volumes) або бути прописаним у Dockerfile".
Забуті порти. Типова ситуація: контейнер запущено, помилок немає, а сайт не відкривається. Дії профі: Першим ділом дивиться docker ps. Чи є там 0.0.0.0:8080->80/tcp? Якщо ні — ви забули відкрити "двері" (-p).
Логи — це ваші очі. Якщо Nginx не стартує, він не скаже вам про це у спливаючому вікні. Команда-рятівник: docker logs <ім'я_контейнера>. Там Nginx плаче і пише, що саме йому не сподобалось у конфізі.

6. 🧩 Підсумок

Отже, що ми сьогодні зробили? 1. Зрозуміли, що Nginx — це розпорядник (веб-сервер), а Docker — це ідеальна коробка для перевезення. 2. Навчилися запускати Nginx однією командою. 3. Зв'язали файли вашого комп'ютера з нутрощами контейнера через Volumes. 4. Зрозуміли різницю між зовнішніми та внутрішніми портами.

Що ви тепер вмієте? Ви можете взяти будь-який статичний сайт (HTML/CSS/JS) і за 30 секунд розгорнути його на будь-якому сервері, де є Docker. Більше жодних "на моєму комп'ютері працювало"!

🚀 Тизер наступного уроку: Зараз ми віддавали прості HTML-файли. А що, як нам треба запустити складний бекенд на Python чи Node.js і сховати його за спиною Nginx? На наступному уроці ми познайомимось із Docker Compose — диригентом, який змусить кілька контейнерів грати в оркестрі.

Це був CS50... тобто, це був ваш перший крок до серйозного DevOps. Успіхів!