Docker新手如何将frontend、backend、database打包入单个Docker镜像构建full stack应用

注意：将前端、后端、数据库三个组件打包到同一个Docker镜像属于非生产最佳实践，仅建议用于本地快速测试、Demo演示场景，生产环境推荐拆分多镜像配合Docker Compose编排，降低耦合、便于独立扩缩容和升级。

1. 整理项目目录结构 #

首先把三类组件的代码统一放到同一个项目根目录下，参考结构如下：

fullstack-app/
├── frontend/          # 前端代码（React/Vue/原生前端均可）
├── backend/           # 后端代码（Node.js/Java/Python等后端项目源码）
├── mysql/             # 数据库初始化脚本（建表、导入初始数据的.sql文件）
├── supervisord.conf   # 多进程管理配置，用于同时启动三类服务
└── Dockerfile         # 镜像构建配置文件

2. 编写多进程管理配置 #

Docker单个镜像默认仅支持启动一个前台进程，因此需要引入supervisor来同时托管前端、后端、数据库三个进程，supervisord.conf参考配置如下：

[supervisord]
nodaemon=true
logfile=/var/log/supervisord.log
pidfile=/var/run/supervisord.pid

[program:mysql]
command=/usr/bin/mysqld_safe
autostart=true
autorestart=true
stdout_logfile=/var/log/mysql.log
stderr_logfile=/var/log/mysql.err.log

[program:backend]
command=cd /app/backend && npm start # 替换为你自己后端的实际启动命令
autostart=true
autorestart=true
stdout_logfile=/var/log/backend.log
stderr_logfile=/var/log/backend.err.log

[program:frontend]
command=nginx -g 'daemon off;' # 如果是开发环境直接启动前端服务替换为对应启动命令即可
autostart=true
autorestart=true
stdout_logfile=/var/log/frontend.log
stderr_logfile=/var/log/frontend.err.log

3. 编写Dockerfile #

以下为基于Debian系统的参考配置，可根据自己的技术栈调整依赖安装逻辑：

# 选Debian作为基础镜像，方便安装各类服务依赖
FROM debian:bookworm-slim

# 关闭交互提示，避免安装过程中断
ENV DEBIAN_FRONTEND=noninteractive

# 安装系统依赖：mysql、supervisor、nginx、你所用的后端运行时
RUN apt update && apt install -y \
    mysql-server \
    supervisor \
    nginx \
    nodejs \
    npm \
    && rm -rf /var/lib/apt/lists/*

# 新建工作目录
WORKDIR /app

# 复制前端代码，安装依赖并构建，将产物放到nginx托管目录
COPY frontend/ ./frontend/
RUN cd frontend && npm install && npm run build && cp -r dist/* /var/www/html/

# 复制后端代码，安装依赖
COPY backend/ ./backend/
RUN cd backend && npm install

# 复制数据库初始化脚本，配置mysql权限
COPY mysql/ /docker-entrypoint-initdb.d/
RUN mkdir -p /var/run/mysqld && chown -R mysql:mysql /var/lib/mysql /var/run/mysqld

# 复制supervisor配置
COPY supervisord.conf /etc/supervisor/conf.d/supervisord.conf

# 暴露需要的端口：前端80、后端3000、数据库3306，可按需调整
EXPOSE 80 3000 3306

# 启动命令，通过supervisor启动所有服务
CMD ["/usr/bin/supervisord", "-c", "/etc/supervisor/conf.d/supervisord.conf"]

提示：上述配置以Node.js技术栈为例，如果你使用其他技术栈（比如Python后端、Java后端），仅需要调整Dockerfile中的依赖安装步骤、对应服务的启动命令即可。

4. 构建并运行镜像 #

• 构建镜像命令：docker build -t fullstack-app:v1 .
• 运行容器命令：docker run -d -p 80:80 -p 3000:3000 -p 3306:3306 -v mysql-data:/var/lib/mysql fullstack-app:v1
  这里添加了-v mysql-data:/var/lib/mysql参数做数据卷挂载，避免容器删除后数据库数据丢失。

5. 验证服务可用性 #

• 本地访问http://localhost即可打开前端页面
• 前端调用后端接口直接请求http://localhost:3000即可
• 本地数据库客户端连接localhost:3306即可操作数据库

内容的提问来源于stack exchange，提问作者Usman Tariq