部署Turborepo构建的Next.js单体仓库到Azure Web Apps的方法及报错解决

现有部署错误修复 #

当前错误next: not found的核心原因是部署包未包含本地依赖node_modules，Azure环境中无全局next命令，且默认启动脚本直接执行next start。快速修复方案：

1. 修改打包命令：压缩时包含node_modules目录

   cd with-npm/apps/web
   zip next.zip ./* .next node_modules -qr
   

2. 替换启动命令：在Azure Web Apps配置中，将启动命令改为npx next start（npx会自动查找本地node_modules中的next命令）

需求1：每个应用独立部署到Azure Web Apps #

实现步骤 #

1. 创建独立Azure实例：为仓库中每个Next.js应用（如web、admin）创建单独的Azure Web Apps实例。
2. 矩阵式GitHub Actions工作流：通过矩阵构建同时处理多个应用的部署，避免重复代码。

修正后的工作流示例 #

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

env:
  NODE_VERSION: '18.x'

permissions:
  contents: read

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        app: [web, admin] # 替换为你的所有应用名称
    environment:
      name: 'Development'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
    steps:
    - uses: actions/checkout@v3

    - name: Set up Node.js
      uses: actions/setup-node@v3
      with:
        node-version: ${{ env.NODE_VERSION }}
        cache: 'npm'
        cache-dependency-path: 'with-npm/package-lock.json'
    
    - run: npm install turbo-linux-64@1.9.3

    - name: 安装依赖并构建应用
      run: |
        cd with-npm
        npm install
        turbo run build --filter=${{ matrix.app }}

    - name: 打包应用（含依赖和构建产物）
      run: |
        cd with-npm/apps/${{ matrix.app }}
        zip -qr ${{ matrix.app }}.zip ./* .next node_modules

    - name: 部署到Azure Web App
      id: deploy-to-webapp
      uses: azure/webapps-deploy@v2
      with:
        app-name: turbo-app-${{ matrix.app }} # 对应每个应用的Azure实例名称
        publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE_${{ matrix.app }} }} # 为每个应用创建单独的Publish Profile密钥
        package: with-npm/apps/${{ matrix.app }}/${{ matrix.app }}.zip

3. 配置Azure密钥：为每个应用创建对应的AZURE_WEBAPP_PUBLISH_PROFILE_{APP_NAME}仓库密钥，存储各自的Azure发布配置文件。

需求2：所有应用托管在单个Azure Web Apps实例 #

提供两种可行方案：

方案A：使用Next.js basePath + Azure虚拟应用路径 #

步骤

1. 配置应用basePath：在每个Next.js应用的next.config.js中添加basePath，对应虚拟路径：

   // web应用的next.config.js
   module.exports = {
     basePath: '/web'
   }
   // admin应用的next.config.js
   module.exports = {
     basePath: '/admin'
   }
   

2. 构建所有应用：用Turbo一次性构建所有应用：

   cd with-npm
   npm install
   turbo run build
   

3. 整理部署结构：将每个应用的构建产物（含node_modules）整理到对应子目录：

   deploy/
     web/       # web应用的所有文件（含.next、node_modules、package.json等）
     admin/     # admin应用的所有文件
   

4. 配置Azure虚拟应用：在Azure Web Apps的配置 -> 路径映射中添加虚拟应用：
   • 虚拟路径：/web，物理路径：site\wwwroot\web
   • 虚拟路径：/admin，物理路径：site\wwwroot\admin
5. GitHub Actions部署：将整理好的deploy目录打包部署到Azure，确保每个子目录对应虚拟应用路径。

方案B：容器化部署（Nginx反向代理） #

步骤

1. 编写Dockerfile：为每个应用创建Dockerfile，或者用多阶段构建打包所有应用，再用Nginx做反向代理。
2. 创建docker-compose.yml：定义多个Next.js服务和Nginx服务，示例：

   version: '3'
   services:
     web:
       build: ./with-npm/apps/web
       ports:
         - '3000:3000'
     admin:
       build: ./with-npm/apps/admin
       ports:
         - '3001:3000'
     nginx:
       build: ./nginx
       ports:
         - '8080:80'
       depends_on:
         - web
         - admin
   

3. Nginx配置：在nginx目录下的nginx.conf中添加路由规则：

   server {
     listen 80;
     location /web/ {
       proxy_pass http://web:3000/web/;
       proxy_set_header Host $host;
     }
     location /admin/ {
       proxy_pass http://admin:3001/admin/;
       proxy_set_header Host $host;
     }
   }
   

4. 部署到Azure Web Apps：使用Azure Web Apps的容器部署功能，将Docker镜像推送到Azure Container Registry，然后配置Web Apps从ACR拉取镜像。

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