如何解决React JS应用通过Docker部署至Azure的错误？

排查与修复方案 #

• 修正Azure端口配置
  你的生产镜像使用Nginx监听80端口，所以在Azure应用服务的配置 > 应用设置中，添加WEBSITES_PORT变量并设置值为80——3000是React开发服务器的端口，生产环境无需使用。

• 适配Azure环境的Nginx配置
  默认Nginx配置可能导致单页应用路由异常，需自定义配置：

  1. 在项目根目录创建nginx.conf文件，内容如下：

  server {
      listen 80;
      location / {
          root /usr/share/nginx/html;
          try_files $uri $uri/ /index.html;
      }
  }
  

  2. 修改Dockerfile，在production阶段添加配置复制命令：

  FROM node:14 as build-stage
  
  WORKDIR /frontend
  COPY package.json .
  RUN npm install --force
  COPY . .
  RUN npm run build
  
  FROM nginx:1.21-alpine as production-stage
  # 复制自定义Nginx配置
  COPY nginx.conf /etc/nginx/conf.d/default.conf
  COPY --from=build-stage /frontend/build /usr/share/nginx/html
  EXPOSE 80
  CMD ["nginx", "-g", "daemon off;"]
  

• 确保镜像推送完整
  重新构建并推送镜像到Azure容器注册表，执行以下命令：

  # 登录Azure容器注册表
  az acr login --name <你的ACR名称>
  # 标记镜像
  docker tag my-react-image:latest <你的ACR名称>.azurecr.io/my-react-image:latest
  # 推送镜像
  docker push <你的ACR名称>.azurecr.io/my-react-image:latest
  

  推送完成后，在Azure容器注册表中确认镜像存在且层级完整。

• 查看Azure实时日志定位问题
  进入Azure门户的应用服务页面，转到监控 > 日志流，查看实时运行日志，可直接获取端口冲突、文件权限、Nginx启动失败等具体错误信息。

内容的提问来源于stack exchange，提问作者vasudev pareek