手把手用 Docker Compose 部署一个全栈 Nuxt 3 博客

这篇文章记录了我部署 龙的中二幻想空间 的全过程，从项目结构到上线踩坑。

项目结构

这套博客是 monorepo 架构：

dragon-blog/
├── apps/
│   ├── web/        # Nuxt 3 (SSR 前端)
│   ├── admin/      # Vue 3 SPA (后台管理)
│   └── api/        # Hono (API 服务)
├── packages/
│   ├── types/      # 共享类型定义
│   ├── utils/      # 工具函数
│   └── i18n/       # 国际化
├── docker/
│   └── nginx/      # Nginx 配置
├── docker-compose.yml
└── public/images/  # 静态资源

为什么选这套技术栈

Nuxt 3 — SSR 对 SEO 友好，Vue 生态成熟
Hono — 轻量级 Node.js API 框架，比 Express 快
PostgreSQL — 稳定可靠，社区支持强
Docker Compose — 一套命令部署所有服务

Docker Compose 配置

核心是 5 个容器：web、admin、api、nginx、postgres。

version: "3.8"
services:
  postgres:
    image: postgres:16-alpine
    volumes:
      - dragon_postgres:/var/lib/postgresql/data
    environment:
      POSTGRES_DB: dragon_archive
      POSTGRES_USER: dragon
      POSTGRES_PASSWORD: ${DB_PASSWORD}

  api:
    build: ./apps/api
    depends_on:
      - postgres
    environment:
      DATABASE_URL: postgres://dragon:${DB_PASSWORD}@postgres:5432/dragon_archive
    volumes:
      - dragon_uploads:/app/uploads

  web:
    build: ./apps/web
    depends_on:
      - api
    environment:
      API_BASE_URL: http://api:3001

  admin:
    build: ./apps/admin
    depends_on:
      - api

  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./docker/nginx:/etc/nginx/conf.d
      - ./public:/var/www/public
      - dragon_uploads:/var/www/uploads
      - /etc/letsencrypt:/etc/letsencrypt:ro
    depends_on:
      - web
      - admin
      - api

踩坑记录

1. Nginx 反代跨域

前端走 jinlong.work，API 走 jinlong.work/api，后台走 houtai.jinlong.work。Nginx 统一反代解决跨域：

server {
    listen 443 ssl;
    server_name jinlong.work www.jinlong.work;

    location /api/ {
        proxy_pass http://api:3001/;
        proxy_set_header Host $host;
    }

    location / {
        proxy_pass http://web:3000;
    }
}

server {
    listen 443 ssl;
    server_name houtai.jinlong.work;

    location / {
        proxy_pass http://admin:8080;
    }
}

2. SSL 证书

三个子域名三张证书，用 Let’s Encrypt 单独签：

certbot certonly --standalone -d jinlong.work -d www.jinlong.work
certbot certonly --standalone -d houtai.jinlong.work

3. 图片存储

图片存在 Docker volume 里，Nginx 直接 serve public/images/ 目录。如果图片不更新，检查 nginx 缓存配置。

4. 重启 API 后商店数据不更新

这个博客的数据存在 cms-store.json 文件里，API 启动时读到内存。改了文件后必须重启容器：

docker compose restart api

总结

Docker Compose 部署的优点是可复现 — 换台服务器，git clone + docker compose up 就完事。

缺点是调试麻烦，日志要 docker logs 看，改配置要重启容器。但整体来说对于个人项目，这个方案够用了。

下一篇写 Live2D 接入踩的那些坑。