CodeCatalyst挑戦の経緯

仕事の案件とは全く関係ない趣味の範囲＆自主学習用にWebアプリを作っております。
今までは作ったものをローカルで動作させて、DBもSQLiteで…みたいな感じで作っていましたが、最終的にはAWS上にデプロイしたいなーとかDBサービスはAWSのものを使ってみたいなーとか計画しているうちに、ローカルじゃなくて最初からAWS上で開発できんのか？ という考えに思い当たりました。

そうだ、CodeCatalystがあるじゃない

AWS上で開発するにしてもCloud9はちょっと自分には使い辛かった（結局コンソールの代わりとしてしか使わない）んだよな～とか考えているうちに、思い出しました。CodeCatalyst。2023年のAWS Summit Tokyoで初めて聞いて興味を持っておりました。
どちらかというとチーム開発がしやすいよ！というのが売りのサービスだったと記憶していたんですが、個人開発でも使っちゃえばいいじゃない！のノリで、挑戦してみることにしました。

CodeCatalystとは

まだ今年の春にGAされたばかりのサービスだからなのか、AWSの公式詳細ページに飛ぶと見事に英語の記事しかないのですが、
↓こちらの記事で綺麗に纏まっておりました。（ありがとうございます！）

料金的にも無料枠があって良心的。
まぁ使い込み始めると有料にせざるを得ないようになっているのでしょうが、それでも1ユーザーあたり月4ドルなら個人開発でも十分お支払いできる額です。とりあえず安心。

さっそく使ってみよう

概要はなんとなくわかったところで使い方を調べてみたのですが、ぐーぐる先生に聞いても情報がなかなか集まりません。Preview時期の記事はいくつかあるのですが、GAされてからの記事はまだあまりないようです。
既にこの記事が完成するか不安になってきましたが、まぁなんとかなるやろの精神で使ってみましょう！
まずはCodeCatalystを触ってみて、サンプル的なアプリが作れたらゴールとしましょう。

Spaceを作成する

ではコンソールからサービスを検索して…、

さっそく怒られました。東京リージョン未対応なんですね！！？

ということで、us-west-2（オレゴン）を選択してCodeCatalystのページを開きます。

↑のページの「Continue with AWS Builder ID」とあるオレンジのボタンを押してサービス利用を開始しろということらしいです。
ここをクリックすると、別サイトに誘導されます。
↓画像の「Get Started for free」をクリックしてAWS Builder IDを新規登録します。

ちなみに私は以前CodeWhispererを試したときにBuilder IDを登録済みなので、Sign inからアクセスします。
↓がサインイン画面。初登録の場合は入力したアドレスにメールが飛ぶので、メールの確認リンクを押して認証するようです。

サインインに成功すると、↓のような画面が表示されます。
なんかやたらオサレなサイトですね…
「Create your CodeCatalyst alias」とのことで、説明を読むとCodeCatalyst内で使うユーザ名を決めろということらしいです。後から変更不可。
いつもの癖でckw-1227と入れそうになったのですが、よく考えたら会社のメールアドレスでログインしているので本名に紐づくaliasを入れておきました。

入力してNextをクリックすると、今度は作成するSpace名とリージョンを入力する画面へ遷移しました。
スペース名も後から変更不可のようです。

もしかしてここで東京リージョンを選べるかな！？と思いましたが、やっぱりオレゴンとアイルランドだけでした。

Space名とリージョンを入力してNextボタンを押すと、次に行くはずがエラーが出ました。
既に使われているスペース名ということ？っぽいですね。アンダーバーにしたらいけました。

次はAWSアカウントとの紐づけです。自分のアカウントIDを入れてテキストボックスからフォーカスを外すと「Go to the AWS console to verify」のボタンが有効化されるので、クリックします。

するとコンソールのVerify画面に遷移するので、「Verify space」をクリック。

CodeCatalyst側の画面に戻ると、「CodeCatalyst space verified with AWS account」のメッセージが表示されています。

Nextをクリックしてしばらく待つと、「Your space is ready.」の画面が。
まず最初の1歩はクリアしたようです！

Projectの作成

先ほど表示された画面で「Create your first project」をクリックすると、プロジェクト作成画面に遷移します。

プロジェクト作成は、
・blueprint（雛形のようなもの）から作成
・githubリポジトリとリンクして始める
・スクラッチで始める
の3つが選べます。
blueprintに関しては、2023年10月現在では16種類が選べます。
・Single-page application
・.NET serverless application
・AWS Glue ETL
・Static Website
・To Do web application
・Serverless RESTful microservice
・Modern three-tier web application
・ASP.NET Core web API
・Clickstream real-time analytics
・DevOps deployment pipeline
・Java API with AWS Fargate
・Serverless application model (SAM) API
・Intelligent Document Processing
・Serverless image handler
・Node.js API with AWS Fargate
・Video-on-demand web service

うーん…とりあえずで小さなアプリが作れれば良いのでそんなに大仰なものはいらないんですよね。「Node.js API with AWS Fargate」を選択することにします。

Nextをクリックすると、次はProject名・AWSアカウントの確認・IAM Roleの作成ですね。
ここは素直に入力していきます。

「Add IAM Role」ボタンをクリックすると、IAMを作成してくれるようなのでデフォルトで作ってもらいましょう。

IAM Roleを作成してCodeCatalyst画面に戻ると、ECR Roleを選択するように指示されるので、先ほど作ったロールを選択します。

さらに「additional configuration」なるものが出現したのでクリックしてみると…
リージョンが自由入力で指定できるっぽい！！
東京リージョン（ap-northeast-1）を指定して「Create project」をクリックします。

しばらく待つと、Projectのsummary画面が表示されました。Project作成もクリアですね！

画面を見まわしてみる

ここから先は操作の案内などはなさそうなので、ひととおり画面を見てみましょう。
まずは先ほども貼ったsummary画面。ダッシュボード的な役割でしょうか。TopにREADME.mdが表示されているようです。

次はissues画面。何も登録されていない状態なのでなんとも言えませんが…。

Code画面でアプリケーションを選んだ状態の画面がこちら。見た目Gitっぽいですね。

画面上方の「Create Dev Environment」から、VSCodeやPyCharmなんかも開けるようです。

ファイルを選択すると、エディタ画面に遷移します。ここでもソースの編集が可能です。…この画面、なんとなくCloud9を思い出しますね…

CI/CDメニューからWorkflowsを選択すると、パイプラインっぽい画面が出てきます。
ていうかビルドが走ってますね？Projectの新規作成と同時にWorkflow（パイプライン）が走るようになっているようです。

最後はProject settings画面。Generalの方はシンプルです。

notification設定の方は各イベントの通知と、Slackとの連携もできるようです。チームでの開発ができますよという推しポイントの片鱗が見えますね。

いつの間にかリソースが作られていた

そうこうしているうちにデプロイが終わったようです。

ECS Fargateを動かすソースがひととおり存在して、デプロイが走ったということは…もうサービスにアクセスできるということですよね？
ちょっとコンソールで各所を覗きに行ってみましょう。
リソースが作られるリージョンはオレゴンではなく、Project作成時に指定したリージョン（今回の場合は東京）となりますのでそこだけご注意を。

・VPC
もしかしてデフォルトVPCが勝手に使われる可能性が？と一瞬思いましたが、そんなことはなくしっかり新規VPCが作られていました。

・ECR
作ったイメージはECRに格納されています。

・ECS(Fargate）
ECSも異常なしで起動中。

・ロードバランサ―
ALBもちゃんとあります。

ということで…ロードバランサ―の詳細に表記されているDNS名にアクセスすると、レスポンスが返ってきます。

CodeCatalystのProjectをblueprintで作成すると、自動的に各リソースが作られることがわかりました。ちょっとこれは、気を付けないと怖いですね…

リソースの削除

blueprintからProjectを作り、コンソールの様子まで見ることができたので、この記事の目標はクリアしたといえるでしょう。
あとは忘れずに後片付けが必要です。

・Projectの削除
Projectの削除はProject settingsから行います。

Delete projectをクリックして、deleteを入力して削除。

・作られたリソースの削除
作られたリソースの内容は、CloudFormationの画面から確認することができます。
スタックは1つではなく複数にまたがって作られているようなので削除する際はご注意を。今回は3つのスタックを削除しました。

まとめ

Amazon CodeCatalystを使って、簡単なアプリのデプロイまで体験することができました。
・CodeCatalystにはソース・環境管理とデプロイのためのツールがそろっている
・チームでの開発のための仕組みもそろっている様子
・Spaceの中にProjectを作成し、そこでアプリを開発していく
・blueprintからProjectを作ると自動的にデプロイが走ってリソースが作られるので注意

…といったところでしょうか。個人開発でも使えそうだなと思います。

おれたちのたたかいはこれからだ

CodeCatalystを使ってみた！で終わりにするのではなく、個人開発で使いたいというのが私の目標です。
blueprintでは私の作りたい環境に沿ったものがなかったので、環境を1から作る必要があるようです。
ということで、現在環境を自分で作っていくことに挑戦中です。
ある程度できたらまた記事にしようと思います！