部署 Next.js 應用程序以 Amplify 託管 - AWS Amplify 託管
步驟 1：Connect 儲存庫步驟 2：確認構建設置步驟 3：部署應用程式步驟 4：(選擇性) 清理資源為您的應用程式新增功能

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

部署 Next.js 應用程序以 Amplify 託管

本教學課程將逐步引導您從 Git 儲存庫建置和部署 Next.js 應用程式。

開始此自學課程之前，請先完成下列先決條件。

註冊一個 AWS 帳戶

如果您還不是 AWS 客戶，您需要創建一個 AWS 帳戶按照在線說明進行操作。註冊使您可以訪問 Amplify 和其他 AWS 您可以搭配應用程式使用的服務。

建立應用程式

使用 Next.js 文件中的create-next-app指示，建立用於本教學課程的基本 Next.js 應用程式。

創建一個 Git 存儲庫

Amplify 支援 GitHub、位元儲存區和 GitLab AWS CodeCommit。 將您的create-next-app應用程序推送到 Git 存儲庫。

第 1 步：Connect 一個 Git 存儲庫

在此步驟中，您可以在 Git 存儲庫中連接 Next.js 應用程序以 Amplify 託管。

若要連接 Git 儲存庫中的應用程式

  1. 開啟 Amplify 控制台。

  2. 如果您要在目前區域中部署您的第一個應用程式，預設會從 AWS Amplify服務頁面。

    選擇頁面頂端的 [建立新應用程式]。

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

    對於 GitHub 存儲庫，Amplify 使用應用 GitHub 程序功能來授權 Amplify 訪問權限。如需有關安裝和授權 GitHub應用程式的詳細資訊，請參閱設定 Amplify GitHub 庫的存取。

    注意

    在您使用 Bitbucket 授權 Amplify 控制台之後， GitLab或 AWS CodeCommit，Amplify 從存儲庫提供程序獲取訪問令牌，但它不會將令牌存儲在 AWS 伺服器。Amplify 只會使用安裝在特定儲存庫中的部署金鑰來存取您的儲存庫。

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

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

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

    3. 選擇 Next (下一步)。

步驟 2：確認構建設置

Amplify 會自動偵測要針對您要部署的分支執行的建置命令順序。在此步驟中，您將檢閱並確認您的組建設定。

確認應用程式的建置設定

  1. 在 [應用程式設定] 頁面上，找到 [建置設定] 區段。

    驗證前端構建命令和構建輸出目錄是否正確。對於此 Next.js 示例應用程序，構建輸出目錄設置為.next。

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

    • 若要建立新角色：

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

    • 若要使用現有角色：

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

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

  3. 選擇 Next (下一步)。

步驟 3：部署應用程式

在此步驟中，您將應用程式部署到 AWS 全球內容傳遞網路 (CDN)。

若要儲存和部署應用程式

  1. 在「檢閱」頁面上，確認您的儲存庫詳細資料和應用程式設定正確無誤。

  2. 選擇 Save and deploy (儲存並部署)。您的前端組建通常需要 1 到 2 分鐘，但可能會根據應用程式的大小而有所不同。

  3. 部署完成後，您可以使用amplifyapp.com預設網域的連結來檢視您的應用程式。

注意

為了增強您的 Amplify 大應用程式的安全性，amplifyapp.com 網域會註冊在公用尾碼清單 () 中。PSL為了進一步的安全性，如果您需要在 Amplify 應用程式的預設網域名稱中設定敏感性 Cookie，建議您使用__Host-前置詞的 Cookie。此做法將有助於保護您的網域免受跨網站要求偽造嘗試 () 的侵害。CSRF如需更多資訊，請參閱 Mozilla 開發人員網路中的設定 Cookie 頁面。

步驟 4：(選擇性) 清理資源

如果您不再需要為教學課程部署的應用程式，可以將其刪除。此步驟協助確保您不會為了未使用的資源而付費。

若要刪除應用程式

  1. 從導覽窗格的 [應用程式設定] 功能表中，選擇 [一般設定]。

  2. 在 [一般設定] 頁面上選擇 [刪除應用程式]。

  3. 在確認視窗中，輸入delete。然後選擇刪除應用程序。

為您的應用程式新增功能

現在您已將應用程式部署到 Amplify，您可以探索下列可供託管應用程式使用的功能。

環境變數

應用程式在執行階段通常需要組態資訊 這些組態可以是資料庫連線詳細資訊、API索引鍵或參數。環境變量提供了一種在構建時公開這些配置的方法。如需詳細資訊，請參閱環境變數。

自訂網域

在本教程中，Amplify 在默認amplifyapp.com域上為您託管您的應用程序，URL例如https://branch-name.d1m7bkiki6tdw1.amplifyapp.com。將應用程序連接到自定義域時，用戶會看到您的應用程序託管在自定義上URL，例如https://www.example.com。如需詳細資訊，請參閱設定自訂網域。

提取請求預覽

Web 提取請求預覽可讓團隊在將程式碼合併至生產或整合分支之前，先預覽來自提取要求 (PRs) 的變更。如需詳細資訊，請參閱提取要求的 Web 預覽。

管理多個環境

若要瞭解 Amplify 如何搭配功能分支和工作 GitFlow 流程以支援多個部署，請參閱功能分支部署和團隊工作流程。