Vue Academy · 课时

将全栈 Vue 应用部署到生产环境

使用 Docker Compose 部署 Vue + Fastify、nginx 反向代理、使用 Let's Encrypt 配置 SSL，以及 CI/CD

第 4 / 4 课13 个步骤

将全栈 Vue 应用部署到生产环境 是 CoddyKit 上的免费 Vue Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

生产环境拓扑

生产环境中的全栈 Vue + Fastify 应用通常运行在两个容器中：一个提供构建后 Vue 静态文件的 nginx 容器，以及一个 Fastify API 容器。nginx 还会将 /api 反向代理到 API。

构建 Vue 应用

使用 Vite 构建 SPA，在 dist 中生成经过优化的静态资源。这些就是 nginx 将要提供的内容。

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

Vue Dockerfile（多阶段）

使用多阶段 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;
  }
}

Fastify Dockerfile

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 会在共享网络上连接两个服务。nginx.conf 中的代理目标 fastify-api 与此处的服务名称一致。

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

使用 Certbot 配置 SSL

通过 Certbot 使用 Let's Encrypt 添加 HTTPS。将证书挂载到 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 或 sidecar 容器），然后重新加载 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 会发布到主机
通过 Certbot 提供 HTTPS，并按计划续期
GitHub Actions 负责构建、测试和部署；密钥保存在环境变量中

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 42
课程: 156

免费开始学习查看完整课程

常见问题解答

「将全栈 Vue 应用部署到生产环境」课时是免费的吗？

是的 — 「将全栈 Vue 应用部署到生产环境」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「将全栈 Vue 应用部署到生产环境」这节课中我会学到什么？

使用 Docker Compose 部署 Vue + Fastify、nginx 反向代理、使用 Let's Encrypt 配置 SSL，以及 CI/CD 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「将全栈 Vue 应用部署到生产环境」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy