SSR 支援的功能 - AWS Amplify 託管
支援 Next.js 應用程式的 Node.js 版本SSR 應用程式的影像最佳化SSR 應用程式 Amazon CloudWatch LogsAmplify Next.js 11 SSR支援

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

SSR 支援的功能

本節提供有關 Amplify 對 SSR 功能支援的資訊。

Amplify 提供 Node.js 版本支援，以符合用於建置應用程式的 Node.js 版本。

Amplify 提供內建影像最佳化功能，可支援所有SSR應用程式。如果您不想使用預設映像最佳化功能，您可以實作自訂映像最佳化載入器。

支援 Next.js 應用程式的 Node.js 版本

當 Amplify 建置和部署 Next.js 運算應用程式時，它會使用 Node.js 符合 主要版本的執行期版本 Node.js 用於建置應用程式。

您可以指定 Node.js 在 Amplify 主控台的即時套件覆寫功能中使用的 版本。如需設定即時套件更新的詳細資訊，請參閱 在建置映像中使用特定套件和相依性版本。您也可以指定 Node.js 使用其他機制的版本，例如 nvm 命令。如果您未指定版本，Amplify 會預設使用 Amplify 建置容器使用的目前版本。

SSR 應用程式的影像最佳化

Amplify Hosting 提供內建映像最佳化功能，可支援所有SSR應用程式。透過 Amplify 的映像最佳化，您可以為存取它們的裝置提供正確格式、維度和解析度的高品質映像，同時保持最小的檔案大小。

目前，您可以使用 Next.js Image 元件來隨需最佳化映像，也可以實作自訂映像載入器。如果您使用的是 Next.js 13 或更新版本，則不需要採取任何進一步的動作來使用 Amplify 的映像最佳化功能。如果您要實作自訂載入器，請參閱下列使用自訂映像載入器主題。

使用自訂映像載入器

如果您使用自訂映像載入器，Amplify 會偵測應用程式next.config.js檔案中的載入器，且不會使用內建映像最佳化功能。如需有關 Next.js 支援的自訂載入器的詳細資訊，請參閱 Next.js 映像文件。

SSR 應用程式 Amazon CloudWatch Logs

Amplify 會將有關SSR執行期的資訊傳送至您 中的 Amazon CloudWatch Logs AWS 帳戶。部署SSR應用程式時，應用程式需要 Amplify 代表您呼叫其他服務時擔任IAM的服務角色。您可以允許 Amplify Hosting 運算自動為您建立服務角色，也可以指定您已建立的角色。

如果您選擇允許 Amplify 為您建立IAM角色，該角色將已經具有建立 CloudWatch 日誌的許可。如果您建立自己的IAM角色，則需要將下列許可新增至政策，以允許 Amplify 存取 Amazon CloudWatch Logs。

logs:CreateLogStream
logs:CreateLogGroup
logs:DescribeLogGroups
logs:PutLogEvents

如需服務角色的詳細資訊，請參閱將服務角色新增至 Amplify 應用程式。

Amplify Next.js 11 SSR支援

如果您在 2022 年 11 月 17 日發行 Amplify Hosting 運算之前，將 Next.js 應用程式部署至 Amplify，則您的應用程式會使用 Amplify 先前的SSR提供者 Classic （僅限 Next.js 11）。本節中的文件僅適用於使用 Classic （僅限 Next.js 11） SSR 供應商部署的應用程式。

注意

我們強烈建議您將 Next.js 11 應用程式遷移至 Amplify Hosting 運算受管SSR提供者。如需詳細資訊，請參閱將 Next.js 11 SSR 應用程式遷移至 Amplify Hosting 運算。

下列清單說明 Amplify Classic （僅限 Next.js 11） SSR 供應商支援的特定功能。

支援的功能

  • 伺服器端轉譯頁面 （SSR）

  • 靜態頁面

  • API 路由

  • 動態路由

  • 擷取所有路由

  • SSG （靜態產生）

  • 增量靜態再生 （ISR）

  • 國際化 （i18n） 子路徑路由

  • 環境變數

不支援的功能

  • 映像最佳化

  • 隨需增量靜態再生 （ISR）

  • 國際化 （i18n） 網域路由

  • 國際化 （i18n） 自動地區設定偵測

  • 中介軟體

  • 邊緣中介軟體

  • 邊緣API路由

Next.js 11 SSR 應用程式的定價

部署 Next.js 11 SSR 應用程式時，Amplify 會在 AWS 您的帳戶中建立其他後端資源，包括：

  • Amazon Simple Storage Service （Amazon S3） 儲存貯體，可存放應用程式靜態資產的資源。如需 Amazon S3 費用的相關資訊，請參閱 Amazon S3 定價。

  • 服務應用程式的 Amazon CloudFront 分佈。如需 CloudFront 費用的相關資訊，請參閱 Amazon CloudFront Pricing 。

  • 四個 Lambda@Edge 函數可自訂 CloudFront 交付的內容。

AWS Identity and Access Management Next.js 11 SSR 應用程式的許可

Amplify 需要 AWS Identity and Access Management （IAM） 許可才能部署SSR應用程式。如果沒有所需的最低許可，當您嘗試部署SSR應用程式時，將會收到錯誤。若要提供 Amplify 所需的許可，您必須指定服務角色。

若要建立 Amplify 代表您呼叫其他服務時所擔任的服務IAM角色，請參閱 將服務角色新增至 Amplify 應用程式。這些指示示範如何建立連接 AdministratorAccess-Amplify 受管政策的角色。

AdministratorAccess-Amplify 受管政策可讓您存取多個 AWS 服務，包括 IAM 動作。 和 應被視為與AdministratorAccess政策一樣強大。此政策提供比部署SSR應用程式所需的更多許可。

建議您遵循授予最低權限的最佳實務，並減少授予服務角色的許可。您可以建立自己的客戶受管IAM政策，僅授予部署SSR應用程式所需的許可，而不是將管理員存取權授予服務角色。如需建立客戶受管IAM政策的指示，請參閱 IAM 使用者指南中的建立政策。

如果您建立自己的政策，請參閱下列部署SSR應用程式所需的最低許可清單。

acm:DescribeCertificate
acm:ListCertificates
acm:RequestCertificate
cloudfront:CreateCloudFrontOriginAccessIdentity
cloudfront:CreateDistribution
cloudfront:CreateInvalidation
cloudfront:GetDistribution
cloudfront:GetDistributionConfig
cloudfront:ListCloudFrontOriginAccessIdentities
cloudfront:ListDistributions
cloudfront:ListDistributionsByLambdaFunction
cloudfront:ListDistributionsByWebACLId
cloudfront:ListFieldLevelEncryptionConfigs
cloudfront:ListFieldLevelEncryptionProfiles
cloudfront:ListInvalidations
cloudfront:ListPublicKeys
cloudfront:ListStreamingDistributions
cloudfront:UpdateDistribution
cloudfront:TagResource
cloudfront:UntagResource
cloudfront:ListTagsForResource
cloudfront:DeleteDistribution
iam:AttachRolePolicy
iam:CreateRole
iam:CreateServiceLinkedRole
iam:GetRole
iam:PutRolePolicy
iam:PassRole
iam:UpdateAssumeRolePolicy
iam:DeleteRolePolicy
lambda:CreateFunction
lambda:EnableReplication
lambda:DeleteFunction
lambda:GetFunction
lambda:GetFunctionConfiguration
lambda:PublishVersion
lambda:UpdateFunctionCode
lambda:UpdateFunctionConfiguration
lambda:ListTags
lambda:TagResource
lambda:UntagResource
lambda:ListEventSourceMappings
lambda:CreateEventSourceMapping
route53:ChangeResourceRecordSets
route53:ListHostedZonesByName
route53:ListResourceRecordSets
s3:CreateBucket
s3:GetAccelerateConfiguration
s3:GetObject
s3:ListBucket
s3:PutAccelerateConfiguration
s3:PutBucketPolicy
s3:PutObject
s3:PutBucketTagging
s3:GetBucketTagging
sqs:CreateQueue
sqs:DeleteQueue
sqs:GetQueueAttributes
sqs:SetQueueAttributes
amplify:GetApp
amplify:GetBranch
amplify:UpdateApp
amplify:UpdateBranch

Next.js 11 SSR 部署疑難排解

如果您在使用 Amplify 部署 Classic （僅限 Next.js 11） SSR 應用程式時遇到意外問題，請檢閱下列疑難排解主題。

我的應用程式的輸出目錄被覆寫

使用 Amplify 部署的 Next.js 應用程式的輸出目錄必須設定為 .next。如果應用程式的輸出目錄遭到覆寫，請檢查 next.config.js 檔案。若要將建置輸出目錄預設為 .next，請從 檔案中移除下列行：

distDir: 'build'

在建置設定.next中確認輸出目錄已設為 。如需有關檢視應用程式建置設定的資訊，請參閱 設定應用程式的建置設定。

以下是應用程式建置設定的範例，其中 baseDirectory 設定為 .next。

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

部署SSR網站後，我收到 404 錯誤

如果您在部署網站之後出現 404 錯誤，問題可能是由於您的輸出目錄被覆寫所致。若要檢查next.config.js檔案並驗證應用程式建置規格中的正確建置輸出目錄，請依照上一個主題中的步驟 執行我的應用程式的輸出目錄被覆寫。

我的應用程式缺少分佈的 CloudFront SSR重寫規則

部署SSR應用程式時，Amplify 會 CloudFront SSR為您的分佈建立重寫規則。如果您無法在 Web 瀏覽器中存取應用程式，請在 CloudFront Amplify 主控台中驗證應用程式的重寫規則是否存在。如果遺失，您可以手動新增應用程式或重新部署應用程式。

若要在 Amplify 主控台中檢視或編輯應用程式的重寫和重新導向規則，請在導覽窗格中選擇應用程式設定 ，然後選擇重寫和重新導向 。下列螢幕擷取畫面顯示 Amplify 在您部署SSR應用程式時為您建立的重寫規則範例。請注意，在此範例中，存在 CloudFront 重寫規則。

應用程式重寫和重新導向頁面SSR。

我的應用程式太大，無法部署

Amplify 將SSR部署的大小限制為 50 MB。如果您嘗試將 Next.js SSR 應用程式部署到 Amplify 並發生錯誤RequestEntityTooLargeException，您的應用程式太大而無法部署。您可以嘗試透過將快取清除程式碼新增至 next.config.js 檔案來解決此問題。

以下是執行快取清除的next.config.js檔案中程式碼範例。

module.exports = {
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
        config.optimization.splitChunks.cacheGroups = { }
        config.optimization.minimize = true;
        return config
      },
}

我的建置失敗，但記憶體不足錯誤

Next.js 可讓您快取建置成品，以改善後續建置的效能。此外，Amplify 的 AWS CodeBuild 容器會代表您壓縮此快取並上傳至 Amazon S3，以改善後續建置效能。這可能會導致您的建置在記憶體不足錯誤的情況下失敗。

執行下列動作，以防止您的應用程式在建置階段超過記憶體限制。首先，.next/cache/**/*從建置設定的 cache.paths 區段中移除 。接下來，從建置設定檔案中移除NODE_OPTIONS環境變數。相反地，請在 Amplify 主控台中設定NODE_OPTIONS環境變數，以定義節點記憶體上限。如需使用 Amplify 主控台設定環境變數的詳細資訊，請參閱 設定環境變數。

進行這些變更後，請再次嘗試建置。如果成功，請.next/cache/**/*新增 至建置設定檔案的 cache.paths 區段。

如需有關 Next.js 快取組態以改善建置效能的詳細資訊，請參閱 Next.js AWS CodeBuild 網站上的 。

我的應用程式同時具有 SSR和 SSG分支

您無法部署同時具有 SSR和 SSG分支的應用程式。如果您需要同時部署 SSR和 SSG分支，您必須部署一個只使用SSR分支的應用程式，以及另一個只使用SSG分支的應用程式。

我的應用程式將靜態檔案存放在具有預留路徑的資料夾中

Next.js 可以從儲存在專案根目錄中public的名為 的資料夾提供靜態檔案。當您使用 Amplify 部署和託管 Next.js 應用程式時，您的專案無法包含路徑為 的資料夾public/static。Amplify 保留分發應用程式時使用的public/static路徑。如果您的應用程式包含此路徑，則必須重新命名static資料夾，才能使用 Amplify 部署。

我的應用程式已達到限制 CloudFront

CloudFront 服務配額將您的帳戶限制為 25 個具有連接 Lambda@Edge 函數的分佈。 AWS 如果您超過此配額，您可以從您的帳戶刪除任何未使用的 CloudFront 分發，或請求增加配額。如需詳細資訊，請參閱《Service Quotas 使用者指南》中的請求提高配額。

環境變數不會傳遞至 Lambda 函數

您在 Amplify 主控台中為SSR應用程式指定的環境變數不會傳遞至應用程式的 AWS Lambda 函數。如需如何新增可從 Lambda 函數參考之環境變數的詳細說明讓伺服器端執行階段可存取環境變數，請參閱 。

Lambda@Edge 函數是在美國東部 （維吉尼亞北部） 區域建立

部署 Next.js 應用程式時，Amplify 會建立 Lambda@Edge 函數來自訂 CloudFront 交付的內容。Lambda@Edge 函數是在美國東部 （維吉尼亞北部） 區域中建立，而不是部署應用程式的 區域。這是 Lambda@Edge 限制。如需 Lambda@Edge 函數的詳細資訊，請參閱 Amazon 開發人員指南中的邊緣函數限制。 CloudFront

我的 Next.js 應用程式使用不支援的功能

使用 Amplify 部署的應用程式支援透過 11 版的 Next.js 主要版本。如需 Amplify 支援和不支援的 Next.js 功能的詳細清單，請參閱 supported features。

當您部署新的 Next.js 應用程式時，Amplify 預設會使用最新支援的 Next.js 版本。如果您有已部署至 Amplify 且使用舊版 Next.js 的現有 Next.js 應用程式，您可以將應用程式遷移至 Amplify Hosting 運算SSR提供者。如需說明，請參閱 將 Next.js 11 SSR 應用程式遷移至 Amplify Hosting 運算。

我的 Next.js 應用程式中的影像未載入

當您使用 next/image元件將映像新增至 Next.js 應用程式時，映像的大小不得超過 1 MB。當您將應用程式部署到 Amplify 時，大於 1 MB 的影像將傳回 503 錯誤。這是因為 Lambda@Edge 限制，將 Lambda 函數產生的回應大小限制為 1 MB，包括標頭和內文。

1 MB 限制適用於應用程式中的其他成品，例如 PDF和 文件檔案。

不支援的區域

Amplify 不支援每個 Amplify 可用 AWS 區域中的 Classic （僅限 Next.js 11） SSR 應用程式部署。下列區域SSR不支援 Classic （僅限 Next.js 11）：歐洲 （米蘭） eu-south-1、中東 （巴林） me-south-1 和亞太區域 （香港） ap-east-1。