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

# 為 Gen 1 應用程式建立後端
<a name="build-backend-Gen1"></a>

在本教學課程中，您將使用 Amplify 設定完整堆疊 CI/CD 工作流程。您將部署前端應用程式到 Amplify 託管。然後，您將使用 Amplify Studio 建立後端。最後，您將將雲端後端連線至前端應用程式。

## 先決條件
<a name="fullstack-sample-prerequisites"></a>

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

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

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

**安裝 Amplify 命令列界面 (CLI)**  
如需說明，請參閱 [Amplify Framework 文件中的安裝 Amplify CLI](https://docs.amplify.aws/gen1/react/start/project-setup/prerequisites/#install-the-amplify-cli)。 **

## 步驟 1：部署前端
<a name="step-1-deploy-frontend"></a>

如果您在您想要用於此範例的 git 儲存庫中有現有的前端應用程式，您可以繼續執行部署前端應用程式的指示。

如果您需要建立新的前端應用程式以用於此範例，您可以遵循[建立 React 應用程式](https://create-react-app.dev/docs/getting-started)*文件中的建立 React 應用程式*說明。

**部署前端應用程式**

1. 登入 AWS 管理主控台 並開啟 [Amplify 主控台](https://console.aws.amazon.com/amplify/)。

1. **在所有應用程式**頁面上，選擇**新增應用程式**，然後選擇右上角的**託管 Web 應用程式**。

1. 選取您的 GitHub、Bitbucket、GitLab 或 AWS CodeCommit 儲存庫提供者，然後選擇**繼續**。

1. Amplify 授權存取您的 git 儲存庫。對於 GitHub 儲存庫，Amplify 現在使用 GitHub 應用程式功能來授權 Amplify 存取。

   如需安裝和授權 GitHub 應用程式的詳細資訊，請參閱 [設定對 GitHub 儲存庫的 Amplify 存取權](setting-up-GitHub-access.md)。

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

   1. 在**最近更新的儲存庫**清單中，選取要連線的儲存庫名稱。

   1. 在**分支**清單中，選取要連線的儲存庫分支名稱。

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

1. 在**設定建置設定**頁面上，選擇**下一步**。

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) 頁面。

## 步驟 2：建立後端
<a name="step-2-create-backend"></a>

現在您已將前端應用程式部署至 Amplify Hosting，您可以建立後端。使用下列指示來建立具有簡單資料庫和 GraphQL API 端點的後端。

**建立後端**

1. 登入 AWS 管理主控台 並開啟 [Amplify 主控台](https://console.aws.amazon.com/amplify/)。

1. **在所有應用程式**頁面上，選取您在*步驟 1 *中建立的應用程式。

1. 在應用程式首頁上，選擇**後端環境**索引標籤，然後選擇**開始使用**。這會啟動預設**預備**環境的設定程序。

1. 設定完成後，選擇**啟動 Studio** 以存取 Amplify Studio 中的**預備**後端環境。

Amplify Studio 是一種視覺化界面，可用來建立和管理後端，並加速前端 UI 開發。如需 Amplify Studio 的詳細資訊，請參閱 [Amplify Studio 文件](https://docs.amplify.aws/gen1/react/tools/console/)。

使用以下指示，使用 Amplify Studio 視覺化後端建置器界面建立簡單的資料庫。

**建立資料模型**

1. 在應用程式的**預備**環境首頁上，選擇**建立資料模型**。這會開啟資料模型設計工具。

1. 在**資料建模**頁面上，選擇**新增模型**。

1. 針對標題，輸入 **Todo**。

1. 選擇**新增欄位**。

1. 對於**欄位名稱**，輸入 **Description**。

   下列螢幕擷取畫面是資料模型在設計工具中的外觀範例。  
![\[用於建立資料模型的 Amplify Studio UI。\]](http://docs.aws.amazon.com/zh_tw/amplify/latest/userguide/images/amplify-deploy-backend-1.png)

1. 選擇**儲存並部署**。

1. 返回 Amplify 託管主控台，**預備**環境部署將正在進行中。

在部署期間，Amplify Studio 會在後端建立所有必要 AWS 的資源，包括用於存取資料的 AWS AppSync GraphQL API 和用於託管 Todo 項目的 Amazon DynamoDB 資料表。Amplify 使用 CloudFormation 來部署後端，這可讓您將後端定義儲存為infrastructure-as-code。

## 步驟 3：將後端連接到前端
<a name="step-3-connect-backend-to-frontend"></a>

現在您已部署前端並建立包含資料模型的雲端後端，您需要連接它們。使用下列指示，透過 Amplify CLI 將後端定義向下提取至本機應用程式專案。

**將雲端後端連線至本機前端**

1. 開啟終端機視窗並導覽至本機專案的根目錄。

1. 在終端機視窗中執行下列命令，將紅色文字取代為專案的唯一應用程式 ID 和後端環境名稱。

   ```
   amplify pull --appId abcd1234 --envName staging
   ```

1. 依照終端機視窗中的指示完成專案設定。

現在您可以設定建置程序，將後端新增至連續部署工作流程。使用下列指示，在 Amplify 託管主控台中將前端分支與後端連接。

**連接前端應用程式分支和雲端後端**

1. 在應用程式首頁上，選擇**託管環境**索引標籤。

1. 找到**主要**分支，然後選擇**編輯**。  
![\[Amplify 主控台中分支的編輯連結位置。\]](http://docs.aws.amazon.com/zh_tw/amplify/latest/userguide/images/amplify_edit_backend_alternate.png)

1. 在**編輯目標後端**視窗中，針對**環境**，選取要連線的後端名稱。在此範例中，選擇您在*步驟 2 *中建立的**預備**後端。

   預設會啟用全堆疊 CI/CD。取消勾選此選項可關閉此後端的完整堆疊 CI/CD。關閉完全堆疊 CI/CD 會導致應用程式以*僅提取*模式執行。在建置時，Amplify 只會自動產生`aws-exports.js`檔案，而不會修改您的後端環境。

1. 接著，您必須設定服務角色，為 Amplify 提供變更應用程式後端所需的許可。您可以使用現有的服務角色或建立新的服務角色。如需說明，請參閱[新增具有部署後端資源許可的服務角色](amplify-service-role.md)。

1. 新增服務角色後，返回**編輯目標後端**視窗，然後選擇**儲存**。

1. 若要完成將**預備**後端連接到前端應用程式**的主要**分支，請執行專案的新建置。

   執行以下任意一項：
   + 從您的 git 儲存庫中，推送一些程式碼以在 Amplify 主控台中啟動組建。
   + 在 Amplify 主控台中，導覽至應用程式的建置詳細資訊頁面，然後選擇**重新部署此版本**。

## 後續步驟
<a name="next-steps-set-up-feature-branch-deployments"></a>

### 設定功能分支部署
<a name="set-up-feature-branch-deployments"></a>

依照我們建議的工作流程，[設定具有多個後端環境的功能分支部署](https://docs.aws.amazon.com/amplify/latest/userguide/multi-environments.html#team-workflows-with-amplify-cli-backend-environments)。

### 在 Amplify Studio 中建立前端 UI
<a name="create-studio-ui-components"></a>

使用 Studio 以一組ready-to-use UI 元件建置您的前端 UI，然後將其連接到您的應用程式後端。如需詳細資訊和教學課程，請參閱 [Amplify Framework 文件中的 Amplify Studio](https://docs.amplify.aws/gen1/react/tools/console/) 使用者指南。 **