网罗开发小红书、快手、视频号同名大家好我是展菲目前在上市企业从事人工智能项目研发管理工作平时热衷于分享各种编程领域的软硬技能知识以及前沿技术包括iOS、前端、Harmony OS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。图书作者《ESP32-C3 物联网工程开发实战》图书作者《SwiftUI 入门进阶与实战》超级个体COC上海社区主理人特约讲师大学讲师谷歌亚马逊分享嘉宾科技博主华为HDE/HDG我的博客内容涵盖广泛主要分享技术教程、Bug解决方案、开发工具使用、前沿科技资讯、产品评测与使用体验。我特别关注云服务产品评测、AI 产品对比、开发板性能测试以及技术报告同时也会提供产品优缺点分析、横向对比并分享技术沙龙与行业大会的参会体验。我的目标是为读者提供有深度、有实用价值的技术洞察与分析。展菲您的前沿技术领航员 大家好我是展菲 全网搜索“展菲”即可纵览我在各大平台的知识足迹。 公众号“Swift社区”每周定时推送干货满满的技术长文从新兴框架的剖析到运维实战的复盘助您技术进阶之路畅通无阻。 微信端添加好友“fzhanfei”与我直接交流不管是项目瓶颈的求助还是行业趋势的探讨随时畅所欲言。 最新动态2025 年 3 月 17 日快来加入技术社区一起挖掘技术的无限潜能携手迈向数字化新征程文章目录前言项目结构建议docker-compose.yml 核心示例Nginx 配置要点环境变量与 .env一键启动与常用命令前端构建方式选择总结前言前后端分离项目如 React Python FastAPI在生产环境往往还依赖 Nginx、MySQL 等若逐个起容器、配网络和卷容易出错且难复现。用 Docker Compose 把前端、后端、Nginx、数据库写进一个docker-compose.yml一条命令即可拉起整套环境便于本机联调与服务器部署。本文只讲 Compose 的编排思路和关键配置不贴完整可运行 Demo。项目结构建议app/ ├── docker-compose.yml ├── nginx/ │ └── default.conf ├── frontend/ │ ├── Dockerfile │ └── build/ # 或由 CI 构建后放入 ├── backend/ │ ├── Dockerfile │ └── main.py └── mysql/ └── .gitkeep # 占位数据卷挂载用Nginx 只做反向代理和静态资源配置放在nginx/default.conf。前端可以「先本地/CI 构建再 COPY 进镜像」也可以「在镜像里 npm build」后者镜像更大、构建更慢适合快速验证。后端镜像内只放代码和依赖数据库等通过环境变量注入。MySQL 数据持久化到宿主机目录或命名卷避免容器删除后丢数据。docker-compose.yml 核心示例version:3.9services:nginx:image:nginx:stableports:-80:80volumes:-./nginx/default.conf:/etc/nginx/conf.d/default.conf:ro-./frontend/build:/usr/share/nginx/html:rodepends_on:-backendbackend:build:./backendenvironment:-DB_HOSTmysql-DB_PORT3306-DB_USERapp-DB_PASSWORD${DB_PASSWORD}-DB_NAMEappdbdepends_on:mysql:condition:service_healthymysql:image:mysql:8environment:MYSQL_ROOT_PASSWORD:${MYSQL_ROOT_PASSWORD}MYSQL_DATABASE:appdbMYSQL_USER:appMYSQL_PASSWORD:${DB_PASSWORD}volumes:-mysql_data:/var/lib/mysqlhealthcheck:test:[CMD,mysqladmin,ping,-h,localhost]interval:10stimeout:5sretries:5volumes:mysql_data:要点nginx挂载自定义配置和前端静态目录depends_on: backend保证启动顺序但不保证后端已就绪若需要可给 backend 做 healthcheck 再依赖。backendbuild: ./backend使用 backend 目录下的 Dockerfile 构建环境变量里 DB_HOST 写服务名mysqlCompose 会解析为 MySQL 容器 IPdepends_on.mysql.condition: service_healthy表示等 MySQL 健康后再起 backend避免启动时连不上库。mysql用healthcheck让 Compose 判断「已就绪」敏感信息用${DB_PASSWORD}等从.env或环境传入不要写死在 yml 里。volumesmysql_data命名卷由 Docker 管理数据持久化也可改为./mysql:/var/lib/mysql绑定宿主机目录。Nginx 配置要点nginx/default.conf中需包含静态资源 root、SPA 的 try_files、以及 /api 反向代理到 backend 服务名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 里后端服务的名字端口为容器内端口如 8000。若后端以/api为前缀保持location /api与后端一致若后端根路径是/可写location /api/ { proxy_pass http://backend:8000/; }做路径剥离。环境变量与 .env在项目根目录建.env不要提交到 Git例如DB_PASSWORDyour_app_db_password MYSQL_ROOT_PASSWORDyour_root_password在docker-compose.yml里用${DB_PASSWORD}引用Compose 会自动读取.env。生产环境也可在宿主机设置环境变量或使用 CI 注入。一键启动与常用命令# 构建并后台启动dockercompose up -d --build# 查看日志dockercompose logs -f backend# 停止并删除容器卷保留dockercompose down# 停止并删除容器与命名卷dockercompose down -v首次部署或依赖变更后建议docker compose up -d --build平时只改代码可只重建后端docker compose up -d --build backend。前端构建方式选择方式一宿主机/CI 先构建Compose 只挂载 build 目录宿主机执行cd frontend npm run builddocker-compose.yml中 nginx 挂载./frontend/build。优点镜像小、构建快缺点需保证宿主机有 Node 环境且 build 目录存在。方式二前端也做成镜像在镜像内 npm buildfrontend/Dockerfile 多阶段先 node 镜像 npm install npm run build再 nginx 镜像只 COPY build 结果。Compose 中 nginx 改用该前端镜像或仍用 nginx 镜像但静态资源从「前端镜像」的某路径挂载需多一步 volume from。更常见的做法是前端镜像产出静态文件Compose 里 nginx 的 build 阶段 COPY 前端构建产物或使用多服务配合 volume。简单起见很多项目采用方式一 仅 backend 和 mysql 用 Compose 构建。按团队习惯选择即可要「一条命令包含前端构建」就做前端镜像要「前端单独 CI 构建、Compose 只负责运行」就挂载 build 目录。总结Compose 把 nginx、backend、mysql 放同一网络nginx 反向代理到 backend静态资源挂载或从前端镜像提供mysql 用健康检查 depends_on 保证启动顺序。敏感信息用.env或环境变量数据持久化用命名卷或绑定目录。一键启动用docker compose up -d --build日常排错用logs、down。这样即可实现前后端分离项目的一站式 Docker 部署便于迁移与复现环境。