基于Docker部署的React应用，如何在Azure Web App容器暴露3000端口？

我来帮你搞定这个端口不生效的问题！核心原因就是Azure Web App for Containers默认只对外暴露80和443端口，就算你设置了WEBSITES_PORT=3000，如果容器内部配置没跟上或者端口映射逻辑不对，流量还是传不到你的React应用上。下面分两种场景给你针对性解决方案：

方案一：用Nginx托管静态文件（生产环境首选） #

React是单页应用，打包后是纯静态文件，用Nginx托管比Node的开发服务器更高效稳定，还能直接适配Azure的默认80端口，不用额外折腾端口设置：

1. 修改Dockerfile为多阶段构建：

   # 第一阶段：构建React应用
   FROM node:18-alpine AS build-stage
   WORKDIR /app
   COPY package*.json ./
   RUN npm ci --only=production
   COPY . .
   RUN npm run build
   
   # 第二阶段：用Nginx托管静态文件
   FROM nginx:alpine AS production-stage
   # 把构建好的静态文件复制到Nginx默认托管目录
   COPY --from=build-stage /app/build /usr/share/nginx/html
   # 替换Nginx配置，解决React SPA路由刷新404问题
   COPY nginx.conf /etc/nginx/conf.d/default.conf
   # 暴露80端口，和Azure默认端口匹配
   EXPOSE 80
   CMD ["nginx", "-g", "daemon off;"]
   

2. 添加Nginx配置文件（nginx.conf），放在项目根目录：

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

3. 重新构建镜像并推送到你的镜像仓库（比如Azure Container Registry），然后更新Web App的镜像来源即可。这种方式不需要设置WEBSITES_PORT，Azure会自动把80端口的流量转发到容器的80端口。

方案二：继续用Node.js运行（仅适合开发/测试） #

如果你非要用Node的react-scripts start运行应用，必须搞定两个关键配置：

1. 让应用监听0.0.0.0：React开发服务器默认只监听localhost，容器外部（包括Azure的反向代理）访问不到，所以要修改package.json的启动命令：

   "scripts": {
       "start": "react-scripts start --host 0.0.0.0"
   }
   

2. 配套配置Dockerfile和Azure应用设置：

   • Dockerfile里明确暴露3000端口：EXPOSE 3000
   • 在Azure Portal的应用服务中，进入配置 > 应用设置，添加键值对WEBSITES_PORT=3000
   • 保存设置后一定要重启应用服务，否则新配置不会生效

验证排查小技巧 #

如果还是不行，可以按下面的步骤排查：

• 用Azure Portal的开发工具 > SSH进入容器，运行curl localhost:3000（或80端口，看你用的方案），确认容器内部能正常访问应用
• 查看Azure应用服务的日志流，排查有没有端口映射相关的错误信息
• 确认你的镜像已经正确推送到仓库，Web App拉取的是最新版本的镜像

内容的提问来源于stack exchange，提问作者Dave Voyles