AWS CodeCatalystとVSCodeを連携させて、開発環境を構築する方法！

Last updated at 2024-07-11Posted at 2024-07-11

こんにちは！ふくちと申します。

当記事ではAmazon CodeCatalystの設定方法・使い方について説明していきます。
複数チームのメンバーが合同で1つのプロジェクトを作成する場合、非常に有用なサービスとなっておりますので、ぜひこの記事を読んで使ってみてください！

※サービスの解説・用語の解説は当記事ではしておりません。参考資料として以下をご覧ください。
Amazon CodeCatalyst を使ったので概念などを整理してみた - DevelopersIO
Amazon CodeCatalyst

※また、詳細な使い方については別途記事を作成する予定です。

Amazon CodeCatalyst(以下、CodeCatalyst)の良いところ・良さそうなところ

素早くBizDevOpsのサイクルを回すための環境を迅速に構築できる
→ソースコードやIssueの管理・ビルド・テスト・CI/CDパイプライン・統合開発環境(IDE)がCodeCatalystだけで利用可能！
従来であればCodeシリーズなどを1つ1つ準備する必要がありましたが、CodeCatalystを用いることで環境構築にかかる手間が少なくでき、アプリケーションの開発に集中できそうです。
ブループリントがあるので「Small Start,Scale Fast」に適している
→ブループリントという組み込みのテンプレートが20個以上用意されており、そこから開発を始めることができそうです。小さく始めて、そこから少しずつサービスを充実させていく、ということが容易に実現できそうです。
また、もちろん1からプロジェクトを立ち上げてソースコードを作成していくことも可能です。

CodeCatalystを使用するための準備

下記のリンクからCodeCatalystを使用するための準備を行います。

上記の画面が開かれたら、AWS Builder IDをお持ちの方は「Sign up with AWS Builder ID」を選択し、持っていない方は「Create an AWS Builder ID」を選択します。
ここでは、持っていない方を想定して「Create an AWS Builder ID」を選択して進めます。
このAWS Builder IDを用いて、CodeCatalystにサインインしていきます。

続いて、ご自身のEメールと名前を入力します。名前はAWS Builder IDを使用するアプリケーションで表示させたい名前を入力します。完了したら「次へ」をクリック。

先ほど登録したメールに認証コードが届くので、コードを入力し、「認証」をクリックします。

続いてパスワードを設定します。英語(大文字と小文字)・数字・記号が含まれて8文字以上64文字以下であれば良いようです。入力したら、「AWS Builder IDを作成」をクリック。

サインアップが完了したので、上記の画面で「Sign in with AWS Builder ID」をクリックし、先ほど登録したメールアドレスとパスワードでサインインします。

「Create your CodeCatalyst alias」のページで、CodeCatalystのユーザー識別子に使用するエイリアスを入力します。先ほど名前で入力したものを入力すると良さそうです(ただし、スペースは不要です)。
他のCodeCatalystユーザーは、このエイリアスを使用してコメントやプルリクエストであなたをメンションできるようになります。
このエイリアスは一度決めた後、変更できませんのでご注意ください。

続いてあなたが作業するためのスペース名と、AWSリージョンを選択します。
このスペース名には、先ほどのエイリアスと同じものを指定することはできません。また、世界で一意の名前である必要があります。ここではsample-space-20240711とします。
また、AWSリージョンについては、オレゴンかアイルランドの2択になります。早く東京リージョンにも来てほしいですね…

続いて、先ほど作成したスペースに接続するアカウントのIDを入力します。入力後、「Go to the AWS console to Verify」を選択します。

するとAWSアカウントのサインインページが開かれるので普通にサインインします。

サインインすると、「Verify Amazon CodeCatalyst space」というページが開かれます。Verification tokenには、自動的に認証トークンが入力されます。成功バナーには、有効なトークンである旨のメッセージが表示されます。
また、同時にCodeCatalystのサポートロールが作成されます(内容については後述)。
「Verify space」をクリックします。

上記の画面が表示されたら、CodeCatalystのページに戻りましょう。また、上記のページは閉じないでください。

CodeCatalystの画面に戻ってきたら、「CodeCatalyst space verified with AWS account」と表示されているので、「Next」を選択します。

すると、プロジェクトを作成するかと聞かれるので、ここは「Skip for now」を選択します。プロジェクトはこの後の工程で作成します。

上記の画面が表示されれば、CodeCatalystを使用するための準備が整いました！
…と、言いたいところですが、最後にAWSアカウントでCodeCatalystに許可を与えましょう。

↓

マネジメントコンソール上で「CodeCatalyst」を検索し、先ほど作成したスペースを選択します。

↓

下へスクロールしていき、「Add IAM Role」をクリックします。

「Create CodeCatalyst development administrator role in IAM」を選択して「Create development role」をクリックします。
※ここで作成するdevelopment administrator roleはシンプルにAdmin権限を付与するものになっています(下記参照)。

上記のようになっていれば、CodeCatalystを使う準備は万全です！

～閑話休題～

先ほど作成したCodeCatalystのサポートロールについてですが、「Amazon CodeCatalystがお客様に代わってAWSサポートケースを作成、更新、および解決することを許可」するためのロールになっているようです。興味がある方は以下のポリシーをご参照ください。

AWSRoleForCodeCatalystSupport

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "support:DescribeAttachment",
                "support:DescribeCaseAttributes",
                "support:DescribeCases",
                "support:DescribeCommunications",
                "support:DescribeIssueTypes",
                "support:DescribeServices",
                "support:DescribeSeverityLevels",
                "support:DescribeSupportLevel",
                "support:SearchForCases",
                "support:AddAttachmentsToSet",
                "support:AddCommunicationToCase",
                "support:CreateCase",
                "support:InitiateCallForCase",
                "support:InitiateChatForCase",
                "support:PutCaseAttributes",
                "support:RateCaseCommunication",
                "support:ResolveCase"
            ],
            "Resource": "*"
        }
    ]
}

ブループリントからサンプルプロジェクトを構築してみる

ブループリントは、開発者が容易にAWS上でソリューションを構築しデプロイできるようにする設計図のようなものです。ブループリントを使用すると、サンプルアプリケーションコード、gitリポジトリ、テストコード、およびCI/CDワークフローが提供されます。

上記の画面で「Create Project」をクリックします。

好きなブループリントを選びます。ここでは一番左上にある「Single-page application」を作成してみます。

すると、選択したブループリントの説明が出てきます。要約すると、

このブループリントの概要：

目的：
1.単一ページアプリケーション（SPA）プロジェクトを作成する
2.Angular、React、Vueのいずれかのウェブアプリケーションフレームワークを選択可能
3.AWS Amplify HostingにデプロイするためのCodeCatalyst Labsアクションを使用

SPAの特徴：
1.JavaScriptAPIを使用してウェブドキュメントを更新
2.サーバーから完全なページを読み込まずに使用可能
3.ウェブサイトのパフォーマンス向上とより動的なユーザー体験を提供

とのことでした(Claude 3.5 Sonnectに聞きました)。
問題なければ「Next」をクリック。

ブループリントによるプロジェクト作成にあたって、詳細設定が問われます。基本的には自由で良いのですが、 IAMロールのところだけは先ほど作成したdevelopment administrator roleを選択してください。
選択できたら、「Create project」をクリック。

↓

1分もしないうちに、プロジェクトが作成されました！
※恐らく選択したブループリントによって、作成までにかかる時間が変わります。
Issue、Code、CI/CDなど様々な要素があるので色々見てみることをおすすめします。

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

チームメンバーと共同作業したい場合は、以下の手順でメンバーを招待してください。

↓

チームメンバーを招待したいプロジェクトにおけるOverview上で、右上の「Members +」をクリックすると、メンバー招待用の画面が表示されます。ここに招待したい人のメールアドレスを入力します。

招待したい人のロールを指定します。共同でコード修正などの作業をするのであれば「Contributor」で大丈夫です。
他のロールとしては、プロジェクト管理者向けの「Project administrator」、プルリクエストにコメントしたり新しくIssueを発行したりできる「Reviewer」、見る専の「Read-only」があります。

招待したメンバーには、上記のようなメールが届きます。Accept Invitationをクリックすると、CodeCatalystダッシュボードに同じプロジェクトが表示されるようになります。

開発環境の構築

最後に、CodeCatalystでDev Environmentを作成し、サポートされている統合開発環境(IDE)で作業できるようにします。

Dev Environmentとは、CodeCatalystで使用できるクラウドベースの開発環境です。プロジェクトのソースリポジトリに保存されているコードを操作することができます。

プロジェクト構築時に作成された「devfile」を用いることで、Dev Environmentを標準化することができ、ローカル開発環境の構築と維持にかかる時間を最小限に抑えることができます。

devfileのパスとしては、以下の通りです。
Code > source repository > spa-app(プロジェクト名) > devfile.yaml

詳細な中身の解説は省略しますが、以下のような内容になっているようです。

components は追加のストレージボリュームやDockerコンテナをDev Environment にアタッチする機能を提供します。
events コマンドを自動的に実行することで、Dev Environment を完全に自動化することができます。
commands スクリプトやコマンドを実行して、Dev Environment のセットアップを完了させる機能です。これらのスクリプトは、依存関係のインストールやファイルの作成など、Dev Environment の起動に必要なあらゆることに使用できます。

このdevfileを使用して、プロジェクトの作業を開始するためのDev Environmentを作成しましょう。
以下のサポートされている統合開発環境(IDE)でDev Environmentを使用します。

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

ここではVisual Studio Code(以下、VSCode)の環境構築を行います。
※ローカルではなく、クラウドベース開発環境のIDEとしてVSCodeを使用する場合の設定になります。
※ローカルで作業できる方法もあるようなので、そちらは別途追記します。

事前準備として、ローカルにVSCodeをインストールしておいてください。
また、拡張機能として「Remote - SSH」と「AWS Toolkit」を予めインストールしておくと、スムーズに進められます。

↓

プロジェクトにおいて、Code配下にある「Dev Environment」を選択し、「Create Dev Environment」をクリックします。
すると、どのIDEで開発環境を構築するか聞かれるので、ここではVSCodeを選択します。

ここではブループリントのリポジトリをそのまま使いたいので、「Clone a repository」を選択します。
ブランチ等もデフォルト設定のままで、「Create」をクリック。

タブが出てくるのでクリックしてVSCodeを開きます。

「Copy Code and Proceed」をクリックします。

ブラウザでログインページが開かれるので、VSCode上に表示された認証コードをブラウザに入力する。

「Allow Access」をクリックし、リクエストが認証されたら、VSCodeに戻る。

上記のように「使用中の一部のツールがprofile:defaultで動作しません。profile:defaultを使用しながら、バックグラウンドでAWS Builder IDを使い続けますか？」と聞かれることがある。各個人の環境によってどちらの選択肢をクリックするかは異なるが、少なくとも私は「No, switch everything to authenticate with AWS Builder ID.」をクリックして、上手く動作していました。(ここは自己責任でお願いします)