教學課程：使用現代三層 Web 應用程式藍圖建立專案

請在以下位置開啟 CodeCatalyst 主控台。 https://codecatalyst.aws/

在主 CodeCatalyst 控台中，導覽至您要建立專案的空間。

選擇建立專案。

選擇從藍圖開始。

在搜尋列中，輸入 modern。

選取新式三層 Web 應用程式藍圖，然後選擇 [下一步]。

在為您的專案命名中，輸入專案名稱。例如：

MyExampleProject.

在帳戶中，選擇 AWS 帳戶 您在註冊時添加的。藍圖會將資源安裝到此帳戶。

在部署角色中，選擇您在註冊期間新增的角色。例如，選擇 CodeCatalystWorkflowDevelopmentRole-spaceName。

如果沒有列出角色，請新增一個角色。若要新增角色，請選擇新增 IAM 角色，然後將角色新增至您的 AWS 帳戶。如需詳細資訊，請參閱 允許存取已連線 AWS 的資源 AWS 帳戶。

在運算平台中，選擇 Lambda。

在前端託管選項中，選擇 Amplify 託管。如需相關資訊 AWS Amplify，請參閱何謂 AWS Amplify 主機？ 在《AWS Amplify 使用者指南》中。

在部署區域中，輸入您希望藍圖部 AWS 區域 署 Mysfits 應用程式和支援資源的地區代碼。如需區域代碼的清單，請參閱 AWS 一般參考.

在應用程式名稱中，保留預設值mysfitsstring。

(選擇性) 在 [產生專案預覽] 下，選擇 [檢視程式碼] 以預覽藍圖將安裝的來源檔案。選擇 [檢視工作流程] 以預覽藍圖將安裝的 CI/CD 工作流程定義檔。預覽會根據您的選取動態更新。

選擇建立專案。

導覽至您要邀請使用者的專案。

在導覽窗格中，選擇 [專案設定]。

在 [成員] 索引標籤上選擇 [邀請]。

輸入您要邀請成為專案使用者的人員的電子郵件地址。您可以輸入多個電子郵件地址，並以空格或逗號分隔。您也可以從非專案成員的空間成員中進行選擇。

選擇使用者的角色。

完成新增使用者後，請選擇 [邀請]。

在導覽窗格中，選擇 [問題]。

選擇 [建立問題]。

在問題標題中，提供問題的名稱。選擇性地提供問題的描述。在此範例中，使用 make a change in the src/mysfit_data.json file.

選擇優先順序、估計值、狀態和標籤。在受指派人下，選擇 [+ 新增我]，將問題指派給您自己。

選擇 [建立問題]。這個問題現在可以在主機板上看到。選擇卡片，將問題移至「進行中」欄。

導覽至您的專案，然後執行下列其中一項作業：

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

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

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

請在以下位置開啟 CodeCatalyst 主控台。 https://codecatalyst.aws/

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

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

在儲存庫首頁上，選擇建立開發環境。

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

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

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

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

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

導航到您的項目開發環境。在中 AWS Cloud9，展開側邊導覽功能表以瀏覽檔案。展開mysfitssrc、和開啟src/mysfit_data.json。

在檔案中，將"Age":欄位的值從 6 變更為 12。您的行應如下所示：

    {
        "Age": 12,
        "Description": "Twilight's personality sparkles like the night sky and is looking for a forever home with a Greek hero or God. While on the smaller side at 14 hands, he is quite adept at accepting riders and can fly to 15,000 feet. Twilight needs a large area to run around in and will need to be registered with the FAA if you plan to fly him above 500 feet. His favorite activities include playing with chimeras, going on epic adventures into battle, and playing with a large inflatable ball around the paddock. If you bring him home, he'll quickly become your favorite little Pegasus.",
        "GoodEvil": "Good",
        "LawChaos": "Lawful",
        "Name": "Twilight Glitter",
        "ProfileImageUri": "https://www.mythicalmysfits.com/images/pegasus_hover.png",
        "Species": "Pegasus",
        "ThumbImageUri": "https://www.mythicalmysfits.com/images/pegasus_thumb.png"
    },

儲存檔案。

使用cd /projects/mysfits命令更改為 mysfits 存儲庫。

使用 git add，git 提交和 git 推送命令添加，提交和推送更改。

git add .
git commit -m "make an example change"
git push

在 CodeCatalyst 主控台的功能窗格中，選擇 CI/CD，然後選擇 [工作流程]。

這時系統顯示工作流程列表。這些是 CodeCatalyst 藍圖在您建立專案時產生並啟動的工作流程。

觀察工作流程清單。您應該看到四個：

在底部選擇與main分支相關聯的ApplicationDeploymentPipeline工作流程。此工作流程是使用main分支上的原始程式碼執行的。

工作流程圖表隨即出現。該圖顯示了幾個塊，每個塊代表一個任務或動作。大多數動作都是垂直排列的，最上方的動作會在下列動作之前執行。並排排列的動作並行執行。群組在一起的動作必須全部成功執行，下面的動作才能啟動。

主要區塊是：

選擇 [定義] 索引標籤 (靠近頂端)。工作流程定義檔會顯示在右側。該文件具有以下值得注意的部分：

選擇「最新」狀態標籤 (靠近頂端)，然後在工作流程圖表中選擇任何動作。

在右側，選擇「組態」索引標籤，以查看上次執行期間動作所使用的組態設定。每個組態設定在工作流程定義檔案中都有相符的屬性。

讓主控台保持開啟狀態，然後繼續下一個程序。

選擇「最新」狀態標籤。

在工作流程圖中，選擇DeployFrontend動作。

等待動作完成。注意「進行中」圖示 ( ) 變更為「成功」圖示 ( )。

選擇構建後端操作。

選擇 [記錄檔] 索引標籤，然後展開幾個區段，以檢視這些步驟的記錄訊息。您可以看到與後端設置相關的消息。

選擇 [報表] 索引標籤，然後選擇backend-coverage.xml報表。 CodeCatalyst 顯示關聯的報告。此報告會顯示已執行的程式碼涵蓋範圍測試，並指出測試成功驗證的程式碼行比例，例如 80%。

如需測試報告的詳細資訊，請參閱使用工作流程進行測試。

讓 CodeCatalyst 主機保持開啟狀態，然後繼續下一個程序。

返回ApplicationDeploymentPipeline工作流程，然後選擇最新執行的「執行字串」連結。

在工作流程圖中，找到DeployFrontend動作，然後選擇 [檢視應用程式] 連結。我們的網站隨即出現。

搜索名為暮光閃光的飛馬 Mysfit。請注意年齡的值。它是6。您將進行代碼更改以更新年齡。

導航到您的項目。

執行以下任意一項：

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

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

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

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

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

在原始碼分支中，選擇包含已提交程式碼的分支。

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

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

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

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

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

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

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

瀏覽至您的現代應用程式專案。

在專案頁面的「開啟提取請求」下，選擇您要合併的提取請求。如果您沒有看到提取請求，請選擇 [檢視全部]，然後從清單中選擇。選擇 Merge (合併)。

從提取請求的可用合併策略中選擇。選擇性地選取或取消選取要在合併提取請求之後刪除來源分支的選項，然後選擇「合併」。

在瀏覽窗格中，選擇 CI/CD，然後選擇 [工作流程]。

在「工作流程」中 ApplicationDeploymentPipeline，展開「最近的執行」。您可以看到合併提交開始執行的工作流程。（可選）選擇它來監視運行進度。

當運行完成時，重新加載您之前訪問的 URL。檢視飛馬座以確認年齡已變更。

導航到您的項目。

在導覽窗格中，選擇 [問題]。

D rag-and-drop 問題到「完成」列。

導覽至您的專案，然後選擇 [專案設定]。

選擇「一般」頁籤。

在專案名稱下，選擇 [刪除專案]。

AWS Management Console 使用您新增至 CodeCatalyst空間的相同帳戶登入。

轉到服AWS CloudFormation務。

刪除字符串堆棧。

刪除開發神秘字符串堆棧。

選擇（但不刪除）CDK 工具包堆棧。選擇 Resources (資源) 標籤。選擇StagingBucket連結，然後刪除 Amazon S3 中的儲存貯體和儲存貯體內容。

(選擇性) 刪除 CDK 工具組堆疊。