Docker化React应用部署至Azure App Service后启动失败排查

核心原因 #

本地运行正常是因为端口映射允许宿主机访问容器端口，但Azure App Service的健康检测是从内部网络直接访问容器的80端口，而默认Nginx配置可能仅监听localhost（127.0.0.1），导致外部无法连接。

修复步骤 #

1. 自定义Nginx配置文件 #

在项目根目录创建nginx.conf，确保Nginx监听所有网卡的80端口：

events {
    worker_connections 1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /usr/share/nginx/html;
        index index.html index.htm;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

2. 修改Dockerfile替换默认Nginx配置 #

更新Dockerfile，将自定义配置复制到Nginx的配置目录：

FROM node:14.17.0 as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./

RUN npm ci --silent
RUN npm install react-scripts -g --silent
COPY . .
RUN npm run build 

#prepare nginx
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
# 新增：复制自定义Nginx配置
COPY nginx.conf /etc/nginx/nginx.conf

#fire up nginx
EXPOSE 80
CMD ["nginx","-g","daemon off;"]

3. 验证容器监听状态（本地测试） #

重新构建镜像并运行后，进入容器执行以下命令，确认Nginx监听0.0.0.0:80：

docker exec -it <容器ID> sh
netstat -tulpn | grep nginx

输出应包含0.0.0.0:80，而非仅127.0.0.1:80。

4. 检查Azure容器日志 #

如果问题仍存在，在Azure门户进入应用服务→日志→容器日志，查看Nginx启动报错信息（比如配置文件语法错误、文件权限问题等）。

补充说明 #

Azure App Service的WEBSITES_PORT=80配置已经正确，无需额外修改端口映射参数——App Service内部会自动处理容器端口的路由，核心问题是容器内服务必须监听所有网卡（0.0.0.0）而非仅本地回环地址。

内容的提问来源于stack exchange，提问作者Nagaraj S Kharvi