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

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

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

前提条件

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

• CodeCatalyst にサインインするための AWS Builder ID を用意していること。

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

ステップ 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 アプリケーションのブループリント用に新しいフォルダを生成します。

    次のコマンドを実行して、[static-assets] フォルダを削除します。

    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 を入力して続行します。

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

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

    git pull

    git add .

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

    git push

変更がブループリントのソースリポジトリにプッシュされると、リリースワークフローが自動的に開始します。このワークフローは、ブループリントバージョンを増分し、ブループリントをビルドし、スペースに公開します。次のステップでは、リリースワークフローの実行に移動して、その状態を確認します。

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

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

2. [blueprint-release] ワークフローを選択します。

3. ワークフローには、ブループリントをビルドして公開するアクションがあります。

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

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

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

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

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

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

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

4. [Save] を選択します。

ステップ 4: ブループリントを使用してプロジェクトを作成する

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

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

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

   注記

   ブループリントを選択すると、ブループリントの README.md ファイルの内容を確認できます。

3. [Next] を選択します。

4. 注記

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

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

次に、ブループリントを更新し、新しいバージョンをカタログに追加します。このバージョンを使用して、このプロジェクトを更新します。

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

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

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

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 コンソールで、「ステップ 4: ブループリントを使用してプロジェクトを作成する」で作成した [react-app-project] プロジェクトに移動します。

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

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

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

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

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

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

2. プルリクエストを確認してから、[マージ] を選択します。

3. [Fast Forward マージ] を選択してデフォルト値を維持し、[マージ] を選択します。

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

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

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

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

3. ファイルのコンテンツを表示する hello-world.txt を選択します。

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