[ワークショップ] Amazon CodeCatalyst で最初のプロジェクトを構築しよう #DOP306 #reinvent

アノテーション テクニカルサポートの川崎です。

本記事は AWS re:Invent 2022 のセッションレポートとなります。

昨年の re:Invent で発表され、4月にGAになった CodeCatalyst ですが、ワークショップのコンテンツが 日本語化されていました ので、早速トライしてみました！

なお、 AWS Dev Day 2023 でも、本 CodeCatalyst ワークショップが開催されていたようです。

概要

Amazon CodeCatalyst は、開発者が AWS 上でアプリケーションを計画、コーディング、ビルド、テスト、デプロイするために必要なすべてを、合理化された統合されたエクスペリエンスにまとめます。AWSアカウントを接続することで、プロジェクトとAWSリソースを簡単に統合し、活用することができます。アプリケーションのライフサイクルのすべての段階と側面を1つのツールに集約することで、ソフトウェアを迅速かつ自信を持って提供することができます。このワークショップでは、Amazon CodeCatalystを使用して継続的インテグレーションと継続的デリバリー（CI/CD）パイプラインを作成するハンズオンスキルを習得します。参加にはノートパソコンが必要です。

セッション資料

Build your first project with Amazon CodeCatalyst

セッション情報

DOP306

ワークショップ

ワークショップ（日本語版）の URL はこちらになります。

Amazon CodeCatalyst Workshop

01 AWS CodeCatalyst の利用を開始する

CodeCatalyst を利用する際には、IAM（Identity Access Management）とは別のID、AWS Builder ID でアクセスします。 これは、ユーザーのメールアドレスに関連付けられる、グローバルに一意な ID です。

CodeCatalyst へのアクセス

https://codecatalyst.aws/login をブラウザで開きます。

初めて CodeCatalyst にアクセスする場合、AWS Builder ID を作成します。

AWS 主催のワークショップイベントに参加していない場合

ここでは「AWS 主催のワークショップイベントに参加していない場合」を選択します。

Add IAM role をクリックし、次のページで「Create CodeCatalyst development administrator role in IAM」を選択します。

ロールの編集

ロールの許可ポリシーのリストに表示されているポリシーのリンクをクリックし、ワークショップのページに記載されたポリシーで更新します。

（「この新しいポリシーは、次のステップでCodeGuruを使用してコードをレビューすることを可能にするものです。」と記載されたポリシー）

02 ブループリントの使用

ブログ執筆時点で、CodeCatalyst には、16個のブループリントが用意されていました。

モダン 3 層 Web アプリケーション ブループリント

「Modern three-tier web application」ブループリントは、 アプリケーション層用の python のソースコードと、Vue のフロントエンドアプリの組み合わせで、3 層のモダンな Web アプリケーションを構築してデプロイします。

ブループリントでプロジェクトを作成する

検索欄に「Modern three-tier web application」と入力して表示されるブループリントを使用します。

プロジェクトの詳細

「Create Project」をクリックして、プロジェクトを作成した後、プロジェクトに含まれるリソースを確認することができます。

03 CI/CD ワークフロー

プロジェクトを作成すると、ワークフローの初期実行が開始されます。

ワークフローの進行状況を確認する

ワークフローの進行状況を確認します。

ワークフローのビルドログを確認する

ワークフローのビルドログを確認します。

ワークフローテストレポートの確認

ワークフローの「Reports」タブを選択し、レポートを表示します。

アプリケーションの確認

ワークフローの Deploy_Frontend アクションの「Variables」タブに表示された、 「endpointUrl」の URL をブラウザで表示し、Webページを確認します。

CloudFormation で確認する

このブループリントでは、CDK を使用します。 Cloudformation の画面を開くことで、デプロイメントの内容を確認できます。

04 Project でのコラボレーション

他のユーザーをプロジェクトに招待することができます。

プロジェクトにユーザーを追加する

招待したい人のメールアドレスを入力します。送信されたメールから、プロジェクトに参加可能です。

05 Issue の作成と作業の追跡

CodeCatalyst では、Issue と呼ばれるレコードで、機能、タスク、バグなどの作業を追跡可能です。

Issue の概念

Issue の作成、編集、移動に使用される概念については、こちら からご確認ください。

Issue を作成する

ナビゲーションペインで、Issues を選択し、「Create Issue」をクリックします。

06 開発環境の構築

CodeCatalyst で使用できる「Dev Environment」というクラウドベースの開発環境を作成することができます。 サポートされている統合開発環境（IDE）を指定して、「Dev Environment」を作成し、作業を行います。

Devfile を作成する

Devfile は、YAML 形式で「Dev Environment」を標準化するオープンスタンダードです。 コードリポジトリのルートにある「devfile.yaml」というファイルの内容を確認します。

07 コードの変更

CodeCatalyst は、開発者がコードを作成し、変更をコミットし、デプロイを行うための、すべてのツールを提供しています。

Issue の Status を変更する

Issue をクリックして開き、Status を「In progress」に変更し、作業を開始します。

Dev Environment の構築

Dev Environments は、サポートされている統合開発環境 （IDE） から指定可能です。

• AWS Cloud9
• Visual Studio Code
• JetBrains IDEs
  • IntelliJ IDEA Ultimate
  • GoLand
  • PyCharm Professional

CodeCatalyst で Dev Environment を構築する

ここでは、AWS Cloud9 を指定して「Dev Environment」を構築します。

「Work in new branch」を選択し「Branch name」に「dev」を指定します。

「Create branch from」で「main」を選択します。

「Create」をクリックすると、ブラウザの新しいタブで Cloud9 が起動します。

Issue に取り組む

Cloud9 上に作成された「Dev Environment」で、コードの修正を行なっていきます。

src/mysfit_data.json というファイルを開き、 ワークショップのページに記載された要素を追加します。

併せて、関連する下記のテストコードも修正します。

• tests/integ/test_enpoint.py
• tests/unit/test_model.py

git コマンドで、修正をリモートリポジトリに反映します。

CodeCatalyst でコミットを確認する

ナビゲーションペインで[Code]-[Source repositories] を選択します。

当該リポジトリのリンクをクリックし、画面上部のプルダウンから「dev」ブランチを選択します。 右側の「Commit」タブ を選択します。コミット一覧が表示されます。

08 変更のレビューとマージ

「dev」ブランチの内容を変更しました。

変更内容から、プルリクエストを作成して、チームのメンバーにレビューした上で、マージしてもらうことができます。

プルリクエストを作成する

プルリクエストを作成する方法は、3つほどあります。

• ナビゲーションペインで、Code -> Pull requests を選択し、Create pull request を選択します。
• リポジトリのホームページで、Actions を選択し、Create pull request を選択します。
• プロジェクトページで、Create pull request を選択します。

プルリクエストをマージする

プルリクエストの内容を確認し「Merge」をクリックします。

マージを行うと、ビルドとデプロイを行うワークフローが開始されます。

アプリケーションを確認する

ワークフローの実行が完了したら、ブラウザで変更点を確認します。

Issue を解決する

先ほどの Issue を開き、Status ドロップダウンから Done を選択し、Issue を解決します。

09 新しい Environment の作成

Environment を作成する

[CI/CD]-[Environments]-[Create environment] から、環境名「production」を作成します。

10 ワークフローを変更する

ワークフローを変更する

ワークショップの手順に従い、本番環境へのデプロイのフローを追加します。

アプリケーションの確認

ワークフローの実行が完了したら、ブラウザで変更点を確認します。

まとめ

このワークショップで行ったこと

このワークショップでは、CodeCatalyst の様々な機能を触ってみることができました。

• AWS Builder ID を作成し、最初のスペース、プロジェクトを作成する方法
• 他のチームメンバーを招待する方法
• CodeCatalyst のプロジェクト管理機能を使い、プロジェクトや Issue を管理する方法
• 開発者の好みの IDE を指定して、開発環境 (Dev Environment) を構築する方法
• 本番環境を追加し、CI/CD ワークフローを修正して、デプロイを行う方法

所感

昨年の re:Invent で発表され、4月にGAになった CodeCatalyst とは何かを理解し、それを使って何ができるか、実際のサービスに触れて、理解することができるワークショップでした。

開発の環境整備にまつわる、これらの課題

• プロジェクトの立ち上げとツールの統合
• CI/CDと開発環境の自動化
• 複雑化するモダンなアプリ

これらの負担を軽減し、開発スピードを上げることができる可能性を感じることができました。

このブログを読まれた方も、ぜひ本ワークショップをお試しいただき、CodeCatalyst の可能性を実感してみてください！