必要條件步驟 1：建立自訂藍圖步驟 2：檢視發行工作流程步驟 3：將藍圖新增至目錄步驟 4：使用藍圖建立專案步驟 5：更新藍圖步驟 6：將藍圖的已發佈目錄版本更新為新版本步驟 7：使用新藍圖版本更新專案步驟 8：檢視專案中的變更

教學課程：建立和更新 React 應用程式

身為藍圖作者，您可以開發自訂藍圖，並將其新增至空間的藍圖目錄。然後，空間成員可以使用這些藍圖來建立新專案或將其新增至現有專案。您可以繼續對藍圖進行變更，然後透過提取要求提供為更新。

本教學課程從藍圖作者的角度和藍圖使用者的觀點提供逐步解說。本教學課程說明如何建立 React 單頁 Web 應用程式藍圖。然後會使用藍圖來建立新專案。使用變更更新藍圖時，從藍圖建立的專案會透過提取要求合併這些變更。

必要條件

若要建立和更新自訂藍圖，您必須已完成中的工作，設定並登入 CodeCatalyst如下所示：

有一個用於登錄的 AWS 生成器 ID CodeCatalyst。
屬於空間，並在該空間中為您指派 Space 管理員或超級使用者角色。如需詳細資訊，請參閱建立空間、授與使用者空間權限及空間管理員角色。

步驟 1：建立自訂藍圖

當您建立自訂藍圖時，會建立包含藍圖原始程式碼以及開發工具和資源的 CodeCatalyst 專案。您的專案是您開發、測試和發佈藍圖的地方。

請在以下位置開啟 CodeCatalyst 主控台。 https://codecatalyst.aws/
在主 CodeCatalyst 控台中，導覽至要建立藍圖的空間。
選擇設定以導覽至空間設定。
在空間設定索引標籤中，選擇藍圖，然後選擇建立藍圖。
使用下列值更新藍圖建立精靈中的欄位：
- 在藍圖名稱中，輸入react-app-blueprint。
- 在藍圖顯示名稱中，輸入react-app-blueprint。
或者，選擇 [檢視程式碼] 以預覽藍圖的藍圖原始程式碼。同樣地，選擇 [檢視工作流程] 以預覽將在建置和發佈藍圖的專案中建立的工作流程。
選擇 [建立藍圖]。
建立藍圖後，您將進入藍圖的專案。此專案包含藍圖原始程式碼，以及開發、測試和發佈藍圖所需的工具和資源。已產生發行工作流程，並自動將您的藍圖發佈至空間。
現在您的藍圖和藍圖專案已建立，下一個步驟是透過更新原始程式碼來進行設定。您可以使用開發環境直接在瀏覽器中打開和編輯源代碼存儲庫。

在瀏覽窗格中，選擇 [程式碼]，然後選擇 [開發環境]。
選擇創建開發環境，然後選擇 AWS Cloud9 （在瀏覽器中）。
保留預設設定，然後選擇 [建立]。
在 AWS Cloud9 終端機中，透過執行下列命令導覽至您的藍圖專案目錄：
```
cd react-app-blueprint
```
建立藍圖時，會自動建立static-assets資料夾並填入資料夾。在本教程中，您將刪除默認文件夾並為反應應用程序藍圖生成一個新文件夾。

通過運行以下命令刪除靜態資產文件夾：
```
rm -r static-assets
```
AWS Cloud9 是建立在一個基於 Linux 的平台上。如果您使用的是 Windows 作業系統，則可以改用下列命令：
```
rmdir /s /q static-assets
```
現在已刪除預設資料夾，請執行下列命令來建立 React-app 藍圖的static-assets資料夾：
```
npx create-react-app static-assets
```
如果出現提示，請輸y入以繼續。

在包含必要套件的static-assets資料夾中建立了一個新的反應應用程式。這些更改需要推送到您的遠程 CodeCatalyst 源存儲庫。
確定您擁有最新的變更，然後執行下列命令，將變更認可並推送至藍圖的 CodeCatalyst 來源存放庫：
```
git pull
```
```
git add .
```
```
git commit -m "Add React app to static-assets"
```
```
git push
```

將變更推送至藍圖的來源存放庫時，會自動啟動發行工作流程。此工作流程會增加藍圖版本、建置藍圖，然後將其發佈到您的空間。在下一步中，您將導航到發行工作流程運行以查看其運行情況。

步驟 2：檢視發行工作流程

在 CodeCatalyst 主控台的功能窗格中，選擇 CI/CD，然後選擇 [工作流程]。
選擇藍圖釋放工作流程。
您可以看到工作流程具有建立和發佈藍圖的動作。
在「最新執行」下，選擇工作流程執行連結，以從您所做的程式碼變更中檢視執行。
執行完成後，即會發佈新藍圖版本。已發佈的藍圖版本可以在您的空間設定中看到，但在將其新增至空間的藍圖目錄之前，無法在專案中使用。在下一個步驟中，您會將藍圖新增至目錄。

步驟 3：將藍圖新增至目錄

將藍圖新增至空間的藍圖目錄可讓藍圖用於空間中的所有專案。Space 成員可以使用藍圖建立新專案或將其新增至現有專案。

在主 CodeCatalyst 控台中，導覽回空間。
選擇 [設定]，然後選擇 [藍圖]。
選擇 react-app-blueprint，然後選擇 [新增至目錄]。
選擇儲存。

步驟 4：使用藍圖建立專案

現在已將藍圖新增至目錄，即可在專案中使用該藍圖。在此步驟中，您將使用剛才建立的藍圖建立專案。在稍後的步驟中，您將透過更新和發佈新版本的藍圖來更新此專案。

選擇「項目」選項卡，然後選擇「創建項目」。
選擇 [空間藍圖]，然後選擇react-app-blueprint。

注意
選擇藍圖後，您可以看到藍圖README.md檔案的內容。
選擇下一步。
注意
此專案建立精靈的內容可在藍圖中設定。

以藍圖使用者身分輸入專案名稱。針對本教學，輸入 react-app-project。如需詳細資訊，請參閱開發自訂藍圖以符合專案需求。

接下來，您將對藍圖進行更新，並將新版本新增至您將用於更新此專案的目錄。

步驟 5：更新藍圖

使用藍圖建立新專案或套用至現有專案後，您可以繼續以藍圖作者的身分進行更新。在此步驟中，您將對藍圖進行變更，並自動將新版本發佈到空間。然後可以將新版本新增為目錄版本。

導覽至在中建立的react-app-blueprint專案教學課程：建立和更新 React 應用程式。
開啟在中建立的開發環境教學課程：建立和更新 React 應用程式。
1. 在瀏覽窗格中，選擇 [程式碼]，然後選擇 [開發環境]。
2. 從表格中找到開發環境，然後選擇 [在 AWS Cloud9 瀏覽器中開啟]。
執行藍圖發行工作流程時，它會透過更新package.json檔案來增加藍圖版本。通過在 AWS Cloud9 終端中運行以下命令來提取該更改：
```
git pull
```
執行下列命令以導覽至static-assets資料夾：
```
cd /projects/react-app-blueprint/static-assets
```
通過運行以下命令在hello-world.txt文件static-assets夾中創建文件：
```
touch hello-world.txt
```
AWS Cloud9 是建立在一個基於 Linux 的平台上。如果您使用的是 Windows 作業系統，則可以改用下列命令：
```
echo > hello-world.text
```
在左側導覽列中，按兩下hello-world.txt檔案以在編輯器中開啟檔案，然後新增下列內容：
```
Hello, world!
```
儲存檔案。
確定您擁有最新的變更，然後執行下列命令，將變更認可並推送至藍圖的 CodeCatalyst 來源存放庫：
```
git pull
```
```
git add .
```
```
git commit -m "prettier setup"
```
```
git push
```

推送變更會啟動發行工作流程，該工作流程會自動將新版本的藍圖發佈到空間。

步驟 6：將藍圖的已發佈目錄版本更新為新版本

使用藍圖建立新專案或套用至現有專案後，您仍可以藍圖作者身分更新藍圖。在此步驟中，您將對藍圖進行變更並變更藍圖的目錄版本。

在主 CodeCatalyst 控台中，導覽回空間。
選擇 [設定]，然後選擇 [藍圖]。
選擇 react-app-blueprint，然後選擇 [管理目錄版本]。
選擇新版本，然後選擇 [儲存]。

步驟 7：使用新藍圖版本更新專案

空間的藍圖目錄中現已提供新版本。身為藍圖使用者，您可以更新在中建立之專案的版本步驟 4：使用藍圖建立專案。如此可確保您擁有符合最佳實務所需的最新變更和修正。

在 CodeCatalyst 主控台中，瀏覽至中建立的react-app-project專案步驟 4：使用藍圖建立專案。
在導覽窗格中，選擇 Blueprints (藍圖)。
在資訊方塊中選擇 [更新藍圖]。
在右側的「程式碼變更」面板中，您可以看到hello-world.txt和package.json更新。
選擇 [套用更新]。

選擇 [套用更新] 會在專案中建立一個提取要求，其中包含來自更新藍圖版本的變更。若要對專案進行更新，您必須合併提取要求。如需詳細資訊，請參閱檢閱提取要求及合併提取請求。

在藍圖表格中，尋找藍圖。在「狀態」欄中，選擇「擱置中」提取請求，然後選擇連至未結提取請求的連結。
複查提取請求，然後選擇「合併」。
選擇快進合併以保留預設值，然後選擇「合併」。

步驟 8：檢視專案中的變更

藍圖的變更現在可在之後在您的專案中使用步驟 7：使用新藍圖版本更新專案。身為藍圖使用者，您可以檢視來源存放庫中的變更。

在瀏覽窗格中，選擇 [來源儲存庫]，然後選擇建立專案時所建立之來源儲存庫的名稱。
在「檔案」下，您可以檢視在中建立的hello-world.txt檔案步驟 5：更新藍圖。
選擇hello-world.txt以檢視檔案的內容。

生命週期管理讓藍圖作者能夠集中管理包含特定藍圖之每個專案的軟體開發生命週期。如本教學課程所見，您可以將更新推送至藍圖，然後再由使用藍圖建立新專案的專案合併，或將其套用至現有專案的專案。如需更多詳細資訊，請參閱以藍圖作者身分使用生命週期管理。

您的瀏覽器已停用或無法使用 Javascript。

您必須啟用 Javascript，才能使用 AWS 文件。請參閱您的瀏覽器說明頁以取得說明。

文件慣用形式

開始使用自訂藍圖

將來源儲存庫轉換為自訂藍圖