reactjs - React应用程序在本地运行，但部署到Azure Web App时不起作用

Question

我暂时被遇到的问题困住了。

我有一个 React 应用程序，其中有 Parcel 作为 bundler 。它在我的本地环境中运行良好且流畅，但它无法在我的 Azure Web App 上运行，尽管所有构建和部署过程都成功运行(应用程序版本正在更新)。

这是我的 package.json:

{
  "name": "myapp",
  "version": "0.1.3",
  "private": true,
  "scripts": {
    "start": "npx parcel index.html --port=8081",
    "build": "npx parcel build index.html",
    "start:prod": "serve -s dist"
  },
  "dependencies": {
    "@parcel/config-default": "^2.8.3",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "5.2.0",
    "serve": "^14.2.0",
    "styled-components": "^5.3.9"
  },
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "browserslist": "4.19.3",
    "parcel": "^2.8.3",
    "parcel-reporter-static-files-copy": "^1.3.4",
    "process": "^0.11.10"
  }
}

这是我的 Github Actions 工作流程文件:

# 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 - wmyApp-eu-linux-webapp01

on:
  push:
    branches:
      - main

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: Cache node modules
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Reinstall dependencies
        run: |
          rm -rf node_modules
          npm ci

      - 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: .

  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: 'wmyApp'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_C9DBEFD5302A4647A548B45C88AEE9BE }}
          package: .

当我进入 Azure Web App 页面时，出现错误:

:( 应用程序错误如果您是应用程序管理员，则可以访问诊断资源。

当我进入 Kudu 控制台查看 default_docker 日志的运行情况时，我发现以下错误:

2023-04-27T18:21:34.721656533Z 错误:找不到模块“./cli”2023-04-27T18:21:34.721660933Z 需要堆栈:2023-04-27T18:21:34.721664933Z -/home/site/wwwroot/node_modules/.bin/parcel2023-04-27T18:21:34.721669133Z 在 Function.Module._resolveFilename (内部/模块/cjs/loader.js:902:15)2023-04-27T18:21:34.721673733Z 在 Function.Module._load (内部/模块/cjs/loader.js:746:27)2023-04-27T18:21:34.721677833Z 在 Module.require (内部/模块/cjs/loader.js:974:19)2023-04-27T18:21:34.721681934Z 在要求(内部/模块/cjs/helpers.js:101:18)2023-04-27T18:21:34.721686034Z 在对象。 (/home/site/wwwroot/node_modules/.bin/parcel:4:1)2023-04-27T18:21:34.721700234Z在Module._compile(内部/模块/cjs/loader.js:1085:14)2023-04-27T18:21:34.721705734Z在Object.Module._extensions..js(内部/模块/cjs/loader.js:1114:10)2023-04-27T18:21:34.721709834Z 在 Module.load (内部/模块/cjs/loader.js:950:32)2023-04-27T18:21:34.721713834Z 在 Function.Module._load (内部/模块/cjs/loader.js:790:12)2023-04-27T18:21:34.721717934Z 在 Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:75:12) {2023-04-27T18:21:34.721721935Z 代码: 'MODULE_NOT_FOUND',2023-04-27T18:21:34.721726035Z requireStack:['/home/site/wwwroot/node_modules/.bin/parcel']2023-04-27T18:21:34.721730135Z }

我确实清理了/wwwroot 文件夹并重新上传，但没有解决问题。

提前致谢!

我确实清理了/wwwroot 文件夹并重新上传，但没有解决问题。

Answer 1

根据问题描述，包裹模块似乎存在问题。错误消息表明找不到该模块。这可能是由于多种原因造成的，例如模块未安装或未包含在部署包中。

强调一下，在您的 GitHub Actions 工作流程文件中，我看到您正在使用 npm ci 命令来安装依赖项。此命令将安装 package-lock.json 文件中指定的依赖项的确切版本。但是，您似乎正在使用 Parcel 模块作为开发依赖项，这意味着它可能不包含在 package-lock.json 文件中。

为了确保parcel模块包含在部署包中，您可以尝试使用npm install命令而不是npm ci。此命令安装依赖项的最新兼容版本，其中应包括 Parcel 模块。

这是修改后的 npm install 命令:

npm install --product=false

此命令安装生产和开发依赖项，其中应包括 Parcel 模块。

您还可以尝试将 Parcel 模块添加到 package.json 文件的依赖项部分，而不是 devDependencies 部分。这可确保该模块包含在部署包中。

      - name: Reinstall dependencies
    run: |
      rm -rf node_modules
      npm ci --production=false

进行这些更改后，您可以提交并推送更改以再次触发 GitHub Actions 工作流程并查看问题是否得到解决。