Angular 19 SSR应用部署AWS Amplify配置问题求助

问题描述 #

使用Angular 19构建的SSR应用，部署到AWS Amplify时出现以下问题：构建完成后，Amplify期望部署目录中存在index.html文件，但该SSR应用无需静态文件服务，需通过运行dist/ssr-app/server/server.mjs来处理请求。

当前配置信息 #

Package.json #

{
  "name": "ssr-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "serve:ssr:ssr-app": "node dist/ssr-app/server/server.mjs"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^19.0.0",
    "@angular/common": "^19.0.0",
    "@angular/compiler": "^19.0.0",
    "@angular/core": "^19.0.0",
    "@angular/forms": "^19.0.0",
    "@angular/platform-browser": "^19.0.0",
    "@angular/platform-browser-dynamic": "^19.0.0",
    "@angular/platform-server": "^19.0.0",
    "@angular/router": "^19.0.0",
    "@angular/ssr": "^19.0.6",
    "aws-amplify": "^6.12.0",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^19.0.6",
    "@angular/cli": "^19.0.6",
    "@angular/compiler-cli": "^19.0.0",
    "@aws-amplify/backend": "^1.12.0",
    "@aws-amplify/backend-cli": "^1.4.6",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
    "aws-cdk": "^2.173.4",
    "aws-cdk-lib": "^2.173.4",
    "constructs": "^10.4.2",
    "esbuild": "^0.24.2",
    "jasmine-core": "~5.4.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "tsx": "^4.19.2",
    "typescript": "^5.6.3"
  }
}

构建目录结构 #

dist/
  ssr-app/
    browser/  # 包含客户端文件
    server/   # 包含服务端文件，包括`server.mjs`

AWS Amplify配置文件（amplify.yml） #

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm install 20
        - nvm use 20
        - npm install
    build:
      commands:
        - |
          if [ "$AWS_BRANCH" == "master" ]; then
            npm run build
          else
            echo "Branch not configured for specific build commands."
            exit 1
          fi
  artifacts:
    baseDirectory: dist/ssr-app
    files:
      - '**/*'
  cache:
    paths:
      - .npm/**/*
  runtime:
    nodejs: 20

构建日志片段 #

134 2024-12-31T10:32:53.727Z [INFO]: Output location: /codebuild/output/src2186657907/src/g99-landingpages-ui-copy/dist/ssr-app
135 2024-12-31T10:32:53.843Z [INFO]: # Completed phase: build
136 ## Completed Frontend Build
137 2024-12-31T10:32:53.857Z [INFO]: ## Build completed successfully
138 2024-12-31T10:32:53.858Z [INFO]: # Starting caching...
139 2024-12-31T10:32:53.862Z [INFO]: # Creating cache artifact...
140 2024-12-31T10:32:53.865Z [INFO]: # Created cache artifact
141 2024-12-31T10:32:53.865Z [INFO]: # Uploading cache artifact...
142 2024-12-31T10:32:53.947Z [INFO]: # Uploaded cache artifact
143 2024-12-31T10:32:53.947Z [INFO]: # Caching completed
144 2024-12-31T10:32:53.967Z [WARNING]: !! No index.html detected in deploy folder: /codebuild/output/src2186657907/src/g99-landingpages-ui-copy/dist/ssr-app
145 2024-12-31T10:32:53.969Z [INFO]: # Starting build artifact upload process...
146 2024-12-31T10:32:54.072Z [INFO]: # Uploading build artifact '__artifacts.zip'...
147 2024-12-31T10:32:54.171Z [INFO]: # Build artifact upload completed
148 2024-12-31T10:32:54.172Z [INFO]: # Starting environment caching...
149 2024-12-31T10:32:54.172Z [INFO]: # Uploading environment cache artifact...
150 2024-12-31T10:32:54.239Z [INFO]: # Uploaded environment cache artifact
151 2024-12-31T10:32:54.239Z [INFO]: # Environment caching completed

问题解答 #

1. 如何配置AWS Amplify以运行server.mjs文件，而非查找index.html？ #

AWS Amplify默认按静态站点部署，需切换到SSR模式，通过指定启动命令来运行Node.js服务。修改amplify.yml配置如下：

version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - nvm install 20
            - nvm use 20
            - npm install
        build:
          commands:
            - |
              if [ "$AWS_BRANCH" == "master" ]; then
                npm run build
              else
                echo "Branch not configured for specific build commands."
                exit 1
              fi
      artifacts:
        baseDirectory: dist/ssr-app
        files:
          - '**/*'
      cache:
        paths:
          - .npm/**/*
    appRoot: .
    runtime: nodejs20.x
    startCommand: node server/server.mjs

关键修改点：

• 将原frontend配置嵌套到applications数组中，明确标识为SSR应用
• 指定runtime为nodejs20.x，与构建环境版本保持一致
• 添加startCommand：由于baseDirectory已设为dist/ssr-app，直接使用相对路径server/server.mjs即可，Amplify部署后会执行该命令启动服务
• 移除原独立的runtime配置，统一整合到applications节点下

修改完成后，Amplify会以Node.js服务方式部署应用，不再检查index.html文件，转而运行指定的server.mjs处理请求。

2. 是否可以在AWS Amplify中覆盖构建与启动命令，以适配SSR应用？ #

完全可以，通过amplify.yml即可自定义构建和启动逻辑：

• 覆盖构建命令：在phases.build.commands中编写自定义脚本，比如指定Angular构建环境参数、添加额外预处理步骤，示例：

  build:
    commands:
      - npm run build --configuration production
      - echo "自定义构建步骤执行完成"
  

• 覆盖启动命令：通过startCommand字段指定启动服务的命令，也可直接调用package.json中的SSR启动脚本，示例：

  startCommand: npm run serve:ssr:ssr-app
  

  注意：使用package.json脚本时，需确保baseDirectory配置正确，保证Amplify部署环境能找到对应脚本。

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