Модуль 9

Root, alias та робота зі статикою

Ось готовий урок, створений у стилі David Malan: енергійний, з аналогіями та акцентом на розумінні суті («навіщо це?»), а не простому зазубрюванні.

🎓 Урок: Root, Alias та магія статичних файлів

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

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

Здавалося б, що тут складного? Є файл, є папка — бери й віддавай! Але... чекайте.

1. 🔥 Вступ: Де мої картинки?

Уявіть ситуацію. Ви створили крутий сайт. У вас є папка проекту /var/www/my-site. Всередині лежить файл стилів style.css.

Користувач заходить на example.com/style.css. Сервер думає: "Окей, я бачу запит. А де цей файл лежить фізично на диску?"

Якщо ви налаштуєте сервер неправильно, користувач побачить страшну помилку 404 Not Found. А ви будете дивитися в термінал і кричати: "Та ось же він, я його бачу! Чому ти його не бачиш?!"

Чому без цієї теми не обійтись? Тому що URL-адреса в браузері (віртуальний шлях) і файлова система вашого сервера (фізичний шлях) — це не одне й те саме.

Уявіть, що ви — бібліотекар (це наш сервер). * Запит читача: "Дайте мені книгу 'Кобзар' з полиці 'Класика'". * Реальність: У вас немає полиці 'Класика'. У вас є "Шафа №5, третя полиця".

Вам потрібна інструкція, як перекласти запит читача в реальне місцезнаходження книги. Саме цією інструкцією є директиви root та alias.

Готові розібратися, як не загубити свої файли? Поїхали! 🚀

2. 🧠 Теоретична база: Математика шляхів

Давайте заглянемо "під капот". Як сервер формує повний шлях до файлу?

Тут немає магії, тут проста арифметика рядків.

🔑 Поняття 1: Статика (Static Files)

Це файли, які сервер віддає "як є", не змінюючи їх: картинки (.jpg, .png), стилі (.css), скрипти (.js), шрифти. Серверу не треба думати, йому треба просто знайти файл і "жбурнути" його в браузер.

🔑 Поняття 2: Root (Корінь)

Це найпопулярніший спосіб. Коли ви використовуєте root, сервер бере шлях, який ви вказали, і додає до нього те, що запитав користувач.

Формула root: Фінальний шлях = Шлях в root + URI запиту

🔑 Поняття 3: Alias (Псевдонім)

Це інструмент для тих випадків, коли ви хочете "обдурити" систему. Ви кажете: "Якщо користувач просить оце, забудь частину запиту і просто йди в ту папку".

Формула alias: Фінальний шлях = Шлях в alias + (URI запиту мінус частина location)

🧐 Що треба зрозуміти інтуїтивно:

  • Root — це як приставка. Він просто ставиться на початку.
  • Alias — це як підміна. Він замінює частину адреси на новий шлях.

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

У нас є сервер. Файлова система виглядає так: 📂 /var/www/project/ └── 📂 assets/ └── 🖼 logo.png

Приклад 1: Використовуємо ROOT (Класика)

Конфігурація Nginx:

location /assets/ {
    root /var/www/project;
}

Запит користувача: example.com/assets/logo.png

❓ Питання до вас: Який повний шлях сформує сервер? Спробуйте скласти "пазл" у голові.

... ...

💡 Відповідь: Сервер бере root (/var/www/project) і додає весь URI (/assets/logo.png). Результат: /var/www/project/assets/logo.png. Файл знайдено! ✅

Приклад 2: Пастка з ROOT (Увага!)

Уявіть, що ви написали так:

location /assets/ {
    root /var/www/project/assets;  # <-- Додали assets в кінець
}

Запит той самий: example.com/assets/logo.png

❓ Що станеться?

...

💡 Відповідь: Математика root: /var/www/project/assets + /assets/logo.png. Результат: /var/www/project/assets/assets/logo.png. Помилка 404! ❌ Сервер шукає папку assets всередині папки assets, якої не існує.

Приклад 3: Рятівний ALIAS

Іноді у вас на диску папка називається images, а в URL ви хочете, щоб було /gallery/.

Файлова система: /var/www/project/images/cat.jpg URL: example.com/gallery/cat.jpg

Як це зробити? root тут не спрацює (бо він тупо додасть /gallery/ до шляху).

Використовуємо alias:

location /gallery/ {
    alias /var/www/project/images/;
}

❓ Як це працює?

...

💡 Пояснення: 1. Користувач просить: /gallery/cat.jpg. 2. Nginx бачить location /gallery/. 3. alias каже: "Заміни /gallery/ на /var/www/project/images/". 4. Залишок від запиту: cat.jpg. 5. Результат: /var/www/project/images/cat.jpg. Файл знайдено! ✅

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

Час розім'яти пальці! Уявіть, що ви налаштовуєте конфіг для реального інтернет-магазину.

Структура файлів на сервері: * /data/site/static/css/style.css * /data/site/media/photos/item1.jpg

🔹 Завдання 1: Простий Root Користувач заходить на site.com/static/css/style.css. Напишіть блок location, використовуючи root, щоб файл віддався коректно.

🔹 Завдання 2: Хитрий Alias Користувач заходить на site.com/images/item1.jpg. Але на диску файли лежать у /data/site/media/photos/. Напишіть блок location, використовуючи alias.

🔹 Завдання 3: Дебаг (Знайди помилку) Джуніор написав такий конфіг для файлу /var/www/html/robots.txt:

location /robots.txt {
    root /var/www/html/robots.txt;
}

Чому це призведе до помилки, коли прийде запит site.com/robots.txt? Який шлях вийде в результаті?

🔹 Завдання 4: Міні-кейс "Безпека" Що, якщо ми напишемо alias /; (корінь всієї системи Linux)? Що станеться, якщо хтось введе site.com/etc/passwd? (Підказка: це риторичне завдання, щоб зрозуміти, чому треба вказувати шлях до конкретної папки проекту, а не всієї системи).

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

Як думає досвідчений DevOps або Backend-розробник, коли налаштовує статику?

  1. "Keep it simple" (Будь простішим). Я завжди намагаюся використовувати root. Це стандарт. Це зрозуміло. Я використовую alias тільки тоді, коли фізична структура папок кардинально відрізняється від того, що я хочу бачити в URL.

  2. Проблема слеша / (Trailing Slash). Це класична граблі.

    • В alias обов'язково стежте за слешами в кінці.
    • Якщо в location /img/ є слеш, то і в alias /path/to/files/ він має бути!
    • Порада: Якщо отримуєте 404 або 301 redirect loop — перевірте слеші.

  3. Не світи зайвим. Ніколи не робіть root /. Це відкриває весь ваш сервер. Обмежуйте область видимості тільки папкою public або static.

6. 🧩 Підсумок

Отже, друзі, що ми сьогодні вивчили?

  1. Root — це "додавач". Він бере шлях і доліплює до нього запит. Найкращий друг для стандартних ситуацій.
  2. Alias — це "замінник". Він міняє частину URL на шлях до папки. Використовуємо для кастомних шляхів.
  3. Сервер — це не маг, це бюрократ. Він чітко слідує інструкції. Якщо ви помилилися в одній літері шляху — він не здогадається, що ви мали на увазі.

Що ви тепер вмієте? Ви можете "подружити" будь-яку структуру папок на вашому комп'ютері з будь-якою красою URL-адреси, яку хочете показати світові. Ваші картинки більше не будуть "битими"!

🔜 У наступній серії: Ми навчилися віддавати статичні файли. Але сучасний веб — це динаміка! Як змусити сервер не просто віддавати файли, а виконувати код (Python, PHP, Node.js)? Про це — в темі про proxy_pass та FastCGI.

А поки що — експериментуйте з конфігами! До зустрічі! 👋

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