React应用部署至Azure Service后启动失败求助

从日志和你的Dockerfile对比能直接定位核心问题：Azure App Service并未使用你自定义构建的Docker镜像，而是默认启动了官方Node.js运行时镜像（appsvc/node:18-lts）——这导致容器执行了npm start命令（而非你Dockerfile中定义的serve静态服务启动命令），但该官方镜像未安装项目依赖的react-scripts，最终引发启动失败。

具体修复步骤 #

1. 确认App Service部署配置指向自定义镜像 #

• 登录Azure门户进入你的App Service资源
• 左侧导航栏选择「部署中心」：
  • 若使用容器部署（Docker Hub/Azure容器注册表），检查是否正确选择了你的镜像名称、标签，且部署状态显示成功
  • 若使用代码部署（如GitHub Actions），核查部署脚本是否正确构建并推送了你的Docker镜像到指定仓库，且App Service已配置拉取该镜像

2. 修正Dockerfile（优化+避免潜在问题） #

你的Dockerfile逻辑可行，但可做分层优化并规避版本/路径问题：

# 对齐Azure日志中的Node版本，避免环境差异
FROM node:18-alpine

WORKDIR /usr/src/app

# 先拷贝依赖文件，利用Docker缓存加速构建
COPY package*.json ./
# 使用npm ci安装精确依赖版本，确保构建一致性
RUN npm ci

# 拷贝项目源码
COPY . .

# 构建生产版本
RUN npm run build

# 本地安装serve（替代全局安装，避免路径查找问题）
RUN npm install serve --save-dev

# 暴露端口
EXPOSE 8080

# 用npx启动serve，确保能正确找到本地依赖
CMD ["npx", "serve", "-s", "build", "-l", "8080"]

3. 检查App Service端口与启动命令配置 #

• 进入App Service「配置」→「常规设置」：
  • 确认「端口」设置为8080（和Dockerfile中EXPOSE的端口一致）
  • 清空「启动命令」字段：若此处填写了npm start，会覆盖Dockerfile中的CMD命令，必须留空让容器使用镜像内置的启动逻辑

4. 重新部署验证 #

• 重新触发部署（推送代码或手动拉取镜像）
• 查看Log Stream，确认启动命令为serve -s build -l 8080而非npm start
• 可通过Kudu工具（https://<你的App名称>.scm.azurewebsites.net）进入容器终端，执行netstat -tulpn验证8080端口是否被正常监听

内容的提问来源于stack exchange，提问作者Руслан Василев