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

# 將 Next.js 應用程式部署至 Amplify 託管
<a name="getting-started-next"></a>

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

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

**註冊 AWS 帳戶**  
如果您還不是 AWS 客戶，則需要遵循線上說明來[建立 AWS 帳戶](https://portal.aws.amazon.com/billing/signup#/start/email)。註冊可讓您存取 Amplify 和其他可與應用程式搭配使用 AWS 的服務。

**建立應用程式**  
使用 Next.js 文件中的 [create-next-app](https://nextjs.org/docs/app/api-reference/create-next-app) 說明，建立用於本教學課程的基本 *Next.js 應用程式。*

**建立 Git 儲存庫**  
Amplify 支援 GitHub、Bitbucket、GitLab 和 AWS CodeCommit。將您的`create-next-app`應用程式推送到您的 Git 儲存庫。

## 步驟 1：連接 Git 儲存庫
<a name="step-1-connect-repository"></a>

在此步驟中，您將 Git 儲存庫中的 Next.js 應用程式連線至 Amplify Hosting。

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

1. 開啟 [Amplify 主控台](https://console.aws.amazon.com/amplify/)。

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

   選擇頁面頂端的**部署應用程式**。

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

   對於 GitHub 儲存庫，Amplify 會使用 GitHub 應用程式功能來授權 Amplify 存取。如需安裝和授權 GitHub 應用程式的詳細資訊，請參閱[設定對 GitHub 儲存庫的 Amplify 存取權](setting-up-GitHub-access.md)。
**注意**  
使用 Bitbucket、GitLab 或 授權 Amplify 主控台之後 AWS CodeCommit，Amplify 會從儲存庫提供者擷取存取字符，但*不會將字符存放在* AWS 伺服器上。Amplify 只會使用安裝在特定儲存庫中的部署金鑰來存取您的儲存庫。

1. 在**新增儲存庫分支**頁面上，執行下列動作：

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

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

   1. 選擇**下一步**。

## 步驟 2：確認建置設定
<a name="step-2a-confirm-build-settings-for-the-front-end"></a>

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

**確認應用程式的建置設定**

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

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

1. 新增服務角色的程序會因您要建立新角色或使用現有角色而有所不同。
   + 若要建立新的角色：

     1. 選擇**建立並使用新的服務角色**。
   + 若要使用現有角色：

     1. 選擇**使用現有角色**。

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

1. 選擇**下一步**。

## 步驟 3：部署應用程式
<a name="step-3-save-and-deploy"></a>

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

**儲存和部署應用程式**

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

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

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

**注意**  
為了增強 Amplify 應用程式的安全性，在[公有字尾清單 (PSL)](https://publicsuffix.org/) 中註冊 *amplifyapp.com* 網域。為了提高安全性，如果您需要在 Amplify 應用程式的預設網域名稱中設定敏感 Cookie，建議您使用具有`__Host-`字首的 Cookie。此做法將有助於保護您的網域免受跨站請求偽造 (CSRF) 攻擊。如需更多資訊，請參閱 Mozilla 開發人員網路中的[設定 Cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes) 頁面。

## 步驟 4：（選用） 清除資源
<a name="step-4-clean-up"></a>

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

**刪除應用程式**

1. 從導覽窗格中**的應用程式設定**選單中，選擇**一般設定**。

1. 在**一般設定**頁面上，選擇**刪除應用程式**。

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

## 將功能新增至您的應用程式
<a name="next-steps"></a>

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

**環境變數**  
應用程式通常需要在執行時間取得組態資訊。這些組態可以是資料庫連線詳細資訊、API 金鑰或參數。環境變數提供在建置時公開這些組態的方法。如需詳細資訊，請參閱[環境變數](environment-variables.md)。

**自訂網域**  
在本教學課程中，Amplify 會將您的應用程式託管在具有 URL 的預設`amplifyapp.com`網域上，例如 `https://branch-name.d1m7bkiki6tdw1.amplifyapp.com`。當您將應用程式連線至自訂網域時，使用者會看到您的應用程式託管在自訂 URL 上，例如 `https://www.example.com`。如需詳細資訊，請參閱[設定自訂網域](custom-domains.md)。

**提取請求預覽**  
Web 提取請求預覽可讓團隊預覽提取請求 (PRs) 的變更，然後再將程式碼合併到生產或整合分支。如需詳細資訊，請參閱[提取請求的 Web 預覽](pr-previews.md)。

**管理多個環境**  
若要了解 Amplify 如何與特徵分支和 GitFlow 工作流程搭配使用以支援多個部署，請參閱[特徵分支部署和團隊工作流程](multi-environments.md)。