将React应用从GitHub部署到Azure Web App时遇启动错误求助

问题描述 #

使用Create React App创建基础React应用并推送到GitHub仓库，部署至Azure Web App后显示“:( Application error”，无法正常访问。已完成操作：

• 关联GitHub仓库至Azure Web App部署中心，选择main分支
• 日志报错：

  2023-10-05T21:47:56.920Z ERROR - Container frontenddemo_0_3401dbf7 for site frontenddemo has exited, failing site start
  2023-10-05T21:47:56.929Z ERROR - Container frontenddemo_0_3401dbf7 didn't respond to HTTP pings on port: 8080, failing site start. See container logs for debugging.

• React应用文件结构：
  
• 现有GitHub Actions配置：

name: NodeJS with Webpack

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:
  build:
    runs-on: [ self-hosted ]

    strategy:
      matrix:
        node-version: [14.x, 16.x, 18.x]

    steps:
    - uses: actions/checkout@v3

    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}

    - name: Build
      run: |
        npm install
        npx webpack

核心问题 #

1. 构建流程错误：Create React App默认用npm run build生成build静态目录，你使用的npx webpack无自定义配置，无法生成符合要求的部署产物。
2. 无部署步骤：现有GitHub Actions仅完成构建，未将产物推送到Azure Web App。
3. 端口与启动逻辑缺失：Azure检测8080端口，但你的配置未指定服务启动命令，容器无运行中的服务响应检测。
4. 冗余配置：自托管runner环境可能存在未知问题，多Node版本测试对单应用部署无意义。

修复方案 #

1. 修正GitHub Actions配置 #

替换原有.yml文件，确保完整构建并部署：

name: Deploy React App to Azure Web App

on:
  push:
    branches: [ "main" ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18.x' # 选择符合Create React App要求的Node版本
          cache: 'npm'

      - name: Install dependencies and build
        run: |
          npm install
          npm run build # 用官方命令生成build静态目录

      - name: Deploy to Azure Web App
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'frontenddemo' # 替换为你的Azure Web App名称
          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
          package: ./build # 指定部署产物目录

2. 配置Azure Web App启动命令 #

进入Azure Portal的Web App页面：

• 打开配置 -> 常规设置
• 在启动命令中填入：npx serve -s build -l 8080（用serve服务启动build目录，监听8080端口）
• 保存配置

3. 配置GitHub Secrets #

• 在Azure Web App概述页点击获取发布配置文件，下载文件
• 打开GitHub仓库的Settings -> Secrets and variables -> Actions
• 创建名为AZURE_WEBAPP_PUBLISH_PROFILE的Secret，将下载的配置文件内容粘贴进去

4. 本地验证构建 #

先在本地执行npm run build，确认生成build目录；再运行npx serve -s build -l 8080，访问http://localhost:8080确认应用正常运行，确保构建产物无问题。

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