NextJS部署Azure WebApp报错：无法找到模块../server/require-hook

问题描述 #

将NextJS应用部署到Azure WebApp时，GitHub Actions构建与部署流程显示成功，但访问URL出现错误，日志流提示无法找到模块../server/require-hook。本地使用相同npm版本执行npm start可正常构建运行，应用位于根目录下的frontend文件夹中，怀疑路径配置引发问题。

构建部署工作流 #

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

on:
  push:
    branches:
      - master
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

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

      - name: npm install, build, and test
        run: |
          npm install --legacy-peer-deps
          npm run build --if-present
        working-directory: frontend

      - name: Zip artifact for deployment
        run: zip release.zip ./* -r

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v3
        with:
          name: node-app
          path: release.zip

  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@v3
        with:
          name: node-app

      - name: Unzip artifact for deployment
        run: unzip release.zip
      
      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'mm'
          slot-name: 'Production'
          package: frontend
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_******************************* }}

应用日志错误 #

2024-01-26T14:19:35.427345342Z npm start
2024-01-26T14:19:43.527982622Z npm info using npm@9.6.4
2024-01-26T14:19:43.528330329Z npm info using node@v20.9.0
2024-01-26T14:19:43.728260894Z
2024-01-26T14:19:43.728298295Z > mm@0.1.0 start
2024-01-26T14:19:43.728303195Z > next start
2024-01-26T14:19:43.728306395Z
2024-01-26T14:19:44.180512023Z node:internal/modules/cjs/loader:1051
2024-01-26T14:19:44.180579624Z   throw err;
2024-01-26T14:19:44.180584624Z   ^
2024-01-26T14:19:44.180601425Z
2024-01-26T14:19:44.180751728Z Error: Cannot find module '../server/require-hook'
2024-01-26T14:19:44.180757428Z Require stack:
2024-01-26T14:19:44.180760528Z - /home/site/wwwroot/node_modules/.bin/next
2024-01-26T14:19:44.180763728Z     at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15)
2024-01-26T14:19:44.180766928Z     at Module._load (node:internal/modules/cjs/loader:901:27)
2024-01-26T14:19:44.180769928Z     at Module.require (node:internal/modules/cjs/loader:1115:19)
2024-01-26T14:19:44.180773028Z     at require (node:internal/modules/helpers:130:18)
2024-01-26T14:19:44.180776029Z     at Object.<anonymous> (/home/site/wwwroot/node_modules/.bin/next:6:1)
2024-01-26T14:19:44.180780029Z     at Module._compile (node:internal/modules/cjs/loader:1241:14)
2024-01-26T14:19:44.180783329Z     at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
2024-01-26T14:19:44.180786429Z     at Module.load (node:internal/modules/cjs/loader:1091:32)
2024-01-26T14:19:44.180789729Z     at Module._load (node:internal/modules/cjs/loader:938:12)
2024-01-26T14:19:44.180792729Z     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12) {
2024-01-26T14:19:44.180796629Z   code: 'MODULE_NOT_FOUND',
2024-01-26T14:19:44.180800029Z   requireStack: [ '/home/site/wwwroot/node_modules/.bin/next' ]
2024-01-26T14:19:44.180803029Z }

解决方案 #

问题根源 #

工作流中的路径处理错误导致部署文件结构异常：

1. 打包步骤在根目录执行，会把根目录所有文件打包，而非仅frontend下的应用文件
2. 部署阶段指定package: frontend，但解压后的文件结构不匹配，导致Azure WebApp运行时依赖路径错误

修正后的工作流 #

调整打包和部署的路径配置，确保仅处理frontend目录下的应用文件：

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

on:
  push:
    branches:
      - master
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

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

      - name: npm install, build, and test
        run: |
          npm install --legacy-peer-deps
          npm run build --if-present
        working-directory: frontend

      - name: Zip artifact for deployment
        run: zip release.zip ./* -r
        working-directory: frontend  # 在frontend目录内打包，仅包含应用文件

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v3
        with:
          name: node-app
          path: frontend/release.zip  # 上传正确路径下的压缩包

  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@v3
        with:
          name: node-app

      - name: Unzip artifact for deployment
        run: unzip release.zip
      
      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'mm'
          slot-name: 'Production'
          package: .  # 部署当前解压后的所有文件，确保路径匹配
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_******************************* }}

额外检查项 #

• 确认frontend/package.json中的start命令为next start，build命令能正确生成.next文件夹
• 若仍有路径问题，可在Azure门户的「配置>常规设置」中设置启动命令为cd frontend && npm start，强制指定运行目录

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