Vue Academy · Aula

Implantação de Vue full-stack em produção

Docker Compose para Vue + Fastify, proxy reverso nginx, SSL com Let's Encrypt e CI/CD.

Aula 4 de 413 etapas

Implantação de Vue full-stack em produção é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

A topologia de produção

Uma aplicação Vue + Fastify completa em produção normalmente é executada como dois contêineres: um contêiner nginx que serve os arquivos estáticos compilados do Vue e um contêiner de API Fastify. O nginx também atua como proxy reverso de /api para a API.

Compilando o app Vue

Compile a SPA com Vite para produzir recursos estáticos otimizados em dist. É isso que o nginx servirá.

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

Dockerfile do Vue (vários estágios)

Use uma compilação Docker em vários estágios: compile com Node e depois copie a saída estática para uma imagem nginx pequena. A imagem final contém apenas arquivos estáticos e 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 + proxy da API

A configuração do nginx serve a SPA (com um fallback try_files para index.html no roteamento do cliente) e encaminha /api ao contêiner Fastify pelo nome do serviço.

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 do Fastify

A imagem da API instala dependências de produção e executa o servidor. Vincule a 0.0.0.0 para que ele fique acessível a partir de outros contêineres.

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 conecta os dois serviços em uma rede compartilhada. O destino do proxy fastify-api em nginx.conf corresponde ao nome do serviço aqui.

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'

Descoberta de serviços por nome

Dentro da rede do compose, os contêineres alcançam uns aos outros pelo nome do serviço. O nginx encaminha para http://fastify-api:3000 — sem IPs e sem exposição pública da porta da API.

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

SSL com Certbot

Adicione HTTPS usando Let's Encrypt por meio do Certbot. Monte os certificados no nginx e configure um bloco de servidor na porta 443, redirecionando HTTP para 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;
}

Renovação do Certbot

Os certificados do Certbot duram 90 dias. Execute um comando de renovação periodicamente (cron ou um contêiner auxiliar) e recarregue o nginx para que os certificados renovados entrem em vigor.

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

GitHub Actions para integração e entrega contínuas

Automatize a compilação e a implantação com GitHub Actions: ao fazer push para main, compile e execute os testes, depois compile e envie as imagens ou use SSH para se conectar ao servidor, baixá-las e reiniciar com 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'

Segredos e ambiente

Nunca inclua segredos nas imagens. Passe-os por variáveis de ambiente (compose environment / env_file) obtidas dos segredos do GitHub Actions. Mantenha JWT_SECRET, URLs do banco de dados e outros valores fora do repositório.

Verificação rápida

Teste sua compreensão da implantação de uma aplicação completa.

Responda na aula interativa

Revisão

Você aprendeu sobre implantação em produção:

Dois serviços: vue-nginx (estático) e fastify-api
nginx.conf serve a SPA e encaminha /api ao nome do serviço da API
docker-compose conecta os serviços; apenas o nginx é publicado no host
HTTPS por meio do Certbot com renovação programada
O GitHub Actions compila, executa os testes e implanta; os segredos permanecem nas variáveis de ambiente

Grátis para começar

Aprenda HTML com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 42
Aulas: 156

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Implantação de Vue full-stack em produção” é grátis?

Sim — o texto completo de “Implantação de Vue full-stack em produção” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Implantação de Vue full-stack em produção”?

Docker Compose para Vue + Fastify, proxy reverso nginx, SSL com Let's Encrypt e CI/CD. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Implantação de Vue full-stack em produção”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Backend Fastify para SPAs Vue
Autenticação JWT: login e atualização
Chamadas autenticadas à API com interceptadores do Axios
Implantação de Vue full-stack em produção

← Voltar para Vue Academy