感谢@Edison Garcia的清晰步骤。

检查以下步骤以使用GitHub操作将基本React pp部署到Azure Linux应用程序服务。

我遵循了Edison Garcia提到的相同步骤来创建一个React应用程序。

npx create-react-app reactoct
cd reactoct

• 运行npm run build命令。将在应用程序的根目录中创建Build文件夹。而不是将所有文件推送到Azure，您需要在路径中使用build文件夹。

• 打开.gitignore文件并删除下面的行，以将build文件夹包含在GitHub Repo中。

# production
/build

• 创建一个新的GitHub仓库。将本地代码推送到GitHub的命令将在新的GitHub Repo页面中提供。

git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/YourGitHubName/MyApp.git
git push -u origin main

• 由于我们已经在.gitignore文件中做了更改以包含build文件夹，因此我们还需要添加该文件夹。运行以下命令。

git add .
git commit -m "first commit"
git push -u origin main

• 现在您可以检查build文件夹是否包含在GitHub Repo中。

• 创建一个新的Azure Linux App Service。
• 当您从部署中心选择GitRepo时，将在GitHub Repo（默认模板）中创建.git/workflows下的默认.yml文件。
• 我们需要将默认的yml模板路径从.更改为build/。

- name: Upload artifact for deployment job
    uses: actions/upload-artifact@v2
    with:
      name: node-app
      path: build/

• 在Git Hub Repo中取消正在运行的工作流，将yml文件路径编辑为build/ =>保存并提交更改，
• 在Azure应用服务中，在Configuration => General Settings => Startup Command中添加pm2 serve /home/site/wwwroot --spa --no-daemon命令。
• 同时启用Basic Auth Publishing Credentials选项。

• 我的.yml文件：*

# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# More GitHub Actions for Azure: https://github.com/Azure/actions

name: Build and deploy Node.js app to Azure Web App - React11Oct

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: '18.x'

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: build/

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: node-app

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'React11Oct'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_E194E92742C24133961AB59ECD48DA31 }}
          package: .

• 现在重新运行失败的作业。

• 部署应用输出：*