# 🔧 Оптимизация фронтенд-сервиса: Nginx + Kubernetes + Vite

Привет, коллеги! 👋 Сегодня хочу поделиться интересным кейсом по оптимизации деплоя фронтенд-сервиса на Node.js + Vite, который должен работать не просто через yarn build, а через Nginx в Kubernetes.

Почему Nginx? 🚀
- Быстрее отдача статики (Nginx заточен под это, а Node.js — нет).
- Меньше нагрузки (не тратим ресурсы Node на раздачу файлов).
- Гибкость конфигурации (роутинг, кэширование, сжатие).

Но возникла проблема: как прокинуть `VITE_API_BASE_URL` на всех этапах сборки?

---

## 🛠 Проблема и решение

Сервис работает в Kubernetes, и нам нужно:
1. Собрать фронтенд с правильным VITE_API_BASE_URL.
2. Запустить его через Nginx (не через yarn start).
3. Настроить Ingress для доступа.

### 🔹 1. Докерфайл для фронтенда (Vite + Node.js)

Раньше было так:

FROM node:18  
WORKDIR /app  
COPY package.json yarn.lock ./  
RUN yarn install  
COPY . .  
RUN yarn build  
CMD ["yarn", "start"]  # ❌ Неоптимально!  

Теперь так:

# Шаг 1: Сборка  
FROM node:18 as builder  
WORKDIR /app  
COPY package.json yarn.lock ./  
RUN yarn install  
COPY . .  
ARG VITE_API_BASE_URL  # 🔑 Динамическая переменная!  
RUN yarn build  

# Шаг 2: Запуск через Nginx  
FROM nginx:alpine  
COPY --from=builder /app/dist /usr/share/nginx/html  
COPY nginx.conf /etc/nginx/conf.d/default.conf  
EXPOSE 80  
CMD ["nginx", "-g", "daemon off;"]  

Что изменилось?
- Сборка проходит с ARG VITE_API_BASE_URL.
- Статика отдается через Nginx, а не Node.js.

---

### 🔹 2. Настройка Nginx

Файл nginx.conf:

server {  
    listen 80;  
    server_name localhost;  

    location / {  
        root /usr/share/nginx/html;  
        index index.html;  
        try_files $uri $uri/ /index.html;  
    }  

    # Проксируем API-запросы  
    location /api {  
        proxy_pass ${API_BASE_URL};  # 🔄 Берем из переменных  
        proxy_set_header Host $host;  
    }  
}  

---

### 🔹 3. Запуск в Kubernetes (Ingress + ConfigMap)

Deployment:

apiVersion: apps/v1  
kind: Deployment  
metadata:  
  name: frontend  
spec:  
  replicas: 2  
  template:  
    spec:  
      containers:  
      - name: frontend  
        image: my-frontend-image  
        env:  
        - name: VITE_API_BASE_URL  # 🎯 Важно для сборки!  
          value: "https://api.example.com"  

Ingress:

apiVersion: networking.k8s.io/v1  
kind: Ingress  
metadata:  
  name: frontend-ingress  
spec:  
  rules:  
  - host: my-app.com  
    http:  
      paths:  
      - path: /  
        pathType: Prefix  
        backend:  
          service:  
            name: frontend  
            port:  
              number: 80  

---

## 📊 Схема работы

graph TD  
    A[Vite Build] -->|Передает статику| B[Nginx]  
    B -->|Отдает файлы| C[Клиент]  
    C -->|API-запросы| D[Backend]  
    D -->|Ответ| C  

---

## 💡 Вывод

✅ Nginx быстрее раздает статику, чем Node.js.
✅ Kubernetes + Ingress дают гибкость маршрутизации.
✅ Динамические переменные (VITE_API_BASE_URL) можно прокидывать на этапе сборки.

Как у вас настроен фронтенд в Kubernetes? Делитесь в комментах! 👇

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

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