建立應用程式的後端 - AWS Amplify 託管
為第 2 代應用程式建立後端為第 1 代應用程式建立後端

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

建立應用程式的後端

AWS Amplify 您可以使用部署到的資料、驗證、儲存和前端託管來建置完整堆疊應用程式。 AWS

AWS Amplify Gen 2 引入了 TypeScript基於代碼優先的開發人員體驗，以定義後端。若要瞭解如何使用 Amplify 第 2 代建置後端並將後端連接到您的應用程式，請參閱 Amplify 文件中的建置和連接後端。

如果您正在尋找使用 CLI 和 Amplify Studio 為第 1 代應用程式建置後端的文件，請參閱第 1 代 Amplify 文件中的建置和連接後端。

為第 2 代應用程式建立後端

如需指導您完成使用 TypeScript基於後端建立 Amplify Gen 2 完整堆疊應用程式的步驟的教學課程，請參閱 A mplify 文件中的入門。

為第 1 代應用程式建立後端

在本教學課程中，您將使用「Amplify」來設定完整堆疊 CI/CD 工作流程。您將部署一個前端應用程序來 Amplify 託管。然後，您將創建使用 Amplify 工作室後端。最後，您將雲端後端連接到前端應用程序。

必要條件

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

註冊一個 AWS 帳戶

如果您還不是 AWS 客戶，則需要 AWS 帳戶按照在線說明創建一個。註冊可讓您存取 Amplify 和其他可搭配應用程式使用的 AWS 服務。

創建一個 Git 存儲庫

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

安裝 Amplify 命令列介面 (CLI)

如需指示，請參閱擴大架構文件中的安裝 Amplify CLI。

步驟 1：部署前端

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

如果你需要創建一個新的前端應用程序來用於這個例子，你可以按照創建 React 應用程序文檔中的創建反應應用程序說明進行操作。

部署前端應用程式

  1. 登入 AWS Management Console 並開啟 Amplify 大控制台。

  2. 在 [所有應用程式] 頁面上，選擇 [新增應用程式]，然後選取右上角的 [主機 Web 應用程式]

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

  4. Amplify 授權訪問您的 git 存儲庫。對於 GitHub 存儲庫，Amplify 現在使用應用 GitHub 程序功能來授權 Amplify 訪問權限。

    有關安裝和授權 GitHub 應用程序的更多信息，請參閱設定 Amplify GitHub 庫的存取。

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

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

    2. 在「分支」清單中，選取要連線的存放庫分支名稱。

    3. 選擇下一步。

  6. 在 [設定組建設定] 頁面上，選擇 [下一步]。

  7. 在「複查」頁面上，選擇「儲存並部署」。部署完成後，您可以在amplifyapp.com預設網域上檢視您的應用程式。

注意

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

步驟 2：建立後端

現在，您已經將前端應用程序部署到 Amplify 託管，您可以創建一個後端。使用下列指示建立具有簡單資料庫和 GraphQL API 端點的後端。

若要建立後端

  1. 登入 AWS Management Console 並開啟 Amplify 大控制台。

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

  3. 在應用程式首頁上，選擇「後端環境」標籤，然後選擇「開始使用」。這會啟動預設暫存環境的設定程序。

  4. 設定完成後，選擇啟動工作室以存取安培工作室中的預 Amplify 後端環境。

Amplify Studio 是一個可視化界面來創建和管理您的後端，並加速您的前端 UI 開發。如需有關 Amplify 工作室的詳細資訊，請參閱 Amplify 工作室文件。

使用下列指示建立使用 Amplify Studio 視覺化後端產生器介面的簡單資料庫。

建立資料模型

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

  2. 在 [資料建模] 頁面上，選擇 [新增模型]。

  3. 對於標題，請輸入Todo。

  4. 選擇 [新增欄位]。

  5. 對於 「欄位名稱」，輸入Description。

    下列螢幕擷取畫面是資料模型在設計師中的外觀範例。

    用於創建數據模型的 Amplify 工作室用戶界面。

  6. 選擇 [儲存並部署]。

  7. 返回 Amplify 主控台，暫存環境部署將會進行中。

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

步驟 3：將後端 Connect 到前端

現在，您已經部署了前端並創建了包含數據模型的雲端後端，您需要將它們連接起來。使用下列指示，透過 Amplify CLI 將您的後端定義拉到本機應用程式專案。

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

  1. 打開終端窗口並導航到本地項目的根目錄。

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

    amplify pull --appId abcd1234 --envName staging

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

現在，您可以設定建置程序，將後端新增至持續部署工作流程。使用以下說明將前端分支與 Amplify 主機控制台中的後端連接。

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

  1. 在應用程序首頁上，選擇託管環境選項卡。

  2. 找到主分支，然後選擇 「編輯」。

    Amplify 主控台中分支的「編輯」連結位置。

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

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

  4. 接下來，您必須設定服務角色，以授與 Amplify 變更應用程式後端所需的權限。您可以使用現有的服務角色，也可以建立新的服務角色。如需說明，請參閱新增服務角色。

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

  6. 要完成將登台後端連接到前端應用程序的主分支，請執行項目的新構建。

    執行以下任意一項：

    • 從您的 git 存儲庫中，推送一些代碼以在 Amplify 控制台中啟動構建。

    • 在 Amplify 主控台中，導覽至應用程式的組建詳細資料頁面，然後選擇 [重新部署此版本]。

後續步驟

設定功能分支部署

遵循我們建議的工作流程，在多個後端環境中設定功能分支部署。

在 Amplify 工作室中創建前端 UI

使用 Studio 使用一組 UI 組件構建您的前端 ready-to-use UI，然後將其連接到您的應用程序後端。如需詳細資訊和教學課程，請參閱擴增架構文件中的 Amplify Studio 的使用者指南。