前端转全栈 13：部署与运维——Docker、CI/CD、环境变量与监控

系列目录：本文是「前端转全栈：Next.js + Supabase 实战」系列的第 13 篇。代码写完了，怎么让全网用户访问？这一篇把「本地能跑」变成「线上可用」。

前端同学大多把「部署」交给 npm run build 完事。但全栈应用有数据库、密钥、环境变量——部署是把所有零件组装上线的过程。

一、最省心的路线：Vercel + Supabase

本站就跑在这套组合上，前端转全栈强烈推荐先用它：

把代码推到 GitHub。
在 Vercel 导入仓库，框架选 Next.js，零配置。
在 Vercel 的 Environment Variables 里填 NEXT_PUBLIC_SUPABASE_URL、NEXT_PUBLIC_SUPABASE_ANON_KEY、SUPABASE_SERVICE_ROLE_KEY（绝不填进代码）。
点 Deploy，几秒后拿到 xxx.vercel.app 域名。

Supabase 侧：在后台 SQL Editor 执行 schema.sql 建表，在 Auth 里配 GitHub Provider。数据库和登录都是托管的，你不用碰服务器。

这就是「进阶混合」里「先快速产出」的精髓：用托管服务把运维压到最低，专注业务。

二、Docker：当你需要自己掌控环境

想部署到自己的云服务器（阿里云/腾讯云/AWS），或需要 WebSocket 长连接服务时，用 Docker 把应用「装进集装箱」，到哪都能跑：

# Dockerfile
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

构建运行：

docker build -t my-app .
docker run -p 3000:3000 --env-file .env.prod my-app

docker-compose.yml 还能把「Next.js + Postgres + Redis」一起编排启动。Docker 的价值是「环境一致性」：本地、测试、生产一模一样，杜绝「我本地能跑」。

三、CI/CD：每次 push 自动测、自动部署

把第 12 篇的测试接进流水线。GitHub Actions 示例：

# .github/workflows/ci.yml
name: CI
on: [push]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npx vitest run      # 单元测试
      - run: npx playwright test # E2E
  deploy:
    needs: test                  # 测试过才部署
    runs-on: ubuntu-latest
    steps:
      - run: curl -X POST ${{ secrets.VERCEL_DEPLOY_HOOK }}

红了的测试直接拦住部署——这就是自动化的意义：人会忘记跑测试，机器不会。

四、域名与 HTTPS

买域名（Cloudflare / 阿里云 / Namesilo）。
在 Vercel 里 Add Domain，按提示加 DNS 解析记录。
Vercel 自动签发 HTTPS 证书（Let's Encrypt），无需手动配。HTTPS 是底线——没它浏览器标记「不安全」，且 Supabase Auth 等要求安全上下文。

若用自己服务器，用 Caddy 或 Nginx + certbot 自动续签证书。

五、监控：上线不是终点

错误监控：Sentry 捕获线上异常，比用户先知道崩了。
性能/可用：Vercel Analytics、UptimeRobot 心跳检测。
数据库：Supabase 自带查询性能面板，盯慢查询。
日志：集中看请求日志，排错时救命。

六、部署 checklist

[ ] 生产环境变量已配（密钥不进代码）
[ ] 数据库 schema 已执行、RLS 已开
[ ] CI 跑通测试才部署
[ ] 域名解析 + HTTPS 生效
[ ] 监控（错误/可用/慢查询）已接
[ ] 有回滚方案（保留上一个可用版本）

总结

新手首选 Vercel + Supabase，零运维最快上线。
Docker 解决环境一致性，适合自托管/复杂服务。
CI/CD：测试过才部署，机器比人可靠。
域名 + HTTPS 是上线底线。
监控让你比用户先发现问题。

下一篇，综合实战：把 1-13 篇串起来，从 0 到 1 做一个带用户系统的全栈应用。

练习：把你第 4-8 篇做的 Next.js + Supabase 小项目推到 GitHub，用 Vercel 一键部署，配好环境变量和域名，让它真正能在手机上打开。