如何在RedHat服务器上运行Docker化React微前端与Node后端镜像？

一、修复Httpd Dockerfile构建失败问题 #

你遇到的dist目录访问失败，核心原因是构建上下文路径不匹配。Docker构建时默认以Dockerfile所在目录为上下文根路径，你需要调整COPY指令的路径写法：

修正后的Dockerfile示例：

FROM httpd:2.4
# 用相对上下文路径指定dist目录（注意开头的./）
COPY ./app/myappfolder/micro-fronEnd1/dist/ /usr/local/apache2/htdocs/mfe1/
COPY ./app/myappfolder/micro-fronEnd2/dist/ /usr/local/apache2/htdocs/mfe2/
# 可选：添加React路由支持，解决刷新404问题
RUN echo "RewriteEngine On\nRewriteCond %{REQUEST_FILENAME} !-f\nRewriteCond %{REQUEST_FILENAME} !-d\nRewriteRule ^mfe1/(.*)$ /mfe1/index.html [L]\nRewriteRule ^mfe2/(.*)$ /mfe2/index.html [L]" >> /usr/local/apache2/conf/httpd.conf

另外补充：React项目执行npm run build后，dist目录下必然存在index.html，这是单页应用的入口文件，你可以直接去服务器的micro-fronEnd1/dist目录下确认。

二、React微前端的替代部署方案 #

如果不想用httpd，以下两种方案更常用：

1. Nginx镜像（生产环境推荐） #

Nginx对前端路由的支持更灵活，配置也更简洁，Dockerfile示例：

FROM nginx:alpine
# 复制两个微前端的dist到Nginx静态目录的子文件夹
COPY ./app/myappfolder/micro-fronEnd1/dist/ /usr/share/nginx/html/mfe1/
COPY ./app/myappfolder/micro-fronEnd2/dist/ /usr/share/nginx/html/mfe2/
# 复制自定义Nginx配置文件
COPY nginx.conf /etc/nginx/conf.d/default.conf

对应的nginx.conf配置示例：

server {
    listen 80;
    server_name localhost;

    # 微前端1的路由配置
    location /mfe1 {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /mfe1/index.html;
    }

    # 微前端2的路由配置
    location /mfe2 {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /mfe2/index.html;
    }
}

2. Node.js + serve工具（快速测试用） #

用Node.js镜像配合serve包托管静态文件，适合临时验证：

FROM node:18-alpine
# 全局安装serve工具
RUN npm install -g serve
# 复制微前端dist文件到容器目录
COPY ./app/myappfolder/micro-fronEnd1/dist/ /app/mfe1/
COPY ./app/myappfolder/micro-fronEnd2/dist/ /app/mfe2/
# 启动服务，指定根目录和端口
CMD ["serve", "-s", "/app", "-l", "3000"]

三、Linux服务器上运行全量组件流程 #

1. 构建所有镜像：进入每个组件的Dockerfile所在目录，执行构建命令：

   # 构建微前端1镜像
   docker build -t mfe1-frontend .
   # 构建微前端2镜像
   docker build -t mfe2-frontend .
   # 构建Node后端镜像
   docker build -t node-backend ./path/to/backend
   

2. 创建自定义Docker网络：让容器之间可以互相访问：

   docker network create my-app-net
   

3. 启动所有容器：
   • 启动后端容器：

     docker run -d --name backend --network my-app-net -p 3001:3001 node-backend
     

   • 启动微前端1容器（以Nginx为例）：

     docker run -d --name mfe1 --network my-app-net -p 8080:80 mfe1-frontend
     

   • 启动微前端2容器：

     docker run -d --name mfe2 --network my-app-net -p 8081:80 mfe2-frontend
     

4. 验证访问：在浏览器访问http://服务器IP:8080/mfe1、http://服务器IP:8081/mfe2，以及后端接口http://服务器IP:3001/xxx

内容的提问来源于stack exchange，提问作者ulrich Attiogbe