使用 AWS CloudFormation 將 Bitbucket 儲存庫與 AWS Amplify 整合 - AWS 方案指引
Summary先決條件和限制架構工具史詩相關資源附件

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

使用 AWS CloudFormation 將 Bitbucket 儲存庫與 AWS Amplify 整合

由 Alwin Abraham (AWS) 建立

Summary

AWS Amplify 可協助您快速部署和測試靜態網站，而無需設定通常需要的基礎設施。如果您的組織想要使用 Bitbucket 進行來源控制，無論是遷移現有的應用程式程式碼還是建立新的應用程式，都可以部署此模式的方法。透過使用 AWS CloudFormation 自動設定 Amplify，您可以查看所使用的組態。

此模式說明如何使用 AWS CloudFormation 將 Bitbucket 儲存庫與 AWS Amplify 整合，以建立前端持續整合和持續部署 (CI/CD) 管道和部署環境。模式的方法表示您可以為可重複的部署建置 Amplify 前端管道。

先決條件和限制

先決條件

  • 作用中的 Amazon Web Services (AWS) 帳戶

  • 具有管理員存取權的作用中 Bitbucket 帳戶

  • 存取使用 cURL 或 Postman 應用程式的終端機

  • 熟悉 Amplify

  • 熟悉 AWS CloudFormation

  • 熟悉 YAML 格式的檔案

架構

Diagram showing user interaction with Bitbucket repository connected to AWS Amplify in AWS 雲端 region.

技術堆疊

  • Amplify

  • AWS CloudFormation

  • Bitbucket

工具

  • AWS Amplify – Amplify 可協助開發人員開發和部署雲端驅動的行動和 Web 應用程式。

  • AWS CloudFormation – AWS CloudFormation 是一項服務，可協助您建立和設定 AWS 資源的模型，以減少管理這些資源的時間，並有更多時間專注於在 AWS 中執行的應用程式。

  • Bitbucket – Bitbucket 是專為專業團隊設計的 Git 儲存庫管理解決方案。它可讓您集中管理 Git 儲存庫、協作您的原始程式碼，並引導您完成開發流程。

Code

bitbucket-amplify.yml 檔案 （已連接） 包含此模式的 AWS CloudFormation 範本。

史詩

任務描述所需的技能
（選用） 建立 Bitbucket 儲存庫。

  1. 登入您的 Bitbucket 帳戶並建立新的儲存庫。如需詳細資訊，請參閱 Bitbucket 文件中的建立 Git 儲存庫。 

  2. 記錄工作區的名稱。

注意

您也可以使用現有的 Bitbucket 儲存庫。

DevOps 工程師
開啟工作區設定。

  1. 開啟工作區，然後選擇儲存庫索引標籤。

  2. 選擇您要與 Amplify 整合的儲存庫。

  3. 選擇儲存庫名稱上方的工作區名稱。

  4. 在側邊列上，選擇設定。

DevOps 工程師
建立 OAuth 取用者。

  1. 在應用程式和功能區段中，選擇 OAuth 取用者，然後選擇新增取用者。

  2. 輸入消費者的名稱，例如 Amplify Integration。

  3. 輸入回呼 URL。雖然此欄位是必要的輸入，但不會用來完成整合，因此值可能是 http://localhost:3000

  4. 勾選此為私有取用者的方塊。

  5. 選擇下列許可：

    • 專案 – Read

    • 儲存庫 – Admin

    • 提取請求 – Read

    • Webhook - Read和 Write

  6. 保留所有其他欄位的預設選項，然後選擇提交。

  7. 記錄產生的金鑰和秘密。

DevOps 工程師
取得 OAuth 存取權杖。

  1. 開啟終端機視窗並執行下列命令： 

curl -X POST -u "KEY:SECRET" https://bitbucket.org/site/oauth2/access_token -d grant_type=client_credentials 

重要

SECRET 將 KEY和 取代為您先前記錄的金鑰和秘密。 

2. 不使用引號記錄存取字符。字符僅在有限時間內有效，預設時間為兩小時。您必須在此時間範圍內執行 AWS CloudFormation 範本。

DevOps 工程師
任務描述所需的技能
下載 AWS CloudFormation 範本。

下載 bitbucket-amplify.yml AWS CloudFormation 範本 （已連接）。除了 Amplify 專案和分支之外，此範本還會在 Amplify 中建立 CI/CD 管道。

建立和部署 AWS CloudFormation 堆疊。

  1. 在您要部署的 AWS 區域中登入 AWS 管理主控台，然後開啟 AWS CloudFormation 主控台。 

  2. 選擇建立堆疊 （使用新資源），然後選擇上傳範本檔案。 

  3. 上傳 bitbucket-amplify.yml 檔案。

  4. 選擇下一步，輸入堆疊名稱，然後輸入下列參數：

    • 存取權杖：貼上您先前建立的 OAuth 存取權杖。

    • 儲存庫 URL：新增 Bitbucket 專案儲存庫的 URL。URL 通常採用下列格式： https://bitbucket.org/<WORKSPACE_NAME>/<REPO_NAME>

    • 分支名稱：這必須符合 Bitbucket 儲存庫中的分支名稱。當您執行 AWS CloudFormation 堆疊時，此分支不需要存在，但需要它才能將程式碼部署到環境。

    • 專案名稱：這是要與 Amplify 專案建立關聯的名稱。

5. 選擇下一步，然後選擇建立堆疊。

DevOps 工程師
任務描述所需的技能
將程式碼部署到儲存庫中的分支。

  1. 執行下列命令來複製 Bitbucket 儲存庫： git clone https://bitbucket.org/<WORKSPACE_NAME>/<REPO_NAME>

  2. 查看執行 AWS CloudFormation 指令碼時所使用的分支名稱。若要建立和查看新的分支，請執行 git checkout -b <BRANCH_NAME>命令。若要查看現有的分支，請執行 git checkout <BRANCH_NAME>命令

  3. 將程式碼遞交至分支，並透過執行 git commit和 git push命令將其推送至遠端分支。

  4. Amplify 接著會建置和部署應用程式。

如需詳細資訊，請參閱 Bitbucket 文件中的基本 Git 命令。 

應用程式開發人員

相關資源

身分驗證方法 (Atlassian 文件）

附件

若要存取與本文件相關聯的其他內容，請解壓縮下列檔案： attachment.zip