如何用AWS Amplify部署Nx Monorepo中的NextJS应用及配置疑问

核心疑问解答 #

1. 正确的appRoot路径 #

appRoot应设为apps/myNextJsApp，而非./。它是相对于仓库根目录的路径，指向你的Next.js应用所在的子目录，Amplify会默认切换到该目录执行后续构建阶段。

2. preBuild阶段仅执行yarn install是否足够？ #

足够，但必须在仓库根目录执行。当前配置里的cd ../..存在路径依赖风险，建议改用Amplify提供的环境变量$PROJECT_ROOT直接切到根目录：

cd $PROJECT_ROOT
yarn install

因为Monorepo的依赖锁文件、Nx核心配置都在根目录，在此执行依赖安装才能确保所有包正确加载。

3. npx nx build myNextJsApp --prod是否足够完成构建？ #

完全足够。Nx会调用Next.js官方构建流程，自动处理编译、打包，并将产物输出到dist/apps/myNextJsApp/.next目录，完全符合Amplify的部署要求。

4. .next和cache目录的指定是否正确？ #

当前配置存在错误，修正如下：

• 构建产物（artifacts）：应指定.next/**/*作为文件路径，同时将baseDirectory设为dist/apps/myNextJsApp（Nx的产物输出目录），无需写完整嵌套路径。
• 缓存（cache）：Nx的缓存目录是根目录下的.nx/cache，同时node_modules也需要缓存以加速后续构建，所以cache路径应改为：

  paths:
    - node_modules/**/*
    - .nx/cache/**/*
  

  注意：dist目录下的临时缓存无需保留，每次构建会重新生成。

5. baseDirectory和discard-paths的作用 #

• baseDirectory：指定Amplify收集构建产物的起始目录。比如设为dist/apps/myNextJsApp后，Amplify会从该目录下读取你指定的产物文件。
• discard-paths：设为yes时，Amplify会忽略文件的原始层级路径，将所有产物直接放到部署根目录。这对Next.js至关重要——Next.js期望.next文件夹位于应用根目录，而非嵌套在dist层级中。

修正后的amplify.yml配置 #

version: 1
applications:
  - appRoot: apps/myNextJsApp                
    frontend:
      phases:
        preBuild:
          commands:
            - cd $PROJECT_ROOT
            - yarn install
        build:
          commands:
            - npx nx build myNextJsApp --prod
      artifacts:
        files:
          - .next/**/*
          - public/**/*
          - next.config.js
          - package.json
        discard-paths: yes
        baseDirectory: dist/apps/myNextJsApp
      cache:
        paths:
          - node_modules/**/*
          - .nx/cache/**/*
    # 测试阶段可根据需求配置，若无测试可直接删除test节点
    test:
      phases:
        preTest:
          commands:
            - cd $PROJECT_ROOT
            - yarn install
        test:
          commands:
            - npx nx test myNextJsApp --watch=false
      artifacts:
        files:
          - coverage/**/*
        baseDirectory: dist/apps/myNextJsApp

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