開始使用 Amplify 託管 - AWS Amplify 託管
必要條件 步驟 1：Connect 儲存庫步驟 2：確認構建設置步驟 3：部署應用程式步驟 4：(選擇性) 清理資源為您的應用程式新增功能

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

開始使用 Amplify 託管

為了幫助您了解 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服務頁面啟動。

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

    2. 在頁面底部，找出 [如何開始使用] 區段，然後選擇 [建立新應用程式]。

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

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

    注意

    在您使用 Bitbucket 授權 Amplify 主控台之後，或者 GitLab AWS CodeCommit，Amplify 會從儲存庫提供者擷取存取權杖，但不會將權杖儲存在伺服器上。 AWS Amplify 只會使用安裝在特定儲存庫中的部署金鑰來存取您的儲存庫。

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

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

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

    3. 選擇下一步。

步驟 2：確認構建設置

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

確認應用程式的建置設定

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

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

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

    • 若要建立新角色：

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

    • 若要使用現有角色：

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

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

  3. 選擇下一步。

步驟 3：部署應用程式

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

若要儲存和部署應用程式

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

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

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

注意

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

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

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

若要刪除應用程式

  1. 從「功能表」窗格的「App 設定」選單中，選擇「一般設定」。

  2. 在 [一般設定] 頁面上選擇 [刪除應用程式]。在確認視窗中，輸入delete。然後選擇刪除應用程序。

為您的應用程式新增功能

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

環境變數

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

自訂網域

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

提取請求預覽

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

管理多個環境

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