前言

前后端分離項目（如 React + Python FastAPI）在生產(chǎn)環(huán)境往往還依賴 Nginx、MySQL 等，若逐個起容器、配網(wǎng)絡(luò)和卷，容易出錯且難復(fù)現(xiàn)。用 Docker Compose 把前端、后端、Nginx、數(shù)據(jù)庫寫進一個 docker-compose.yml，一條命令即可拉起整套環(huán)境，便于本機聯(lián)調(diào)與服務(wù)器部署。

本文只講 Compose 的編排思路和關(guān)鍵配置，不貼完整可運行 Demo。

項目結(jié)構(gòu)建議

app/
├── docker-compose.yml
├── nginx/
│   └── default.conf
├── frontend/
│   ├── Dockerfile
│   └── build/          # 或由 CI 構(gòu)建后放入
├── backend/
│   ├── Dockerfile
│   └── main.py
└── mysql/
    └── .gitkeep        # 占位，數(shù)據(jù)卷掛載用

• Nginx 只做反向代理和靜態(tài)資源，配置放在 nginx/default.conf。
• 前端可以「先本地/CI 構(gòu)建再 COPY 進鏡像」，也可以「在鏡像里 npm build」；后者鏡像更大、構(gòu)建更慢，適合快速驗證。
• 后端鏡像內(nèi)只放代碼和依賴，數(shù)據(jù)庫等通過環(huán)境變量注入。
• MySQL 數(shù)據(jù)持久化到宿主機目錄或命名卷，避免容器刪除后丟數(shù)據(jù)。

docker-compose.yml 核心示例

version: "3.9"

services:
  nginx:
    image: nginx:stable
    ports:
      - "80:80"
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
      - ./frontend/build:/usr/share/nginx/html:ro
    depends_on:
      - backend

  backend:
    build: ./backend
    environment:
      - DB_HOST=mysql
      - DB_PORT=3306
      - DB_USER=app
      - DB_PASSWORD=${DB_PASSWORD}
      - DB_NAME=appdb
    depends_on:
      mysql:
        condition: service_healthy

  mysql:
    image: mysql:8
    environment:
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
      MYSQL_DATABASE: appdb
      MYSQL_USER: app
      MYSQL_PASSWORD: ${DB_PASSWORD}
    volumes:
      - mysql_data:/var/lib/mysql
    healthcheck:
      test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
      interval: 10s
      timeout: 5s
      retries: 5

volumes:
  mysql_data:

要點：

• nginx：掛載自定義配置和前端靜態(tài)目錄；depends_on: backend 保證啟動順序，但不保證后端已就緒，若需要可給 backend 做 healthcheck 再依賴。
• backend：build: ./backend 使用 backend 目錄下的 Dockerfile 構(gòu)建；環(huán)境變量里 DB_HOST 寫服務(wù)名 mysql，Compose 會解析為 MySQL 容器 IP；depends_on.mysql.condition: service_healthy 表示等 MySQL 健康后再起 backend，避免啟動時連不上庫。
• mysql：用 healthcheck 讓 Compose 判斷「已就緒」；敏感信息用 ${DB_PASSWORD} 等從 .env 或環(huán)境傳入，不要寫死在 yml 里。
• volumes：mysql_data 命名卷由 Docker 管理，數(shù)據(jù)持久化；也可改為 ./mysql:/var/lib/mysql 綁定宿主機目錄。

Nginx 配置要點

nginx/default.conf 中需包含：靜態(tài)資源 root、SPA 的 try_files、以及 /api 反向代理到 backend 服務(wù)名：

server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
    location /api {
        proxy_pass http://backend:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

這里 proxy_pass http://backend:8000 中的 backend 是 Compose 里后端服務(wù)的名字，端口為容器內(nèi)端口（如 8000）。若后端以 /api 為前綴，保持 location /api 與后端一致；若后端根路徑是 /，可寫 location /api/ { proxy_pass http://backend:8000/; } 做路徑剝離。

環(huán)境變量與 .env

在項目根目錄建 .env（不要提交到 Git），例如：

DB_PASSWORD=your_app_db_password
MYSQL_ROOT_PASSWORD=your_root_password

在 docker-compose.yml 里用 ${DB_PASSWORD} 引用，Compose 會自動讀取 .env。生產(chǎn)環(huán)境也可在宿主機設(shè)置環(huán)境變量或使用 CI 注入。

一鍵啟動與常用命令

# 構(gòu)建并后臺啟動
docker compose up -d --build

# 查看日志
docker compose logs -f backend

# 停止并刪除容器（卷保留）
docker compose down

# 停止并刪除容器與命名卷
docker compose down -v

首次部署或依賴變更后建議 docker compose up -d --build，平時只改代碼可只重建后端：docker compose up -d --build backend。

前端構(gòu)建方式選擇

方式一：宿主機/CI 先構(gòu)建，Compose 只掛載 build 目錄

• 宿主機執(zhí)行 cd frontend && npm run build，docker-compose.yml 中 nginx 掛載 ./frontend/build。
• 優(yōu)點：鏡像小、構(gòu)建快；缺點：需保證宿主機有 Node 環(huán)境且 build 目錄存在。

方式二：前端也做成鏡像，在鏡像內(nèi) npm build

• frontend/Dockerfile 多階段：先 node 鏡像 npm install && npm run build，再 nginx 鏡像只 COPY build 結(jié)果。
• Compose 中 nginx 改用該前端鏡像，或仍用 nginx 鏡像但靜態(tài)資源從「前端鏡像」的某路徑掛載（需多一步 volume from）。
• 更常見的做法是：前端鏡像產(chǎn)出靜態(tài)文件，Compose 里 nginx 的 build 階段 COPY 前端構(gòu)建產(chǎn)物，或使用多服務(wù)配合 volume。簡單起見，很多項目采用方式一 + 僅 backend 和 mysql 用 Compose 構(gòu)建。

按團隊習(xí)慣選擇即可：要「一條命令包含前端構(gòu)建」就做前端鏡像；要「前端單獨 CI 構(gòu)建、Compose 只負責(zé)運行」就掛載 build 目錄。

總結(jié)

• Compose 把 nginx、backend、mysql 放同一網(wǎng)絡(luò)，nginx 反向代理到 backend，靜態(tài)資源掛載或從前端鏡像提供，mysql 用健康檢查 + depends_on 保證啟動順序。
• 敏感信息用 .env 或環(huán)境變量，數(shù)據(jù)持久化用命名卷或綁定目錄。
• 一鍵啟動用 docker compose up -d --build，日常排錯用 logs、down。

這樣即可實現(xiàn)前后端分離項目的一站式 Docker 部署，便于遷移與復(fù)現(xiàn)環(huán)境。

到此這篇關(guān)于Docker Compose實現(xiàn)一鍵部署前后端分離項目的完整指南的文章就介紹到這了,更多相關(guān)Docker Compose部署項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！