如何使用Docker简化React+NodeJS全栈项目本地部署并解决环境不一致问题

一、标准配置操作流程 #

整个配置不需要修改现有业务代码，只需要在项目根目录新增几个配置文件即可：

• 新增 .dockerignore 文件：排除 node_modules、.git、本地临时日志、.env 等不需要传入容器的文件，避免镜像体积过大，同时防止本地依赖覆盖容器内的依赖配置。
• 编写前端 Dockerfile：开发环境可以选择 node 基础镜像，配置本地目录挂载实现热更新；生产环境分两步构建，先用 node 镜像打包 React 产物，再用 nginx 镜像托管静态资源并配置接口反向代理。
• 编写后端 Dockerfile：选择和项目匹配的 node 版本 alpine 镜像，优先拷贝 package.json 和 package-lock.json 安装依赖，再拷贝其余源码，暴露后端服务端口，配置启动命令。
• 编写 docker-compose.yml 编排所有服务：
  • 直接引用官方 MongoDB 镜像，配置数据卷挂载到本地目录，避免容器删除后数据丢失，同时可通过环境变量配置默认库、账号密码等参数
  • 配置三个服务（前端、后端、数据库）的网络连通、端口映射、启动依赖顺序（后端晚于 MongoDB 启动）
  • 本地开发场景下配置本地代码目录挂载到容器对应路径，实现本地修改代码实时同步到容器，不用重新构建镜像
• 测试可用性：项目根目录执行 docker-compose up 即可一键启动全套服务，无需本地安装 MongoDB、适配 Node 版本。

二、是否需要将后端和数据库迁移到容器 #

不需要迁移代码，代码依旧保存在本地开发目录：

• 后端代码仅通过挂载的方式在容器中运行，本地修改的代码会实时同步到容器，配合热更新插件可以直接生效，不需要改代码提交到镜像里。
• 数据库建议用容器运行，数据持久化到本地磁盘，既可以保证所有团队成员使用的 MongoDB 版本完全一致，又不会出现容器删除数据丢失的问题。
• 只有需要打包生产部署的时候，才会把前后端代码构建到镜像中上传到镜像仓库，本地开发场景不需要。

三、容器化对前后端的收益 #

不存在仅对前端有用的情况，前后端开发都能提升效率：

• 后端开发侧：不需要本地安装对应版本的 Node、MongoDB 及相关工具，不用解决本地数据库启动失败、权限报错、版本不兼容等问题；切换项目时不用来回切换 Node 版本、修改数据库配置；需要测试不同 Node、MongoDB 版本兼容性时，仅需要修改镜像标签重新启动容器即可，完全不影响本地系统环境。
• 前端开发侧：不需要单独搭建本地后端环境、配置接口地址、安装数据库，拉取代码后执行一行命令即可获得完整可调用的后端服务，无需找后端对齐环境配置。
• 团队协作层面：所有成员的运行环境完全一致，不会出现「本地运行正常，上线/其他人跑就报错」的问题，新人入职不需要花数小时搭建环境，拉取代码后执行一条命令即可跑通全项目。

内容的提问来源于stack exchange，提问作者Sap Green