Хотите быстро развернуть фронтенд на Node.js с Nginx в Docker? Давайте сделаем это в пару шагов!

---

### 📂 1. Структура проекта
Предполагаем, что у вас есть:

frontend-project/  
├── src/          # Исходники (React/Vue/Next.js)  
├── server.js     # Node.js-сервер (если SSR)  
├── package.json  
└── nginx.conf    # Конфиг Nginx  

---

### 🐋 2. Dockerfile для Node.js + Nginx
Создаем Dockerfile в корне:

# 🔨 Шаг 1: Сборка фронтенда
FROM node:18-alpine as builder

WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build  # React/Vue: `build`, Next.js: `next build`

# 🚀 Шаг 2: Запуск Nginx
FROM nginx:alpine

# 📦 Копируем собранный фронтенд
COPY --from=builder /app/dist /usr/share/nginx/html

# ⚙️ Копируем конфиг Nginx
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

---

### ⚙️ 3. Пример `nginx.conf`
Настроим Nginx для статики и API:

server {
    listen 80;
    server_name localhost;

    # 📂 Раздача статики
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # 🔄 Прокси на бэкенд
    location /api/ {
        proxy_pass http://backend:3000;  # Имя сервиса из docker-compose
        proxy_set_header Host $host;
    }
}

---

### 🎛 4. Запуск через `docker-compose.yml`
Добавляем docker-compose.yml:

version: '3.8'

services:
  frontend:
    build: .
    ports:
      - "80:80"
    depends_on:
      - backend  # Если есть бэкенд

  backend:  # Опционально (Node.js API)
    image: node:18-alpine
    command: npm start
    volumes:
      - ./server:/app
    ports:
      - "3000:3000"

---

### 🚀 5. Сборка и запуск

docker-compose build  # 🛠 Собираем  
docker-compose up    # 🚀 Запускаем  

Теперь фронт доступен по http://localhost!

---

### 📌 Итог
- Node.js → собирает фронтенд.
- Nginx → раздает статику + проксирует API.
- Docker → упаковывает все в контейнер.

💡 Оптимизация для продакшена:
- Используйте multi-stage сборку (как в примере).
- Добавьте кеширование `node_modules`.
- Используйте `alpine`-образы для уменьшения размера.

🔔 Нужен HTTPS или балансировка? Пишите в комментарии! 👇

Теперь ваш фронтенд готов к деплою! 🎉

🤗 Наш чат для обсуждений получи футболку тут |🔝 Буст для канала

✋Поддержи канал и автора миской супа и на развитие мерча!