開始使用 CodeCatalyst 來源儲存庫和單頁應用程式藍圖 - Amazon CodeCatalyst

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

開始使用 CodeCatalyst 來源儲存庫和單頁應用程式藍圖

請遵循本教學中的步驟,了解如何使用 Amazon 中的來源儲存庫 CodeCatalyst。

開始在 Amazon 中使用來源儲存庫的最快方法 CodeCatalyst 是使用範本建立專案。當您使用範本建立專案時,會為您建立資源,包括包含範例程式碼的來源儲存庫。您可以使用此儲存庫和程式碼範例來學習如何:

  • 檢視專案的來源儲存庫並瀏覽其內容

  • 使用新的分支創建一個開發環境,您可以在其中處理代碼

  • 更改文件,並提交並推送更改

  • 建立提取要求,並與其他專案成員一起檢閱您的程式碼變更

  • 查看項目的工作流程自動構建並測試拉取請求的源分支中的更改

  • 將來源分支中的變更合併到目標分支,並關閉提取要求

  • 查看自動構建和部署的合併更改

為了充分利用本教程,請邀請其他人加入您的項目,以便您可以一起處理提取請求。您也可以探索中的其他功能 CodeCatalyst,例如建立問題並將問題與提取要求產生關聯,或是設定通知並在相關工作流程執行時接收警示。如需完整的探索 CodeCatalyst,請參閱入門教學課程

使用藍圖建立專案

創建一個項目是能夠一起工作的第一步。您可以使用藍圖來建立專案,這也會建立包含範例程式碼和工作流程的來源儲存庫,以便在您變更程式碼時自動建置和部署程式碼。在本教學課程中,我們將引導您完成使用單頁應用程式藍圖建立的專案,但是您可以針對任何具有來源存放庫的專案遵循程序。如果在建立專案時沒有 IAM 角色,請務必選擇 IAM 角色或新增 IAM 角色。建議您針對此專案使用CodeCatalystWorkflowDevelopmentRole-spaceName服務角色。

如果您已經有一個項目,則可以跳到檢視專案的儲存庫

注意

只有具有 Space 管理員或超級使用者角色的使用者才能在中建立專案 CodeCatalyst。如果您沒有這個角色,而且您需要一個專案來進行本教學課程,請要求具有這些角色之一的人為您建立專案,並將您加入至已建立的專案。如需詳細資訊,請參閱 授予使用者角色的存取權

使用藍圖建立專案
  1. 在主 CodeCatalyst 控台中,導覽至您要建立專案的空間。

  2. 在空間儀表板上,選擇建立專案

  3. 選擇從藍圖開始。

    提示

    您可以選擇新增藍圖,方法是將 Amazon Q 提供您的專案需求,讓 Amazon Q 向您建議藍圖。如需詳細資訊,請參閱 在建立專案或新增功能時,使用 Amazon Q 選擇藍圖使用 Amazon Q 建立專案或使用藍圖新增功能時的最佳實務。此功能僅在美國西部 (奧勒岡) 區域提供。

    此功能需要為空間啟用生成 AI 功能。如需詳細資訊,請參閱管理生成 AI 功能

  4. 從藍圖或空間CodeCatalyst 藍圖索引標籤中選擇藍圖,然後選擇 [下一步]。

  5. 在「為您的專案命名」下,輸入您要指派給專案的名稱及其相關聯的資源名稱。名稱在您的空間中必須是唯一的。

  6. (選擇性) 依預設,藍圖建立的原始程式碼會儲存在存放 CodeCatalyst 庫中。或者,您可以選擇將藍圖的原始程式碼儲存在第三方存放庫中。如需詳細資訊,請參閱 為具有擴充功能的專案新增功能 CodeCatalyst

    重要

    CodeCatalyst 不支持檢測鏈接存儲庫的默認分支中的更改。若要變更連結存放庫的預設分支,您必須先將其與之取消連結 CodeCatalyst,變更預設分支,然後再次連結。如需詳細資訊,請參閱 鏈接 GitHub 存儲庫,Bitbucket 存儲庫, GitLab 項目存儲庫和 Jira 項目 CodeCatalyst

    最佳作法是在連結存放庫之前,務必確定您擁有最新版本的擴充功能。

    根據您要使用的第三方儲存庫提供者,執行下列其中一項作業:

    • GitHub 存儲庫:Connect 一個 GitHub 帳戶。

      選擇 [進階] 下拉式功能表,選擇 GitHub做為存放庫提供者,然後選擇要儲存藍圖建立之原始程式碼的 GitHub 帳戶。

      注意

      如果您要連接 GitHub 帳戶,則必須建立個人連線,以便在身分識別與身分之間建立 CodeCatalyst 身 GitHub 分對應。如需詳細資訊,請參閱 個人連接透過個人連線存取 GitHub 資源

    • 比特桶存儲庫:Connect 一個比特桶工作區。

      選擇 [進階] 下拉式功能表,選擇 Bitbucket 做為儲存庫提供者,然後選擇您要儲存藍圖建立之原始程式碼的 Bitbucket 工作區。

    • GitLab 儲存庫:Connect 使 GitLab 用者。

      選擇 [進階] 下拉式功能表,選擇 GitLab做為存放庫提供 GitLab 者,然後選擇要儲存藍圖建立之原始程式碼的使用者。

  7. 在 [專案資源] 下,設定藍圖參數。視藍圖而定,您可能可以選擇命名來源存放庫名稱。

  8. (選擇性) 若要根據您選取的專案參數來檢視含有更新的定義檔,請從「產生專案預覽」中選擇「檢視程式碼」或「檢視工作流程」。

  9. (選擇性) 從藍圖的卡片中選擇檢詳細資料以檢視有關藍圖的特定詳細資料,例如藍圖架構概觀、所需的連線和權限,以及藍圖建立的資源類型。

  10. 選擇建立專案

只要您建立專案或接受專案邀請並完成登入程序,專案概觀頁面就會開啟。新專案的專案概觀頁面不包含未決的問題或提取請求。您可以選擇性地選擇建立問題,並將其指定給您自己。您也可以選擇邀請其他人加入您的專案。如需詳細資訊,請參閱 在中建立問題 CodeCatalyst邀請使用者加入專案

檢視專案的儲存庫

身為專案的成員,您可以檢視專案的來源儲存庫。您也可以選擇建立其他儲存庫。如果具有 S pace 系統管理員角色的使用者已安裝並設定GitHub 儲存庫Bitbucket 儲存庫GitLab 儲存庫擴充功能,您也可以在 GitHub 帳戶、Bitbucket 工作區或為擴充功能設定的 GitLab 使用者中新增第三方儲存庫的連結。如需詳細資訊,請參閱 建立來源儲存庫快速入門:在中安裝擴充功能、連接提供者和連結資源 CodeCatalyst

注意

對於使用單頁應用程式藍圖建立的專案,包含範例程式碼的來源存放庫的預設名稱為 sp a-app。

若要導覽至專案的來源儲存庫
  1. 導覽至您的專案,然後執行下列其中一項作業:

    • 在專案的摘要頁面上,從清單中選擇所需的存放庫,然後選擇 [檢視存放庫]。

    • 在瀏覽窗格中,選擇 [程式碼],然後選擇 [原始碼儲存庫]。在來源儲存庫中,從清單中選擇存放庫的名稱。您可以在篩選列中輸入部分存放庫名稱來篩選儲存庫清單。

  2. 在儲存區域的首頁上,檢視儲存區域的內容以及相關資源的相關資訊,例如提取要求數目和工作流程。依預設,會顯示預設分支的內容。您可以從下拉式清單中選擇不同的分支來變更檢視。

儲存區域的簡介頁面包含針對此儲存區域及其檔案分支所設定之工作流程和提取要求的相關資訊。如果您剛剛建立專案,建置、測試和部署程式碼的初始工作流程仍會繼續執行,因為這些工作流程需要幾分鐘的時間才能完成。您可以選擇「相關」工作流程下的數字來查看相關的工作流程及其狀態,但這樣會在 CI/ CD 中打開「工作流程」頁。在本教學課程中,請停留在概觀頁面,並探索存放庫中的程式碼。檔案內容會呈現在儲存庫README.md檔案下方的此頁面上。在檔案中,會顯示預設分支的內容。您可以更改文件視圖以顯示另一個分支的內容(如果有)。該文件.codecatalyst夾包含用於項目的其他部分,如工作流 YAML 文件的代碼。

若要檢視資料夾的內容,請選擇資料夾名稱旁邊的箭頭將其展開。例如,選擇旁邊的箭頭src來檢視該資料夾中包含的單頁 Web 應用程式的檔案。若要檢視檔案的內容,從清單中選擇檔案。這將打開查看文件,您可以在其中瀏覽多個文件的內容。您也可以在主控台中編輯單一檔案,但若要編輯多個檔案,您必須建立開發環境。

建立開發環境

您可以在 Amazon CodeCatalyst 主控台的來源儲存庫中新增和變更檔案。不過,若要有效地處理多個檔案和分支,我們建議您使用開發環境或將存放庫複製到您的本機電腦。在本教程中,我們將創建一個名為的分支 AWS Cloud9 開發環境develop。您可以選擇不同的分支名稱,但是藉由命名分支develop,當您稍後在本教學課程中建立提取要求時,會自動執行工作流程來建置和測試您的程式碼。

提示

如果您決定在本機複製儲存庫,而非使用開發環境,或是除了使用開發環境之外,請確定您的本機電腦上有 Git,或者 IDE 包含 Git。如需詳細資訊,請參閱 設定使用來源儲存庫

使用新分支建立開發環境
  1. 請在以下位置開啟 CodeCatalyst 主控台。 https://codecatalyst.aws/

  2. 導航到要創建開發環境的項目。

  3. 從專案的來源儲存庫清單中選擇儲存庫的名稱。或者,在導覽窗格中,選擇 [程式碼]、選擇 [原始碼儲存庫],然後選擇您要建立開發環境的存放庫。

  4. 在儲存庫首頁上,選擇建立開發環境

  5. 從下拉式功能表中選擇支援的 IDE。如需詳細資訊,請參閱支援開發環境的整合式開發環境

  6. 選擇要複製的存放庫,選擇在新分支中工作,在「分支名稱」欄位中輸入分支名稱,然後從「建立分支來源」下拉式功能表中選擇要從中建立新分支的分支。

  7. 選擇性地新增開發環境的別名。

  8. 您也可以選擇 [開發環境] 設定編輯按鈕,以編輯開發環境的運算、儲存或逾時設定。

  9. 選擇建立。建立您的開發環境時,開發環境狀態欄會顯示 [開始],而且建立開發環境後,狀態欄會顯示 [執行中]。將在您選擇的 IDE 中打開一個新選項卡,並顯示您的開發環境。您可以編輯代碼並提交和推送更改。

建立開發環境後,您可以編輯檔案、提交變更,並將變更推送至test分支。在本教學課程中,編輯src資料夾中App.tsx檔案中<p>標籤之間的內容,以變更網頁上顯示的文字。提交並推送您的更改,然後返回到選 CodeCatalyst 項卡。

從 AWS Cloud9 開發環境中進行和推送更改

  1. 在中 AWS Cloud9,展開側邊導覽功能表以瀏覽檔案。展src開並開啟App.tsx

  2. 變更<p>標籤內的文字。

  3. 儲存檔案,然後使用 Git 選單提交並推送您的變更。或者,在終端機視窗中,使用和git push指令提交git commit並推送變更。

    git commit -am "Making an example change" git push
    提示

    在成功運行 Git 命令之前,您可能需要將終端中的目錄更改為 Git 存儲庫目錄。

建立提取請求

您可以使用提取請求協同檢閱程式碼變更,以瞭解小幅變更或修正、主要新增功能或發行軟體的新版本。在本教程中,您將創建一個提取請求來查看與分支相比,對測試分支所做的更改。在使用範本建立的專案中建立提取要求,也會啟動其關聯工作流程的執行 (如果有的話)。

若要建立提取請求
  1. 導航到您的項目。

  2. 執行以下任意一項:

    • 在瀏覽窗格中,選擇 [程式],選擇 [提取要求],然後選擇 [建立提取要求]。

    • 在儲存區域首頁上,選擇 [他],然後選擇 [建立提取要求]。

    • 在專案頁面上,選擇 [建立提取要求]。

  3. 源存儲庫中,確保指定的源存儲庫是包含提交代碼的存儲庫。僅當您未從存放庫的主頁面建立提取要求時,此選項才會顯示。

  4. 在「目的地」分支中,選擇要在檢閱程式碼之後將其合併到的分支。

  5. 原始碼分支中,選擇包含已提交程式碼的分支。

  6. 提取請求標題中,輸入一個標題,以幫助其他用戶了解需要審查的內容以及原因。

  7. (選擇性) 在提取要求說明中,提供問題連結或變更說明等資訊。

    提示

    您可以選擇 [為我撰寫說明], CodeCatalyst 自動產生提取要求中所包含變更的描述。您可以在將自動產生的描述新增至提取請求後,對其進行變更。

    此功能需要為空間啟用生成 AI 功能,而且連結儲存庫中的提取要求無法使用。如需詳細資訊,請參閱管理生成 AI 功能

  8. (選擇性) 在問題中,選擇「連結問題」,然後從清單中選擇問題或輸入其 ID。若要取消連結問題,請選擇「取消連結」圖示。

  9. (選擇性) 在 [必要的複查者] 中,選擇 [新增必要的審核者]。從專案成員清單中選擇要新增的專案成員。必要的審核者必須先核准變更,才能將提取請求合併到目的地分支。

    注意

    您無法同時將審核者新增為必要審核者和選擇性複查者。您無法將自己新增為審核者。

  10. (選擇性) 在 [選擇性複查者] 中,選擇 [新增選用複查者]。從專案成員清單中選擇要新增的專案成員。選用審核者不需要核准變更作為需求,才能將提取請求合併到目的地分支中。

  11. 查看分支之間的差異。提取請求中顯示的差異在於源分支中的修訂版本和合併基礎之間的更改,這是在提取請求創建時目的地分支的頭部提交。如果沒有顯示任何更改,則分支可能相同,或者您可能已經為源和目標選擇了相同的分支。

  12. 當您滿意提取要求包含您要檢閱的程式碼和變更時,請選擇 [建立]。

    注意

    建立提取請求之後,您可以新增註解。註解可以新增至提取請求或檔案中的個別行,以及整個提取請求。您可以使用 @符號後面接到檔案名稱來新增資源連結,例如檔案。

您可以選擇要,然後複查「工作流程執行」下「提取請求明細」區域中的資訊,來檢視建立此提取請求所開始之相關聯工作流程的相關資訊。若要檢視工作流程執行,請選擇執行。

提示

如果您將分支命名為其他名稱develop,則工作流程將不會自動運行以構建和測試您的更改。如果您想要進行設定,請編輯工onPullRequestBuildAndTest作流程的 YAML 檔案。如需詳細資訊,請參閱 建立工作流程

您可以對此提取請求發表評論,並要求其他項目成員對其進行評論。您也可以選擇新增或變更選用或必要的審核者。您可以選擇對儲存庫的來源分支進行更多變更,並查看這些已確認的變更如何為提取要求建立修訂版本。如需詳細資訊檢閱提取要求,請參閱更新提取請求在 Amazon 中使用提取請求查看代碼 CodeCatalyst、、和檢視工作流程執行狀態與詳細

合併提取請求

一旦提取請求經過審核並獲得必要審核者的核准,您就可以將其來源分支合併到 CodeCatalyst主控台中的目的地分支。合併提取要求也會透過與目標分支相關聯的任何工作流程開始執行變更。在本教程中,您將合併測試分支到 main,這將啟動onPushToMainDeployPipeline工作流的運行。

若要合併提取要求 (主控台)
  1. 在提取請求中,選擇您在上一步中建立的提取請求。在提取請求中,選擇「合併」。

  2. 從提取請求的可用合併策略中選擇。選擇性地選取或取消選取要在合併提取請求之後刪除來源分支的選項,然後選擇「合」。合併完成後,提取請求的狀態會變更為「已合」,且不會再出現在提取請求的預設檢視中。預設檢視會顯示狀態為「開啟」的提取要求。您仍然可以檢視合併的提取請求,但無法核准該請求或變更其狀態。

    注意

    如果「合併」按鈕未處於作用中狀態,或者您看到「不可合併」標籤,表示所需的複查者尚未核准提取請求,或者無法在主控台中合併提取請求。 CodeCatalyst 未核准提取請求的審核者會在 [提取請求詳細資料] 區域的 [概觀] 中以時鐘圖示表示。如果所有必要的審核者都已核准提取請求,但「合併」按鈕仍未處於作用中狀態,表示您可能發生合併衝突,或者您已超過該空間的儲存配額。您可以在開發環境中解決目標分支的合併衝突,推送更改,然後合併提取請求,或者您可以解決衝突並在本地合併,然後將包含合併的提交推送到 CodeCatalyst。如需詳細資訊,請參閱合併一個提取請求(Git)和您的 Git 文件。

檢視部署的程式碼

現在是時候查看默認分支中最初部署的代碼,並在自動構建,測試和部署後合併的更改。若要執行此操作,您可以返回儲存庫的總覽頁面,並選擇相關工作流程圖示旁邊的數字,或在導覽窗格中選擇 CI/CD,然後選擇「工作流程」。

若要檢視已部署的程式碼
  1. 在「工作流程」中onPushToMainDeployPipeline,展開「最近的執行」。

    注意

    這是使用單頁應用程式藍圖建立之專案的工作流程預設名稱。

  2. 最近一次執行是由合併的提取要求提交至main分支所啟動的執行,並且可能會顯示「進行中」狀態。從清單中選擇已成功完成的執行,以開啟該執行的詳細資訊。

  3. 選擇「變數」。複製應用程式 URL 的值。這是部署的單頁 Web 應用程式的 URL。開啟新的瀏覽器索引標籤並貼上值,以檢視建置和部署的程式碼。保持標籤處於開啟狀態。

  4. 返回工作流程執行的清單,並等待最近的執行完成。當它發生時,返回到您打開的選項卡以查看 Web 應用程序並刷新瀏覽器。您應該會看到您在合併的提取請求中所做的變更。

清除資源

一旦您探索了使用源存儲庫和提取請求,您可能需要刪除任何不需要的資源。您無法刪除提取請求,但可以關閉它們。您可以刪除您建立的任何分支。

如果您不再需要來源儲存庫或專案,也可以刪除這些資源。如需更多詳細資訊,請參閱 刪除來源儲存庫刪除專案