Amplify 對 SSR 框架的支援 - AWS Amplify 託管
部署 SSR 應用程式以 Amplify使用框架適配器

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

Amplify 對 SSR 框架的支援

Amplify 主機支援任何 JavaScript 基於 SSR 架構，其部署套件包符合 Amplify 預期的建置輸出。Amplify Hosting 提供了一種部署規範，可將檔案和目錄結構標準化，以便針對任何 SSR 架構輸出應用程式組建。

架構作者可以使用以檔案系統為基礎的部署規格，開發針對其特定架構自訂的開放原始碼建置配接 這些適配器將應用程序的構建輸出轉換為符合 Amplify Hosting 預期目錄結構的部署包。此部署包將包括所有必要的文件和資產來託管應用程序，包括運行時配置，例如路由規則。

如果您不使用框架或框架適配器，則可以開發自己的解決方案來生成符合 Amplify Hosting 預期目錄結構的部署包。

Amplify 託管支持以下基本類型：靜態資產，計算，圖像優化和路由規則。您可以利用這些原始類型來部署具有更豐富功能的應用程式。如需每個基本型別的詳細資訊，請參閱Amplify SSR 原始類型支持。

您可以從下列案例中選擇，開始將 SSR 應用程式部署到 Amplify。

部署一個 Next.js 應用程式

Amplify 支援使用 Next.js 建立的應用程式，不需要在主控台中使用介面卡或手動設定。如需詳細資訊，請參閱 Amplify 對 Next.js 的支援。

部署使用架構配接器的應用程式

您可以參考任何可用的開放原始碼架構配接器，將 SSR 應用程式部署到「Amplify 主機」。如需詳細資訊，請參閱 使用框架適配器。

Nuxt 架構可使用配接器。如需有關使用此轉接器的詳細資訊，請參閱 Nuxt 文件。

建置架構轉接器

想要整合架構提供的功能的架構作者可以使用 Amplify 主機部署規格來設定您的組建輸出，以符合 Amplify 預期的結構。如需詳細資訊，請參閱 使用部署資訊清單部署快速伺服器。

設定建置後指令碼

您可以使用 Amplify 主機部署規格，根據特定案例的需要操作組建輸出。如需詳細資訊，請參閱 使用「Amplify 主機」部署規格來設定組建輸出。如需範例，請參閱使用部署資訊清單部署快速伺服器。

部署 SSR 應用程式以 Amplify

您可以使用本主題中的指示，部署使用符合 Amplify 預期之組建輸出的部署服務包的任何架構建立的應用程式。如果您要部署 Next.js 應用程式，則不需要介面卡。

如果您要部署使用架構介面卡的 SSR 應用程式，您必須先安裝並設定介面卡。如需說明，請參閱使用框架適配器。

若要部署 SSR 應用程式以 Amplify 主機

  1. 登入 AWS Management Console 並開啟 Amplify 大控制台。

  2. 在 [所有應用程式] 頁面上，選擇 [建立新應用程式

  3. 在 [開始使用 Amplify 建置] 頁面上，選擇您的 Git 儲存庫提供者，然後選擇 [下一步]。

  4. 在「新增儲存區域分支」頁面上執行下列動作：

    1. 選取要連線的存放庫名稱。

    2. 選取要連線的儲存庫分支名稱。

    3. 選擇下一步。

  5. 在應用程式設定頁面上，Amplify 會自動偵測 Next.js SSR 應用程式。

    如果您部署的 SSR 應用程式使用另一個架構的適配器，則必須明確啟用 Amazon CloudWatch Logs。開啟 [進階設定] 區段，然後選擇 [伺服器端轉譯 (SSR) 部署] 區段中的 [啟用 SSR 應用程式記錄]

  6. 該應用程式需要一個 IAM 服務角色，Amplify 假設該角色將日誌傳遞給您的 AWS 帳戶.

    根據您要建立新角色還是使用現有角色，新增服務角色的程序會有所不同。

    • 若要建立新角色：

      1. 選擇 [建立] 並使用新的服務角色。

    • 若要使用現有角色：

      1. 選擇「使用現有角色」。

      2. 在服務角色清單中，選取要使用的角色。

  7. 選擇下一步。

  8. 在「複查」頁面上，選擇「儲存並部署」。

使用框架適配器

您可以安裝和使用任何為與 Amplify 主機整合而建立的 SSR 架構建置配接器。每個提供轉接器的架構都會決定介面卡的配置方式，以及如何連接到其建置流程。一般而言，您會將介面卡安裝為 npm 開發相依性。

使用架構建立應用程式之後，請使用架構的文件來學習如何安裝 Amplify Hosting 配接器，並在應用程式的設定檔中進行設定。

接下來，在項目的根目錄中創建一個amplify.yml文件。在amplify.yml檔案中，將設定baseDirectory為應用程式的建置輸出目錄。架構會在建置程序期間執行介面卡，以將輸出轉換為 Amplify 主機部署服務包。

build 輸出目錄的名稱可以是任何名稱，但.amplify-hosting文件名具有重要意義。Amplify 首先尋找定義為. baseDirectory 如果存在，Amplify 會在那裡尋找構建輸出。如果目錄不存在，Amplify 會尋找內部的組建輸出.amplify-hosting，即使客戶尚未定義該目錄也是如此。

以下是應用程序的構建設置的示例。設定baseDirectory為.amplify-hosting以指出組建輸出位於.amplify-hosting資料夾中。只要.amplify-hosting資料夾的內容符合 Amplify 主機部署規格，應用程式就會成功部署。

version: 1
frontend:
  preBuild:
    commands:
      - npm install
  build:
    commands:
      - npm run build
  artifacts:
    baseDirectory: .amplify-hosting

將應用程序配置為使用框架適配器後，您可以將其部署到 Amplify 託管。如需詳細說明，請參閱部署 SSR 應用程式以 Amplify。