Vue Academy · Урок

Развёртывание полнофункционального Vue-приложения в продакшене

Docker Compose для Vue и Fastify, обратный прокси nginx, SSL с Let's Encrypt и CI/CD

«Развёртывание полнофункционального Vue-приложения в продакшене» — бесплатный урок Vue Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Производственная топология

Полноценное приложение Vue + Fastify в продакшене обычно запускается в двух контейнерах: контейнере nginx, раздающем собранные статические файлы Vue, и контейнере API Fastify. nginx также выступает обратным прокси для /api, направляя запросы к API.

Сборка приложения Vue

Соберите SPA с помощью Vite, чтобы получить оптимизированные статические ресурсы в dist. Именно их будет раздавать nginx.

# package.json script
npm run build
# produces dist/ with hashed JS/CSS and index.html

Dockerfile Vue: многоэтапная сборка

Используйте многоэтапную сборку Docker: выполните сборку с помощью Node, а затем скопируйте статический результат в небольшой образ nginx. В итоговом образе содержатся только статические файлы и nginx.

FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

nginx.conf: SPA и прокси API

Конфигурация nginx раздаёт SPA (с резервным переходом try_files к index.html для маршрутизации на стороне клиента) и проксирует /api к контейнеру Fastify по имени сервиса.

server {
  listen 80;
  root /usr/share/nginx/html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  location /api/ {
    proxy_pass http://fastify-api:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

Dockerfile Fastify

Образ API устанавливает зависимости для продакшена и запускает сервер. Привяжите его к 0.0.0.0, чтобы он был доступен из других контейнеров.

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --omit=dev
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

docker-compose.yml

docker-compose объединяет два сервиса в общей сети. Цель прокси fastify-api в nginx.conf соответствует указанному здесь имени сервиса.

services:
  vue-nginx:
    build: ./frontend
    ports:
      - '80:80'
      - '443:443'
    depends_on:
      - fastify-api
  fastify-api:
    build: ./backend
    environment:
      - JWT_SECRET=${JWT_SECRET}
    expose:
      - '3000'

Обнаружение сервисов по имени

Внутри сети compose контейнеры обращаются друг к другу по имени сервиса. nginx проксирует запросы на http://fastify-api:3000 — IP-адреса не нужны, а порт API не требуется открывать публично.

# only nginx is published to the host (80/443)
# fastify-api uses 'expose', reachable only internally

SSL с Certbot

Добавьте HTTPS с помощью Let's Encrypt и Certbot. Подключите сертификаты к nginx и настройте блок сервера для порта 443, перенаправляя HTTP на HTTPS.

server {
  listen 443 ssl;
  ssl_certificate /etc/letsencrypt/live/app.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/app.com/privkey.pem;
  # ... same location blocks as before
}
server {
  listen 80;
  return 301 https://$host$request_uri;
}

Обновление сертификатов Certbot

Сертификаты Certbot действуют 90 дней. Запускайте команду обновления по расписанию (через cron или контейнер-спутник) и перезагружайте nginx, чтобы обновлённые сертификаты вступали в силу.

# cron entry, twice daily
certbot renew --quiet && nginx -s reload

GitHub Actions для CI/CD

Автоматизируйте сборку и развёртывание с помощью GitHub Actions: при отправке изменений в main выполните сборку и тесты, затем соберите и отправьте образы либо подключитесь к серверу по SSH, чтобы получить обновления и перезапустить сервисы с помощью compose.

name: deploy
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm test
      - name: Deploy over SSH
        run: ssh $HOST 'cd /app && git pull && docker compose up -d --build'

Секреты и окружение

Никогда не встраивайте секреты в образы. Передавайте их через переменные окружения (compose environment / env_file), полученные из секретов GitHub Actions. Храните JWT_SECRET, URL баз данных и прочие секреты вне репозитория.

Быстрая проверка

Проверьте, насколько хорошо Вы поняли развёртывание полнофункционального приложения.

Итоги

Вы научились выполнять развёртывание в продакшене:

Два сервиса: vue-nginx (статические файлы) и fastify-api
nginx.conf раздаёт SPA и проксирует /api к сервису API по его имени
docker-compose объединяет сервисы; только nginx публикуется на хосте
HTTPS через Certbot с обновлением по расписанию
GitHub Actions выполняет сборку, тесты и развёртывание; секреты хранятся в переменных окружения

Часто задаваемые вопросы

Урок «Развёртывание полнофункционального Vue-приложения в продакшене» бесплатный?

Да — полный текст урока «Развёртывание полнофункционального Vue-приложения в продакшене» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Развёртывание полнофункционального Vue-приложения в продакшене»?

Docker Compose для Vue и Fastify, обратный прокси nginx, SSL с Let's Encrypt и CI/CD Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Развёртывание полнофункционального Vue-приложения в продакшене»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Бэкенд Fastify для SPA на Vue
Аутентификация JWT: вход и обновление
Аутентифицированные вызовы API с перехватчиками Axios
Развёртывание полнофункционального Vue-приложения в продакшене

← Назад к Vue Academy