Перейти к основному содержимому

Практическое задание 1: Nginx Proxy

🌐 Настройка Nginx для проксирования - Развертывание локальных сайтов

📋 Описание задания​

Скачать пару сайтов с GitHub, развернуть локально у себя nginx и проксировать оба сайта на два разных порта. Настроить полноценную инфраструктуру для разработки с использованием Nginx в качестве reverse proxy. Можно использовать как локальное развертывание, так и Docker для контейнеризации.

🎯 Цели задания​

  • Изучение работы с Nginx
  • Настройка проксирования и reverse proxy
  • Работа с локальными репозиториями
  • Понимание веб-серверов и портов
  • Освоение Docker для веб-разработки
  • Создание инфраструктуры для разработки

Основные требования:​

  1. Скачать два сайта с GitHub - выбрать любые два веб-проекта
  2. Развернуть локально - настроить локальную среду разработки
  3. Настроить Nginx - создать конфигурацию для проксирования
  4. Проксировать на разные порты - каждый сайт на свой порт

🐳 Использование Docker (опционально):​

  • Nginx в Docker - использовать готовый образ nginx
  • Сайты в контейнерах - каждый сайт в отдельном контейнере
  • Docker Compose - оркестрация всех сервисов
  • Изоляция окружения - чистая среда для экспериментов

💻 Локальное развертывание (альтернатива):​

  • Установка Nginx - установить Nginx локально на систему
  • Локальные серверы - запустить сайты на локальных портах
  • Конфигурация Nginx - настроить проксирование на локальные порты
  • Простота настройки - быстрый старт без Docker

Материалы для сдачи:​

  • Скринкаст с демонстрацией:
    • Локальные репозитории обоих сайтов
    • Конфигурация Nginx (локально или в Docker)
    • Открытые сайты в браузере на соответствующих портах
    • Работа сервисов (локально или в Docker контейнерах)

📊 Система оценивания​

  • Полное выполнение: Максимальная оценка (2 балла)
  • Частичное выполнение: Преподаватель дает обратную связь и просит переделать
  • Пересдача: Возможна после исправления замечаний

⏰ Сроки выполнения​

  • Очное выполнение: 2 балла (выполнение на практическом занятии)
  • Домашнее выполнение: 1 балл (скринкаст с демонстрацией)

🛠 Технические требования​

Обязательные компоненты:​

  • Nginx reverse proxy - основной entry point
  • Два веб-сайта - каждый на своем порту

Опциональные компоненты (выберите один подход):​

  • Docker контейнеры - для всех сервисов (Docker подход)
  • Docker Compose - для оркестрации (Docker подход)
  • Локальные серверы - запуск сайтов на локальных портах (локальный подход)

Примеры конфигураций:​

  • Nginx reverse proxy - изучите документацию по настройке проксирования
  • Docker Compose - настройте оркестрацию сервисов (если используете Docker)
  • Локальная настройка - настройте Nginx для работы с локальными портами

🔗 Полезные ресурсы​

Nginx и проксирование:​

Docker и контейнеризация:​

Локальная разработка:​

Веб-проекты для практики:​

Дополнительные туториалы:​

📁 Структура проекта​

Docker подход:​

practical-1-nginx-proxy/
├── sites/
│   ├── site-1/              # Первый скачанный сайт
│   │   ├── Dockerfile       # Dockerfile для первого сайта
│   │   ├── package.json     # Зависимости (если Node.js)
│   │   └── src/             # Исходный код сайта
│   └── site-2/              # Второй скачанный сайт
│       ├── Dockerfile       # Dockerfile для второго сайта
│       ├── package.json     # Зависимости (если Node.js)
│       └── src/             # Исходный код сайта
├── nginx/
│   └── nginx.conf           # Конфигурация Nginx
├── docker-compose.yml       # Оркестрация всех сервисов
├── README.md                # Описание проекта
└── screenshots/             # Скриншоты демонстрации

Локальный подход:​

practical-1-nginx-proxy/
├── site-1/                  # Первый скачанный сайт
│   ├── package.json         # Зависимости (если Node.js)
│   └── src/                 # Исходный код сайта
├── site-2/                  # Второй скачанный сайт
│   ├── package.json         # Зависимости (если Node.js)
│   └── src/                 # Исходный код сайта
├── nginx.conf               # Конфигурация Nginx
├── README.md                # Описание проекта
└── screenshots/             # Скриншоты демонстрации

📋 Чек-лист выполнения​

Подготовка:​

  • [ ] Выбраны два веб-проекта с GitHub
  • [ ] Скачаны репозитории локально
  • [ ] Изучена структура каждого проекта
  • [ ] Определены порты для каждого сайта

Docker настройка (опционально):​

  • [ ] Создан Dockerfile для первого сайта
  • [ ] Создан Dockerfile для второго сайта
  • [ ] Настроен docker-compose.yml
  • [ ] Протестирована сборка контейнеров

Локальная настройка (альтернатива):​

  • [ ] Установлен Nginx локально
  • [ ] Настроены локальные серверы для сайтов
  • [ ] Проверена работа сайтов на локальных портах
  • [ ] Настроена конфигурация Nginx для локальных портов

Nginx конфигурация:​

  • [ ] Создана конфигурация nginx.conf
  • [ ] Настроены location блоки для каждого сайта
  • [ ] Добавлены proxy_set_header директивы
  • [ ] Протестирована конфигурация

Интеграция:​

  • [ ] Запущены все сервисы (Docker или локально)
  • [ ] Проверена доступность сайтов через Nginx
  • [ ] Протестированы все маршруты
  • [ ] Проверена работа в браузере

Демонстрация:​

  • [ ] Подготовлен скринкаст с демонстрацией
  • [ ] Показана работа обоих сайтов
  • [ ] Продемонстрирована конфигурация
  • [ ] Задокументированы результаты

🧪 Тестирование​

Обязательные тесты:​

  1. Доступность сайтов - оба сайта открываются через Nginx
  2. Проксирование - запросы корректно перенаправляются
  3. Сервисы - все сервисы запущены и работают (Docker или локально)
  4. Конфигурация - Nginx корректно обрабатывает маршруты

Дополнительные тесты:​

  • Производительность проксирования
  • Обработка ошибок (недоступные сервисы)
  • Логирование запросов
  • Масштабирование (добавление новых сайтов)

🚀 Примеры веб-проектов​

Статические сайты:​

React приложения:​

Vue.js приложения:​

Node.js приложения:​

Последнее обновление: Январь 2025