如何在 AWS Amplify 上部署 Angular 19 SSR 应用程序？

Question

我已经使用 Angular 19 构建了一个 Angular SSR 应用程序，并且正在尝试将其部署在 AWS Amplify 上。以下是我的设置和我面临的挑战：

包.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/  # Contains client-side files
    server/   # Contains server-side files, including `server.mjs`

AWS ampliy.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

问题： 构建完成后，AWS Amplify 需要在部署文件夹中出现一个 index.html 文件，但我的应用程序是一个 SSR 应用程序。应用程序需要运行服务器文件（dist/ssr-app/server/server.mjs）来处理请求，而不是提供静态文件。

我需要什么帮助：

• 如何配置 AWS Amplify 来运行服务器端文件 （server.mjs）而不是寻找index.html？
• 是否可以 覆盖 AWS Amplify 中的构建和启动命令以适应 SSR 申请？

下面是我构建后的文件夹结构

Answer 1

您可以关注 sbalfour 的 评论，了解如何修改 Angular SSR 应用程序以使其与 Amplify 一起使用。他针对 Angular 17 SSR 的解决方案也适用于 Angular 19 SSR。

deploy-manifest.json

位于项目根目录

{
  "version": 1,
  "framework": { "name": "express", "version": "4.18.2" },
  "routes": [
    {
      "path": "/*.*",
      "target": {
        "kind": "Static",
        "cacheControl": "public, max-age=1, immutable"
      },
      "fallback": {
        "kind": "Compute",
        "src": "default"
      }
    },
    {
      "path": "/*",
      "target": {
        "kind": "Compute",
        "src": "default"
      }
    }
  ],
  "computeResources": [
    {
      "name": "default",
      "runtime": "nodejs20.x",
      "entrypoint": "server.mjs"
    }
  ]
}

postbuild.sh

/bin

#!/bin/bash

rm -rf ./.amplify-hosting

mkdir -p ./.amplify-hosting/compute

cp -r ./dist/your-project/server ./.amplify-hosting/compute/default

cp -r ./dist/your-project/browser ./.amplify-hosting/static

cp deploy-manifest.json ./.amplify-hosting/deploy-manifest.json

将 postbuild 命令添加到 package.json 脚本中

"postbuild": "chmod +x bin/postbuild.sh && ./bin/postbuild.sh",

调整

server.ts

browserDistFolder 指向静态文件夹

const browserDistFolder = resolve(serverDistFolder, '../../static');

并使用端口 3000

const port = process.env['PORT'] || 3000;

在 AWS amplify 中更新

amplify.yml

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .amplify-hosting
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

最后，在重写和重定向中，删除或调整 200 重写规则到 index.html，如下所示：

</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

一个干净的解决方案是为 Angular SSR 提供一个适配器，但目前还没有……并且创建一个适配器需要有构建进程挂钩。