本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。
本教學課程將逐步引導您從 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 儲存庫中的應用程式
-
開啟 Amplify 控制台
。 -
如果您要在目前區域中部署您的第一個應用程式，預設會從 AWS Amplify服務頁面。
選擇頁面頂端的 [建立新應用程式]。
-
在 [開始使用 Amplify 建置] 頁面上，選擇您的 Git 儲存庫提供者，然後選擇 [下一步]。
對於 GitHub 存儲庫，Amplify 使用應用 GitHub 程序功能來授權 Amplify 訪問權限。如需有關安裝和授權 GitHub應用程式的詳細資訊，請參閱設定 Amplify GitHub 庫的存取。
注意
在您使用 Bitbucket 授權 Amplify 控制台之後， GitLab或 AWS CodeCommit，Amplify 從存儲庫提供程序獲取訪問令牌，但它不會將令牌存儲在 AWS 伺服器。Amplify 只會使用安裝在特定儲存庫中的部署金鑰來存取您的儲存庫。
-
在「新增儲存區域分支」頁面上執行下列動作：
-
選取要連線的存放庫名稱。
-
選取要連線的儲存庫分支名稱。
-
選擇 Next (下一步)。
-
步驟 2：確認構建設置
Amplify 會自動偵測要針對您要部署的分支執行的建置命令順序。在此步驟中，您將檢閱並確認您的組建設定。
確認應用程式的建置設定
-
在 [應用程式設定] 頁面上，找到 [建置設定] 區段。
驗證前端構建命令和構建輸出目錄是否正確。對於此 Next.js 示例應用程序，構建輸出目錄設置為
.next。 -
根據您要建立新角色還是使用現有角色，新增服務角色的程序會有所不同。
-
若要建立新角色：
-
選擇 [建立] 並使用新的服務角色。
-
-
若要使用現有角色：
-
選擇「使用現有角色」。
-
在服務角色清單中，選取要使用的角色。
-
-
-
選擇 Next (下一步)。
步驟 3：部署應用程式
在此步驟中，您將應用程式部署到 AWS 全球內容傳遞網路 (CDN)。
若要儲存和部署應用程式
-
在「檢閱」頁面上，確認您的儲存庫詳細資料和應用程式設定正確無誤。
-
選擇 Save and deploy (儲存並部署)。您的前端組建通常需要 1 到 2 分鐘，但可能會根據應用程式的大小而有所不同。
-
部署完成後，您可以使用
amplifyapp.com預設網域的連結來檢視您的應用程式。
注意
步驟 4：(選擇性) 清理資源
如果您不再需要為教學課程部署的應用程式，可以將其刪除。此步驟協助確保您不會為了未使用的資源而付費。
若要刪除應用程式
-
從導覽窗格的 [應用程式設定] 功能表中，選擇 [一般設定]。
-
在 [一般設定] 頁面上選擇 [刪除應用程式]。
-
在確認視窗中，輸入
delete。然後選擇刪除應用程序。
為您的應用程式新增功能
現在您已將應用程式部署到 Amplify，您可以探索下列可供託管應用程式使用的功能。
- 環境變數
-
應用程式在執行階段通常需要組態資訊 這些組態可以是資料庫連線詳細資訊、API索引鍵或參數。環境變量提供了一種在構建時公開這些配置的方法。如需詳細資訊，請參閱環境變數。
- 自訂網域
-
在本教程中，Amplify 在默認
amplifyapp.com域上為您託管您的應用程序，URL例如https://branch-name.d1m7bkiki6tdw1.amplifyapp.com。將應用程序連接到自定義域時，用戶會看到您的應用程序託管在自定義上URL，例如https://www.example.com。如需詳細資訊，請參閱設定自訂網域。 - 提取請求預覽
-
Web 提取請求預覽可讓團隊在將程式碼合併至生產或整合分支之前，先預覽來自提取要求 (PRs) 的變更。如需詳細資訊，請參閱提取要求的 Web 預覽。
- 管理多個環境
-
若要瞭解 Amplify 如何搭配功能分支和工作 GitFlow 流程以支援多個部署，請參閱功能分支部署和團隊工作流程。
