チュートリアル: React アプリケーションの作成と更新

設計図の作成者は、スペースのブループリントカタログにカスタムブループリントを開発して追加できます。これらのブループリントは、スペースメンバーが新しいプロジェクトを作成したり、既存のプロジェクトに追加したりできます。ブループリントは引き続き変更でき、プルリクエストを通じて更新として利用できます。

このチュートリアルでは、ブループリント作成者の視点とブループリントユーザーの視点からのチュートリアルを提供します。このチュートリアルでは、React の単一ページのウェブアプリケーションのブループリントを作成する方法を示します。その後、ブループリントを使用して新しいプロジェクトを作成します。ブループリントが変更されて更新されると、ブループリントから作成されたプロジェクトにはプルリクエストを通じてそれらの変更が組み込まれます。

前提条件

カスタムブループリントを作成および更新するには、のセットアップと へのサインイン CodeCatalyst次のように でタスクを完了している必要があります。

• にサインインするための AWS Builder ID が必要です CodeCatalyst。

• スペースに属し、そのスペースでスペース管理者またはパワーユーザーロールを割り当てます。詳細については、スペースの作成、ユーザーにスペース許可を付与する、およびスペース管理者ロールを参照してください。

ステップ 1: カスタムブループリントを作成する

カスタムブループリントを作成すると、ブループリントのソースコードと開発ツールとリソースを含む CodeCatalyst プロジェクトが作成されます。プロジェクトでは、設計図を開発、テスト、公開します。

1. https://codecatalyst.aws/ で CodeCatalyst コンソールを開きます。

2. CodeCatalyst コンソールで、ブループリントを作成するスペースに移動します。

3. 設定 を選択して、スペース設定に移動します。

4. スペース設定 タブで、ブループリント を選択し、ブループリントの作成 を選択します。

5. 設計図作成ウィザードのフィールドを次の値で更新します。

   • 設計図名 に、 と入力しますreact-app-blueprint。

   • ブループリント表示名 に、 と入力しますreact-app-blueprint。

6. オプションで、コードを表示を選択して、ブループリントのブループリントソースコードをプレビューします。同様に、ワークフローを表示 を選択して、ブループリントを構築して公開するプロジェクトで作成されるワークフローをプレビューします。

7. ブループリントの作成 を選択します。

8. 設計図が作成されると、設計図のプロジェクトに移動します。このプロジェクトには、ブループリントのソースコードと、ブループリントの開発、テスト、公開に必要なツールとリソースが含まれています。リリースワークフローが生成され、自動的に設計図をスペースに公開しました。

9. 設計図と設計図プロジェクトが作成されたら、次のステップはソースコードを更新して設定することです。開発環境を使用して、ブラウザで直接ソースリポジトリを開いて編集できます。

   ナビゲーションペインで、コード を選択し、開発環境 を選択します。

10. 開発環境の作成を選択し、AWS Cloud9 （ブラウザで） を選択します。

11. デフォルト設定のままにして、 の作成を選択します。

12. AWS Cloud9 ターミナルで、次のコマンドを実行して設計図プロジェクトディレクトリに移動します。

    cd react-app-blueprint

13. 設計図が作成されると、static-assetsフォルダが自動的に作成され、入力されます。このチュートリアルでは、デフォルトのフォルダを削除し、React アプリケーション設計図用の新しいフォルダを生成します。

    次のコマンドを実行して、静的アセットフォルダを削除します。

    rm -r static-assets

    AWS Cloud9 は Linux ベースのプラットフォーム上に構築されています。Windows オペレーティングシステムを使用している場合は、代わりに次のコマンドを使用できます。

    rmdir /s /q static-assets

14. デフォルトのフォルダが削除されたので、次のコマンドを実行して、react-app ブループリントのstatic-assetsフォルダを作成します。

    npx create-react-app static-assets

    プロンプトが表示されたら、「」と入力yして続行します。

    必要なパッケージを含む新しい React アプリケーションが static-assetsフォルダに作成されました。変更はリモート CodeCatalyst ソースリポジトリにプッシュする必要があります。

15. 最新の変更があることを確認し、次のコマンドを実行して変更をブループリントの CodeCatalyst ソースリポジトリにコミットしてプッシュします。

    git pull

    git add .

    git commit -m "Add React app to static-assets"

    git push

ブループリントのソースリポジトリに変更がプッシュされると、リリースワークフローが自動的に開始されます。このワークフローは、設計図のバージョンをインクリメントし、設計図を構築し、スペースに公開します。次のステップでは、リリースワークフローの実行に移動して、その動作を確認します。

ステップ 2: リリースワークフローを表示する

1. CodeCatalyst コンソールのナビゲーションペインで CI/CD を選択し、ワークフロー を選択します。

2. ブループリントリリースワークフローを選択します。

3. ワークフローにブループリントを構築して公開するアクションがあることを確認できます。

4. 「最新実行」で、ワークフロー実行リンクを選択して、行ったコード変更から実行を表示します。

5. 実行が完了すると、新しいブループリントバージョンが公開されます。公開されたブループリントバージョンは、スペース設定 で確認できますが、スペースのブループリントカタログに追加されるまでプロジェクトでは使用できません。次のステップでは、設計図をカタログに追加します。

ステップ 3: カタログにブループリントを追加する

スペースのブループリントカタログにブループリントを追加すると、スペース内のすべてのプロジェクトでブループリントを使用できるようになります。スペースメンバーは、ブループリントを使用して新しいプロジェクトを作成したり、既存のプロジェクトに追加したりできます。

1. CodeCatalyst コンソールで、スペースに戻ります。

2. 設定 を選択し、ブループリント を選択します。

3. を選択しreact-app-blueprint、カタログ に追加 を選択します。

4. [保存] を選択します。

ステップ 4: 設計図を使用してプロジェクトを作成する

設計図がカタログに追加されたので、プロジェクトで使用できます。このステップでは、先ほど作成したブループリントを使用してプロジェクトを作成します。後のステップでは、ブループリントの新しいバージョンを更新して公開することで、このプロジェクトを更新します。

1. プロジェクト タブを選択し、プロジェクトの作成 を選択します。

2. スペースブループリント を選択し、 を選択しますreact-app-blueprint。

   注記

   設計図を選択すると、設計図の README.md ファイルの内容を確認できます。

3. [次へ] をクリックします。

4. 注記

   このプロジェクト作成ウィザードの内容は、設計図で設定できます。

   設計図ユーザーとしてプロジェクト名を入力します。このチュートリアルでは、react-app-project と入力します。詳細については、「プロジェクト要件を満たすためのカスタムブループリントの開発」を参照してください。

次に、設計図を更新し、新しいバージョンをカタログに追加します。このバージョンは、このプロジェクトの更新に使用します。

ステップ 5: ブループリントを更新する

ブループリントを使用して新しいプロジェクトを作成するか、既存のプロジェクトに適用した後も、ブループリントの作成者として更新を続けることができます。このステップでは、設計図を変更し、スペースに新しいバージョンを自動的に公開します。その後、新しいバージョンをカタログバージョンとして追加できます。

1. で作成したreact-app-blueprintプロジェクトに移動しますチュートリアル: React アプリケーションの作成と更新。

2. で作成された開発環境を開きますチュートリアル: React アプリケーションの作成と更新。

   1. ナビゲーションペインで、コード を選択し、開発環境 を選択します。

   2. テーブルから開発環境を検索し、 AWS Cloud9 （ブラウザで) で開くを選択します。

3. ブループリントリリースワークフローが実行されると、 package.json ファイルを更新することでブループリントバージョンが増加します。 AWS Cloud9 ターミナルで次のコマンドを実行して、 で変更する をプルします。

   git pull

4. 次のコマンドを実行して、 static-assetsフォルダに移動します。

   cd /projects/react-app-blueprint/static-assets

5. 次のコマンドを実行して、 static-assetsフォルダにhello-world.txtファイルを作成します。

   touch hello-world.txt

   AWS Cloud9 は Linux ベースのプラットフォーム上に構築されています。Windows オペレーティングシステムを使用している場合は、代わりに次のコマンドを使用できます。

   echo > hello-world.text

6. 左側のナビゲーションで、hello-world.txtファイルをダブルクリックしてエディタで開き、次の内容を追加します。

   Hello, world!

   ファイルを保存します。

7. 最新の変更があることを確認し、次のコマンドを実行して変更をブループリントの CodeCatalyst ソースリポジトリにコミットしてプッシュします。

   git pull

   git add .

   git commit -m "prettier setup"

   git push

変更をプッシュすると、リリースワークフローが開始され、新しいバージョンのブループリントがスペースに自動的に発行されます。

ステップ 6: ブループリントの公開済みカタログバージョンを新しいバージョンに更新する

ブループリントを使用して新しいプロジェクトを作成するか、既存のプロジェクトに適用した後でも、ブループリントの作成者としてブループリントを更新できます。このステップでは、設計図を変更し、設計図のカタログバージョンを変更します。

1. CodeCatalyst コンソールで、スペースに戻ります。

2. 設定 を選択し、ブループリント を選択します。

3. を選択しreact-app-blueprint、カタログバージョン の管理を選択します。

4. 新しいバージョンを選択し、保存 を選択します。

ステップ 7: 新しいブループリントバージョンでプロジェクトを更新する

スペースのブループリントカタログで新しいバージョンが利用可能になりました。ブループリントユーザーとして、 で作成されたプロジェクトのバージョンを更新できますステップ 4: 設計図を使用してプロジェクトを作成する。これにより、ベストプラクティスを満たすために必要な最新の変更と修正を確実に行うことができます。

1. CodeCatalyst コンソールで、 で作成されたreact-app-projectプロジェクトに移動しますステップ 4: 設計図を使用してプロジェクトを作成する。

2. ナビゲーションペインで [Blueprints] (ブループリント) を選択します。

3. 情報ボックスでブループリントの更新を選択します。

4. 右側のコード変更パネルには、 hello-world.txtと package.jsonの更新が表示されます。

5. 更新を適用 を選択します。

Apply update を選択すると、更新されたブループリントバージョンからの変更を含むプルリクエストがプロジェクトに作成されます。プロジェクトを更新するには、プルリクエストをマージする必要があります。詳細については、「プルリクエストの確認」および「プルリクエストのマージ」を参照してください。

1. ブループリント テーブルで、ブループリントを見つけます。ステータス 列で、保留中のプルリクエスト を選択し、開いているプルリクエストへのリンクを選択します。

2. プルリクエストを確認し、「マージ」を選択します。

3. 「早送りマージ」を選択してデフォルト値を保持し、「マージ」を選択します。

ステップ 8: プロジェクトの変更を表示する

設計図への変更は、 の後にプロジェクトで使用できるようになりましたステップ 7: 新しいブループリントバージョンでプロジェクトを更新する。ブループリントユーザーは、ソースリポジトリの変更を表示できます。

1. ナビゲーションペインで、ソースリポジトリ を選択し、プロジェクトの作成時に作成されたソースリポジトリの名前を選択します。

2. ファイル では、 で作成されたhello-world.txtファイルを表示できますステップ 5: ブループリントを更新する。

3. hello-world.txt を選択して、ファイルの内容を表示します。

ライフサイクル管理により、設計図の作成者は、特定の設計図を含むすべてのプロジェクトのソフトウェア開発ライフサイクルを一元管理できます。このチュートリアルで示すように、ブループリントに更新をプッシュして、ブループリントを使用して新しいプロジェクトを作成したり、既存のプロジェクトに適用したりしたプロジェクトに組み込むことができます。詳細については、「ブループリントの作成者としてライフサイクル管理を使用する」を参照してください。