修复Docker化React Native Web应用部署Azure App Service的异常问题

一、修复本地Docker构建的react-scripts: not found错误 #

这个问题大多是镜像构建时依赖安装不完整或缓存冲突导致的，按以下步骤排查：

1. 修正Dockerfile的依赖安装逻辑 #

确保你的Dockerfile采用多阶段构建，完整安装所有依赖（包括dev依赖，react-scripts属于构建必需的dev依赖）。示例Dockerfile：

# 构建阶段
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
# 用npm ci保证依赖版本完全匹配锁文件
RUN npm ci
COPY . .
# 生成生产环境静态包
RUN npm run build

# 运行阶段（用nginx托管静态文件）
FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
# 替换nginx配置适配Azure环境
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

注意：不要用npm install --only=production安装依赖，会跳过react-scripts这类dev依赖。

2. 清理Docker缓存后重新构建 #

执行命令清理本地缓存，避免旧缓存干扰：

docker system prune -a
docker build -t dwl_frontend .

3. 检查.gitignore配置 #

确保没把package-lock.json/yarn.lock或node_modules外的必要文件加入忽略列表，锁文件必须随代码一起复制到镜像中，保证依赖安装的一致性。

二、修复Azure App Service上的开发模式/localhost依赖问题 #

日志显示应用以开发模式启动且依赖localhost，需调整为生产模式适配Azure环境：

1. 确保Dockerfile生成生产版本 #

不要直接在镜像中启动开发服务器（比如CMD ["npm", "start"]），必须用多阶段构建生成静态文件，通过nginx托管——这才是生产环境的正确运行方式。

2. 设置Azure环境变量 #

在Azure App Service的「配置」-「应用程序设置」中添加：

• NODE_ENV=production：强制应用以生产模式运行
• 如果项目依赖本地API地址，替换为Azure上的API服务地址，比如REACT_APP_API_URL=https://your-api-service.azurewebsites.net

3. 配置nginx适配Azure #

创建nginx.conf文件，处理React路由刷新问题并监听80端口（Azure默认暴露端口）：

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    # 处理React单页应用路由刷新404问题
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源设置长期缓存
    location ~* \.(js|css|png|jpg|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

4. 确认Azure部署配置 #

在Azure部署中心选择正确的容器注册表（比如Azure Container Registry），部署完成后查看「日志流」，确认是nginx启动而非开发服务器。

三、验证流程 #

1. 本地重新构建镜像，确认无react-scripts: not found错误
2. 本地运行镜像：docker run -p 8080:80 dwl_frontend，访问http://localhost:8080确认生产模式正常运行
3. 推送镜像到Azure容器注册表，部署到App Service后检查日志和应用访问状态

内容的提问来源于stack exchange，提问作者mightycode Newton