Amazon CodeCatalyst 不再向新客戶開放。現有客戶可以繼續正常使用該服務。如需詳細資訊，請參閱[如何從 CodeCatalyst 遷移](migration.md)。
本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。
# 教學課程：建立和更新 React 應用程式
身為藍圖作者，您可以開發自訂藍圖，並將其新增至空間的藍圖目錄。然後，空間成員可以使用這些藍圖來建立新的專案，或將其新增至現有的專案。您可以繼續對藍圖進行變更，然後透過提取請求將其作為更新提供。
本教學課程提供藍圖作者觀點和藍圖使用者觀點的逐步解說。本教學課程說明如何建立 React 單頁 Web 應用程式藍圖。然後會使用藍圖來建立新的專案。當藍圖更新為變更時，從藍圖建立的專案會透過提取請求納入這些變更。
**Topics**
+ [先決條件](#blueprint-getting-started-prerequisites)
+ [步驟 1：建立自訂藍圖](#react-bluprint-tutorial-create-bp)
+ [步驟 2：檢視發行工作流程](#blueprint-getting-started-view-workflow)
+ [步驟 3：將藍圖新增至目錄](#blueprint-getting-started-add-to-catalog)
+ [步驟 4：使用藍圖建立專案](#blueprint-getting-started-create-project)
+ [步驟 5：更新藍圖](#blueprint-getting-started-update-blueprint)
+ [步驟 6：將藍圖發佈的目錄版本更新為新版本](#blueprint-getting-started-update-catalog-version)
+ [步驟 7：使用新的藍圖版本更新專案](#blueprint-getting-started-update-project)
+ [步驟 8：檢視專案中的變更](#blueprint-getting-started-view-changes)
## 先決條件
若要建立和更新自訂藍圖，您必須完成 中的任務[設定並登入 CodeCatalyst設定並登入 CodeCatalyst](setting-up-topnode.md)，如下所示：
+ 具有用於登入 CodeCatalyst 的 AWS 建置器 ID。
+ 屬於一個空間，並在該空間中為您指派**空間管理員**或**進階使用者**角色。如需詳細資訊，請參閱[建立空間](spaces-create.md)、[授予使用者空間許可](spaces-members.md)及[空間管理員角色](ipa-role-types.md#ipa-role-space-admin)。
## 步驟 1：建立自訂藍圖
當您建立自訂藍圖時，會建立一個 CodeCatalyst 專案，其中包含您的藍圖原始程式碼和開發工具和資源。您的專案是您開發、測試和發佈藍圖的地方。
1. 開啟 CodeCatalyst 主控台，網址為 https：//[https://codecatalyst.aws/](https://codecatalyst.aws/)。
1. 在 CodeCatalyst 主控台中，導覽至您要建立藍圖的空間。
1. 選擇**設定**以導覽至空間設定。
1. 在**空間設定**索引標籤中，選擇**藍圖**，然後選擇**建立藍圖**。
1. 使用下列值更新藍圖建立精靈中的欄位：
+ 在**藍圖名稱**中，輸入 `react-app-blueprint`。
+ 在**藍圖顯示名稱**中，輸入 `react-app-blueprint`。
1. 或者，選擇**檢視程式碼**以預覽藍圖的藍圖原始程式碼。同樣地，選擇**檢視工作流程**以預覽將在建置和發佈藍圖的專案中建立的工作流程。
1. 選擇**建立藍圖**。
1. 建立藍圖後，系統會將您帶往藍圖的專案。此專案包含藍圖原始程式碼，以及開發、測試和發佈藍圖所需的工具和資源。已產生發行工作流程，並自動將您的藍圖發佈至空間。
1. 現在您的藍圖和藍圖專案已建立，下一步是透過更新原始程式碼來設定。您可以使用開發環境，直接在瀏覽器中開啟和編輯來源儲存庫。
在導覽窗格中，選擇**程式碼**，然後選擇**開發環境**。
1. 選擇**建立開發環境**，然後選擇 **AWS Cloud9 （在瀏覽器中）**。
1. 保留預設設定，然後選擇**建立**。
1. 在 AWS Cloud9 終端機中，執行下列命令導覽至藍圖專案目錄：
```
cd react-app-blueprint
```
1. 建立藍圖時，會自動建立和填入`static-assets`資料夾。在本教學課程中，您將刪除預設資料夾，並為反應應用程式藍圖產生新的資料夾。
執行下列命令來刪除 static-assets 資料夾：
```
rm -r static-assets
```
AWS Cloud9 是以 Linux 為基礎的平台建置。如果您使用的是 Windows 作業系統，則可以改用下列命令：
```
rmdir /s /q static-assets
```
1. 現在已刪除預設資料夾，請執行下列命令，為 react-app 藍圖建立`static-assets`資料夾：
```
npx create-react-app static-assets
```
如果出現提示，請輸入 `y` 以繼續。
已在`static-assets`資料夾中使用必要的套件建立新的反應應用程式。變更需要推送到您的遠端 CodeCatalyst 來源儲存庫。
1. 確保您有最新的變更，然後執行下列命令，將變更遞交並推送至藍圖的 CodeCatalyst 來源儲存庫：
```
git pull
```
```
git add .
```
```
git commit -m "Add React app to static-assets"
```
```
git push
```
將變更推送至藍圖的來源儲存庫時，會自動啟動發行工作流程。此工作流程會遞增藍圖版本、建置藍圖，並將其發佈到您的空間。在下一個步驟中，您將導覽至發行工作流程執行，以查看其運作狀態。
## 步驟 2：檢視發行工作流程
1. 在 CodeCatalyst 主控台的導覽窗格中，選擇 **CI/CD**，然後選擇**工作流程**。
1. 選擇**藍圖發佈**工作流程。
1. 您可以看到工作流程具有建置和發佈藍圖的動作。
1. 在**最新執行**下，選擇工作流程執行連結，從您所做的程式碼變更中檢視執行。
1. 執行完成後，就會發佈新的藍圖版本。您可以在空間**設定**中看到已發佈的藍圖版本，但在新增至空間的藍圖目錄之前，無法在專案中使用。在下一個步驟中，您將新增藍圖至目錄。
## 步驟 3：將藍圖新增至目錄
將藍圖新增至空間的藍圖目錄，可讓藍圖可用於空間中的所有專案。空間成員可以使用藍圖來建立新專案，或將其新增至現有專案。
1. 在 CodeCatalyst 主控台中，導覽回空格。
1. 選擇**設定**，然後選擇**藍圖**。
1. 選擇 **react-app-blueprint**，然後選擇**新增至目錄**。
1. 選擇 **Save** (儲存)。
## 步驟 4：使用藍圖建立專案
現在藍圖已新增至目錄，可用於專案。在此步驟中，您將使用您剛建立的藍圖建立專案。在後續步驟中，您將更新和發佈新版本的藍圖，以更新此專案。
1. 選擇**專案**索引標籤，然後選擇**建立專案**。
1. 選擇**空間藍圖**，然後選擇 **react-app-blueprint**。
**注意**
選擇藍圖後，您可以查看藍圖`README.md`檔案的內容。
1. 選擇 **Next (下一步)**。
1.
**注意**
您可以在藍圖中設定此專案建立精靈的內容。
以藍圖使用者身分輸入專案名稱。針對本教學，輸入 `react-app-project`。如需詳細資訊，請參閱[開發符合專案需求的自訂藍圖](develop-bp.md)。
接著，您將更新藍圖，並將新版本新增至目錄，以用於更新此專案。
## 步驟 5：更新藍圖
藍圖用於建立新專案或套用至現有專案之後，您可以繼續以藍圖作者的身分進行更新。在此步驟中，您將變更藍圖，並自動將新版本發佈至空間。然後，新版本可以新增為目錄版本。
1. 導覽至在 中建立的 **react-app-blueprint** 專案[教學課程：建立和更新 React 應用程式](#blueprint-getting-started-tutorial)。
1. 開啟在 中建立的開發環境[教學課程：建立和更新 React 應用程式](#blueprint-getting-started-tutorial)。
1. 在導覽窗格中，選擇**程式碼**，然後選擇**開發環境**。
1. 從表格中尋找開發環境，然後選擇在 ** AWS Cloud9 （在瀏覽器中） 中開啟**。
1. 當藍圖發佈工作流程執行時，它會更新 `package.json` 檔案來增加藍圖版本。在 AWS Cloud9 終端機中執行下列命令，以提取 中的變更：
```
git pull
```
1. 執行下列命令以導覽至 `static-assets` 資料夾：
```
cd /projects/react-app-blueprint/static-assets
```
1. 執行下列命令，在 `static-assets` 資料夾中建立`hello-world.txt`檔案：
```
touch hello-world.txt
```
AWS Cloud9 是以 Linux 為基礎的平台建置。如果您使用的是 Windows 作業系統，則可以改用下列命令：
```
echo > hello-world.text
```
1. 在左側導覽中，按兩下 `hello-world.txt` 檔案以在編輯器中開啟，然後新增下列內容：
```
Hello, world!
```
儲存檔案。
1. 確保您有最新的變更，然後執行下列命令，將變更遞交並推送至藍圖的 CodeCatalyst 來源儲存庫：
```
git pull
```
```
git add .
```
```
git commit -m "prettier setup"
```
```
git push
```
推送變更會啟動發行工作流程，這會自動將新版本的藍圖發佈到空間。
## 步驟 6：將藍圖發佈的目錄版本更新為新版本
使用藍圖建立新專案或套用至現有專案之後，您仍然可以將藍圖更新為藍圖作者。在此步驟中，您將變更藍圖並變更藍圖的目錄版本。
1. 在 CodeCatalyst 主控台中，導覽回空格。
1. 選擇**設定**，然後選擇**藍圖**。
1. 選擇 **react-app-blueprint**，然後選擇**管理目錄版本**。
1. 選擇新版本，然後選擇**儲存**。
## 步驟 7：使用新的藍圖版本更新專案
新版本現已在空間的藍圖目錄中提供。身為藍圖使用者，您可以更新在 中建立之專案的版本[步驟 4：使用藍圖建立專案](#blueprint-getting-started-create-project)。這可確保您有符合最佳實務所需的最新變更和修正。
1. 在 CodeCatalyst 主控台中，導覽至在 中建立的 **react-app-project** 專案[步驟 4：使用藍圖建立專案](#blueprint-getting-started-create-project)。
1. 在導覽窗格中，選擇 **Blueprints (藍圖)**。
1. 在資訊方塊中選擇**更新藍圖**。
1. 在右側**程式碼變更**面板中，您可以看到 `hello-world.txt`和 `package.json`更新。
1. 選擇**套用更新**。
選擇**套用更新**會在專案中建立提取請求，其中包含來自更新藍圖版本的變更。若要對專案進行更新，您必須合併提取請求。如需詳細資訊，請參閱 [檢閱提取請求](pull-requests-review.md) 和 [合併提取請求](pull-requests-merge.md)。
1. 在**藍圖**表格中，尋找藍圖。在**狀態**欄中，選擇**待定提取請求**，然後選擇開啟提取請求的連結。
1. 檢閱提取請求，然後選擇**合併**。
1. 選擇**快速向前合併**以保留預設值，然後選擇**合併**。
## 步驟 8：檢視專案中的變更
在 之後，您的專案現在可以變更藍圖[步驟 7：使用新的藍圖版本更新專案](#blueprint-getting-started-update-project)。身為藍圖使用者，您可以檢視來源儲存庫中的變更。
1. 在導覽窗格中，選擇**來源儲存庫**，然後選擇建立專案時建立的來源儲存庫名稱。
1. 在 **檔案**下，您可以檢視在 中建立`hello-world.txt`的檔案[步驟 5：更新藍圖](#blueprint-getting-started-update-blueprint)。
1. 選擇 `hello-world.txt`以檢視檔案的內容。
生命週期管理可讓藍圖作者集中管理包含特定藍圖之每個專案的軟體開發生命週期。如本教學課程所示，您可以將更新推送至藍圖，然後由使用藍圖建立新專案或將其套用至現有專案的專案所納入。如需詳細資訊，請參閱[以藍圖作者身分使用生命週期管理](lifecycle-management-dev.md)。