如何修改现有Laravel Dockerfile实现同容器运行React UI脚手架

核心改动说明 #

你不需要额外运行Node服务，React代码在构建阶段编译为静态资源后，直接由容器内的Nginx提供访问即可，仅需要在原有Dockerfile基础上新增Node环境安装、前端代码复制编译两个环节的指令。

具体修改步骤 #

1. 新增Node.js编译环境依赖 #

在原有安装系统依赖的指令中，新增nodejs和npm包，修改后的指令如下：

# 原有指令基础上追加 nodejs npm
RUN apk --no-cache add nginx supervisor curl postgresql-dev libuv-dev openldap-dev ssmtp libxml2-dev nodejs npm

2. 新增前端代码复制、编译逻辑 #

情况A：React为独立前端项目

假设你的独立React代码存放在宿主项目根目录的frontend文件夹下，在复制Laravel源码的指令之后，新增以下内容：

# 复制React前端源码到镜像内
COPY frontend/. /var/www/frontend/
# 安装前端依赖并编译生产环境产物
RUN cd /var/www/frontend && npm install && npm run build
# 将编译后的静态资源移动到Laravel的public目录，由Nginx直接处理
RUN cp -r /var/www/frontend/dist/* /var/www/html/public/
# 若为React SPA应用，可将入口文件复制到Laravel视图目录，后续配置路由返回该视图即可适配history路由
RUN cp /var/www/frontend/dist/index.html /var/www/html/resources/views/react.blade.php
# 清理构建冗余文件，减小镜像体积
RUN rm -rf /var/www/frontend && npm cache clean --force && apk del nodejs npm

情况B：React已整合到Laravel项目（用官方Vite/Mix打包）

不需要单独复制前端代码，直接在Laravel根目录执行构建即可，新增指令如下：

RUN cd /var/www/html && npm install && npm run build
# 同样可以清理冗余
RUN npm cache clean --force && apk del nodejs npm

3. 可选：Nginx配置适配SPA路由 #

如果你的React是单页应用使用history模式路由，需要修改你的.deploy/nginx.conf，在对应location块内添加以下规则，保证路由刷新时不会404：

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

注意事项 #

• 镜像构建阶段完成React编译后即可删除Node.js、npm以及依赖缓存，可减少至少300M的镜像体积
• 无需在supervisord中新增Node进程，React编译产物为纯静态资源，直接由Nginx处理即可
• 如果你的前端构建需要特定Node版本，可以不用Alpine源的默认Node，改为通过多阶段构建的方式先在官方Node镜像中编译前端，再将产物复制到PHP镜像中，进一步减小最终镜像体积

内容的提问来源于stack exchange，提问作者Semih 406