【AWS】検証！Amazon CodeCatalystのDev EnvironmentでVisual Studio Codeを起動してみる

検証！Amazon CodeCatalystのDev Environmentで快適なVS Code環境を構築してみる

はじめに

この記事では
Amazon CodeCatalystのDev Environmentを使って、VS Codeの開発環境を構築する方法を紹介します。
主な内容としては実践したときのメモを中心に書きます。（忘れやすいことなど）
誤りなどがあれば修正していく想定です。

AWS上で快適に開発したい

AWSのサービスを使ってアプリケーションを開発しているような場合、
AWSのサービスとの連携がしやすい環境を構築したいですよね。

たいていの場合は、Visual Studio CodeのようなIDEを使って開発したり
JetBrainsのIDEを使って開発したりすると思います。

AWSだったらCloud9を使えばいいじゃん！という意見もあるかもしれませんが、使い慣れているIDEを使いたいという場合もあるでしょう。

（とはいえ、vimやemacs使いであれば、Cloud9でもそれらを使えるので、そういう場合はCloud9でもいいかもしれません）

IDEがネックにならないなら、他に何がネックになるかというとCloud9はEC2のコンピューティング料金とストレージ料金がかかるということです。

開発者としては開発環境を建てる際のコストを抑えたいということもありますが、インフラを意識することなく、開発に集中したいということもあります。
（コンソールでなんとなく起動したEC2と同じコンピューティング料金が開発中に発生していると思うと少し鬱陶しいと感じてしまう。）

Dev Environmentならなんかイイカンジになるかも

そこでAmazon CodeCatalystでは、Dev Environmentという機能を使うことで
AWS上でVisual Studio CodeなどのIDEを起動できます。

補足：他にはどんなIDEが使えるのか

Dev EnvironmentではVS Code以外にも以下のIDEが使えるようです。

• IntelliJ IDEA Ultimate
• GoLand
• PyCharm Professional

※Creating a Dev Environmentより参照

Dev Environmentの料金

Dev Environmentは時間という単位で課金されるため、一見してCloud9で発生するようなコンピューティング料金と同じに見えるかもしれませんが、明確な違いがあります。
また、CodeCatalystにはプランがあります。プランによって利用できる時間や料金が異なります。

プラン名	利用可能時間	料金
Free	60時間/月	無料
Standard	200時間	$4 per active user※
Enterprise	160時間	$20 per user

※active user：CodeCatalystにログインしたユーザーをアクティブなユーザーとみなします。

• 料金に関する記載

無料で利用できる範囲もそうですが、とくにアクティブユーザーという考え方がポイントです。
個人ユーザで課金したい場合は、Standardプランがオススメかもしれません。

セットアップ

少しだけ触ってみるだけなら料金がかからないということで触ってみましょう。
なお、今回はCodeCatalystのセットアップとGitHubのアカウントをリンクしたことを前提にしております。手順

ここからハンズオン

事前準備

• ローカルにVisual Studio Codeをインストールしてください
• 拡張機能ではAWS ToolKitとRemote SSHをインストールしてください

Dev Environmentsを開く

Spaceを開いて開発環境を構築したいプロジェクトのDev Environmentsをクリックします。

※上記の画面は以下のようなURLで開けます。スペース名にはすでに作成したスペース名（任意の名前）が入ります。

https://codecatalyst.aws/spaces/スペース名/projects

GitHubのリポジトリをリンクする

Add Repositoryの右にある逆三角形からLink Repositoryを選択します。

※上記の画面は以下のようなURLで開けます。スペース名にはすでに作成したスペース名（任意の名前）、プロジェクト名にはすでに作成したプロジェクト名（任意の名前）が入ります。

https://codecatalyst.aws/spaces/スペース名/projects/プロジェクト名/view

プロバイダとアカウント、リポジトリ名を選択してLinkをクリックします。

Dev EnvironmentsでVisual Studio Codeの開発環境を構築する

次にCreate Dev Environmentの右にある逆三角形をクリックします。

いくつか環境が選択できますが、ここではVisual Studio Codeを選択します。

開発環境の設定と起動

開発環境を選択すると設定画面に遷移します。ブランチ、エイリアス、VPCコネクションなどの設定がありますが、ここではブランチのみ設定してCreateをクリックします。

Dev Environment Configurationの設定はデフォルトのSmall 2vCPU, 4GB RAMで進めます。

Createを実行するとローカルにインストールされているVisual Studio Codeから通知が届きます。Open Visual Studio Code.appをクリックします。

Visual StudioCodeの画面でポップアップが表示されるのでOpenをクリックします。

これでAWS上にVisual Studio Codeを起動してローカルのVisual Studio Codeから接続できました。

Dev Environmentsに構築したVisual Studio Codeを使ってみる

ターミナルを起動してuname -aを実行してみましょう。
まずはターミナルを起動します。TerminalをクリックしてNew Terminalを選択します。

新しいターミナルで以下のコマンドを実行します。

uname -a

実行結果

Linux ip-10-132-45-39.us-west-2.compute.internal 6.1.90-99.173.amzn2023.x86_64 #1 SMP PREEMPT_DYNAMIC Tue May  7 11:11:31 UTC 2024 x86_64 x86_64 x86_64 GNU/Linux

AWS上で起動しているターミナルであることがわかりました。

セッションを切断する

セッションを切断する場合はリモートSSHの機能を使っているのでリモートSSHからセッションを切断します。まずはVisual Studio Codeの左下をクリックします。

Close Remote Connectionをクリックします。

これでセッションを切断できました。なお、セッションを切断しただけではCodeCatalyst上のVisual Studio Codeは起動したままですので停止しておきましょう。

トラブルシューティング

ハンズオンは以上ですが、この記事を作成するにあたっていくつかトラブルに見舞われたのでメモしておこうと思います。

タイムアウトで繋がらない

試しにリモートSSHのタイムあうと時間を伸ばしてみると良いと思います。デフォルトでは15秒なので30秒くらいに伸ばしてみるなどしてください。

それで無理そうならAWS ToolKitをコンフィグごといったん初期化して試してみると良いです。

以下のディレクトリに設定が入っているのでamazonwebservices.aws-toolkit-vscodeを消して拡張機能を再インストールしましょう。

ls `pwd`/Library/Application\ Support/Code/User/globalStorage/amazonwebservices.aws-toolkit-vscode/codecatalyst_connect

Tips

devfile.yaml

開発環境の設定でCPUの数やメモリのサイズなどを設定できる箇所がありましたが、これはdevfileという設定でコード化できます。デフォルトでは以下のような設定になっています。

devfile.yaml

schemaVersion: 2.0.0
metadata:
  name: aws-universal
  version: 1.0.1
  displayName: AWS Universal
  description: Stack with AWS Universal Tooling
  tags: ["aws", "al2"]
  projectType: "aws"
components:
  - name: aws-runtime
    container:
      image: public.ecr.aws/aws-mde/universal-image:latest
      mountSources: true
      volumeMounts:
        - name: docker-store
          path: /var/lib/docker
  - name: docker-store
    volume:
      size: 16Gi

参考

• Amazon CodeCatalyst
• Creating a Dev Environment
• What is a devfile?
• devfile.io
• AWS-Black-Belt_2023_Amazon-CodeCatalyst-Dev-Environments_1231_v1
• Amazon CodeCatalyst による開発環境の管理

おわり