對伺服器端轉譯應用程式進行故障診斷 - AWS Amplify 託管
我需要使用架構轉接器的協助Edge API 路由導致我的 Next.js 建置失敗隨需增量靜態復原不適用於我的應用程式我應用程式的建置輸出超過允許的大小上限我的建置失敗，並出現記憶體不足錯誤我應用程式的 HTTP 回應大小太大如何在本機測量運算應用程式的啟動時間？

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

對伺服器端轉譯應用程式進行故障診斷

如果您在使用 Amplify 託管運算部署 SSR 應用程式時遇到意外問題，請檢閱下列疑難排解主題。如果您在這裡看不到問題的解決方案，請參閱 Amplify Hosting GitHub Issues 儲存庫中的 SSR Web 運算疑難排解指南。

我需要使用架構轉接器的協助

如果您在部署使用架構轉接器的 SSR 應用程式時遇到問題，請參閱 針對任何 SSR 架構使用開放原始碼轉接器。

Edge API 路由導致我的 Next.js 建置失敗

目前，Amplify 不支援 Next.js Edge API Routes。使用 Amplify 託管應用程式時，您必須使用非邊緣 APIs 和中介軟體。

隨需增量靜態復原不適用於我的應用程式

從 12.2.0 版開始，Next.js 支援增量靜態重新產生 (ISR)，以手動清除特定頁面的 Next.js 快取。不過，Amplify 目前不支援隨需 ISR。如果您的應用程式使用 Next.js 隨需重新驗證，當您將應用程式部署到 Amplify 時，此功能將無法運作。

我應用程式的建置輸出超過允許的大小上限

目前，Amplify 支援用於 SSR 應用程式的建置輸出大小上限為 220 MB。如果您收到錯誤訊息，指出您應用程式建置輸出的大小超過允許的大小上限，您必須採取步驟來減少它。

若要減少應用程式建置輸出的大小，您可以檢查應用程式的建置成品，並識別任何要更新或移除的大型相依性。首先，將建置成品下載到您的本機電腦。然後，檢查目錄的大小。例如，node_modules目錄可能包含二進位檔，例如 Next.js 伺服器執行期檔案所參考@esbuild的 @swc和 。由於執行時間不需要這些二進位檔，因此您可以在建置之後刪除它們。

使用下列指示下載應用程式的建置輸出，並使用 AWS Command Line Interface (CLI) 檢查目錄的大小。

下載並檢查 Next.js 應用程式的建置輸出

  1. 開啟終端機視窗並執行下列命令。將應用程式 ID、分支名稱和任務 ID 變更為您自己的資訊。針對任務 ID，針對您正在調查的失敗組建使用組建編號。

    aws amplify get-job --app-id abcd1234 --branch-name main --job-id 2

  2. 在終端機輸出中，找到 job區段中的預先簽章成品 URLstepsstepName: "BUILD"。在下列範例輸出中，URL 會以紅色反白顯示。

    "job": {
    "summary": {
        "jobArn": "arn:aws:amplify:us-west-2:111122223333:apps/abcd1234/main/jobs/0000000002",
        "jobId": "2",
        "commitId": "HEAD",
        "commitTime": "2024-02-08T21:54:42.398000+00:00",
        "startTime": "2024-02-08T21:54:42.674000+00:00",
        "status": "SUCCEED",
        "endTime": "2024-02-08T22:03:58.071000+00:00"
    },
    "steps": [
        {
            "stepName": "BUILD",
            "startTime": "2024-02-08T21:54:42.693000+00:00",
            "status": "SUCCEED",
            "endTime": "2024-02-08T22:03:30.897000+00:00",
            "logUrl": "https://aws-amplify-prod-us-west-2-artifacts.s3.us-west-2.amazonaws.com/abcd1234/main/0000000002/BUILD/log.txt?X-Amz-Security-Token=IQoJb3JpZ2luX2V...Example

  3. 複製 URL 並貼到瀏覽器視窗。artifacts.zip 檔案會下載到您的本機電腦。這是您的建置輸出。

  4. 執行du磁碟用量命令來檢查目錄的大小。下列範例命令會傳回 compute和 static 目錄的大小。

    du -csh compute static

    以下是輸出的範例，其中包含 compute和 static目錄的大小資訊。

     29M    compute
3.8M    static
 33M    total

  5. 開啟 compute目錄，並找到 node_modules 資料夾。檢閱您可以更新或移除的檔案相依性，以減少資料夾的大小。

  6. 如果您的應用程式包含執行時間中不需要的二進位檔，請在建置後將下列命令新增至應用程式amplify.yml檔案的建置區段，以將其刪除。

    - rm -f node_modules/@swc/core-linux-x64-gnu/swc.linux-x64-gnu.node
- rm -f node_modules/@swc/core-linux-x64-musl/swc.linux-x64-musl.node

    以下是 amplify.yml 檔案的建置命令區段範例，這些命令會在執行生產建置後新增。

    frontend:
  phases:
    build:
      commands:
         -npm run build
         
         // After running a production build, delete the files
         - rm -f node_modules/@swc/core-linux-x64-gnu/swc.linux-x64-gnu.node
         - rm -f node_modules/@swc/core-linux-x64-musl/swc.linux-x64-musl.node

我的建置失敗，並出現記憶體不足錯誤

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。

我應用程式的 HTTP 回應大小太大

目前，Amplify 支援使用 Web 運算平台的 Next.js 12 和更新版本的應用程式的回應大小上限為 5.72 MB。超過該限制的回應會傳回 504 個錯誤，而用戶端沒有內容。

如何在本機測量運算應用程式的啟動時間？

使用下列指示來判斷 Next.js 12 或更新版本運算應用程式的本機初始化/啟動時間。您可以在本機與 Amplify Hosting 上比較應用程式的效能，並使用結果來改善應用程式的效能。

在本機測量 Next.js 運算應用程式的初始化時間

  1. 開啟應用程式的 next.config.js 檔案，並將 output選項設定為 standalone ，如下所示。

    ** @type {import('next').NextConfig} */
const nextConfig = {
  // Other options
  output: "standalone",
};

module.exports = nextConfig;

  2. 開啟終端機視窗並執行下列命令來建置應用程式。

    next build

  3. 執行下列命令，將.next/static資料夾複製到 .next/standalone/.next/static。

    cp -r .next/static .next/standalone/.next/static

  4. 執行下列命令，將public資料夾複製到 .next/standalone/public。

    cp -r public .next/standalone/public

  5. 執行下列命令來啟動 Next.js 伺服器。

    node .next/standalone/server.js

  6. 請注意，在步驟 5 中執行命令和伺服器啟動之間需要多長時間。當伺服器接聽連接埠時，應列印下列訊息。

    Listening on port 3000

  7. 請注意，在步驟 6 中啟動伺服器後，任何其他模組載入所需的時間。例如，類似 的程式庫bugsnag需要 10-12 秒才能載入。載入後，會顯示確認訊息 [bugsnag] loaded。

  8. 同時新增步驟 6 和步驟 7 的持續時間。此結果是運算應用程式的本機初始化/啟動時間。