Vue Academy · Lección

Despliegue de Vue full-stack en producción

Docker Compose para Vue + Fastify, proxy inverso de nginx, SSL con Let's Encrypt y CI/CD

Lección 4 de 413 pasos

Despliegue de Vue full-stack en producción es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

La topología de producción

En producción, una aplicación Vue + Fastify de pila completa normalmente se ejecuta en dos contenedores: un contenedor de nginx que sirve los archivos estáticos compilados de Vue y un contenedor de la API de Fastify. nginx también actúa como proxy inverso de /api hacia la API.

Compilar la aplicación de Vue

Compile la SPA con Vite para generar recursos estáticos optimizados en dist. Estos son los archivos que servirá nginx.

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

Dockerfile de Vue (multietapa)

Utilice una compilación Docker multietapa: compile con Node y después copie la salida estática en una imagen pequeña de nginx. La imagen final solo contiene los archivos estáticos y 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: proxy de SPA y API

La configuración de nginx sirve la SPA (con una reserva try_files hacia index.html para el enrutamiento del cliente) y envía /api al contenedor de Fastify mediante su nombre de servicio.

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

La imagen de la API instala las dependencias de producción y ejecuta el servidor. Haga que escuche en 0.0.0.0 para que sea accesible desde otros contenedores.

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 los dos servicios en una red compartida. El destino del proxy fastify-api en nginx.conf coincide con el nombre del servicio definido aquí.

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'

Descubrimiento de servicios por nombre

Dentro de la red de compose, los contenedores se comunican entre sí mediante el nombre del servicio. nginx envía las solicitudes a http://fastify-api:3000; no se necesitan direcciones IP y el puerto de la API no queda expuesto públicamente.

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

SSL con Certbot

Añada HTTPS con Let's Encrypt mediante Certbot. Monte los certificados en nginx y configure un bloque de servidor para el puerto 443 que redirija HTTP a 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;
}

Renovación con Certbot

Los certificados de Certbot duran 90 días. Ejecute un comando de renovación según un calendario (cron o un contenedor sidecar) y recargue nginx para que los certificados renovados surtan efecto.

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

CI/CD con GitHub Actions

Automatice la compilación y el despliegue con GitHub Actions: al hacer push a main, compile y ejecute las pruebas; después, compile y publique las imágenes, o conéctese por SSH al servidor para extraerlas y reiniciar con 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'

Secretos y entorno

Nunca incorpore secretos en las imágenes. Páselos mediante variables de entorno (environment / env_file de compose) obtenidas de los secretos de GitHub Actions. Mantenga JWT_SECRET, las URL de la base de datos y otros datos similares fuera del repositorio.

Comprobación rápida

Compruebe su comprensión del despliegue de aplicaciones de pila completa.

Responde en la lección interactiva

Resumen

Ha aprendido a realizar un despliegue en producción:

Dos servicios: vue-nginx (estático) y fastify-api
nginx.conf sirve la SPA y envía /api al nombre del servicio de la API
docker-compose conecta ambos servicios; solo nginx se publica en el host
HTTPS mediante Certbot con renovación programada
GitHub Actions compila, ejecuta las pruebas y despliega; los secretos permanecen en variables de entorno

Gratis para empezar

Aprende HTML con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos: 42
Lecciones: 156

Empezar a aprender gratis Ver el curso completo

Preguntas frecuentes

¿La lección «Despliegue de Vue full-stack en producción» es gratis?

Sí — el texto completo de «Despliegue de Vue full-stack en producción» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Despliegue de Vue full-stack en producción»?

Docker Compose para Vue + Fastify, proxy inverso de nginx, SSL con Let's Encrypt y CI/CD Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Despliegue de Vue full-stack en producción»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Backend Fastify para SPA de Vue
Autenticación JWT: inicio de sesión y renovación
Llamadas autenticadas a la API con interceptores de Axios
Despliegue de Vue full-stack en producción

← Volver a Vue Academy