【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](https://docs.aws.amazon.com/codecatalyst/latest/userguide/devenvironment-create.html)より参照

## Dev Environmentの料金

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

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

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

- [料金に関する記載](https://codecatalyst.aws/explore/pricing)

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

## セットアップ

少しだけ触ってみるだけなら料金がかからないということで触ってみましょう。
なお、今回はCodeCatalystのセットアップとGitHubのアカウントをリンクしたことを前提にしております。[手順](https://qiita.com/ymd65536/items/6b52dd87e74d8b172db4)

## ここからハンズオン

事前準備

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

### Dev Environmentsを開く

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

![Screenshot 2024-05-30 at 12.40.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/7ef09dc2-2e92-2801-35df-3809e7888798.png)

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

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

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

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

![Screenshot 2024-05-30 at 13.00.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/631686af-edde-2674-0f49-0a095bcc2bd8.png)

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

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

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

![Screenshot 2024-05-30 at 13.03.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/faa905cf-e0b3-4afb-d8c3-2f65dd4e4cac.png)

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

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

![Screenshot 2024-05-30 at 13.04.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/1f2a06cd-829d-4b23-1ae9-5616bbe528df.png)

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

![Screenshot 2024-05-30 at 13.05.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/eee5735a-26c3-2293-4722-a6c84ffbd7bb.png)

### 開発環境の設定と起動

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

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

![Screenshot 2024-05-30 at 13.05.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/c1ba7f95-b52b-c5e8-f8b4-c3b6d971c707.png)

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

![Screenshot 2024-05-30 at 13.06.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/321cd76b-e6cb-dbaa-b085-26f2ec033665.png)

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

![Screenshot 2024-05-30 at 13.07.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/8631534f-15c4-eeb2-94dc-24e9aaee33b2.png)

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

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

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

![Screenshot 2024-05-30 at 13.20.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/30d1f214-f544-35a7-0791-24f5f94cd8b1.png)

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

```bash
uname -a
```

実行結果
```text
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の左下をクリックします。

![Screenshot 2024-05-30 at 13.26.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/ce3a1c4c-4bb1-4d74-ac04-7bff20776877.png)

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

![Screenshot 2024-05-30 at 13.28.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527543/6c5e1a9f-107c-99f6-c2ea-45a438ae2e57.png)

これでセッションを切断できました。なお、セッションを切断しただけでは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`という設定でコード化できます。デフォルトでは以下のような設定になっています。

```yaml: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](https://aws.amazon.com/jp/codecatalyst/)
- [Creating a Dev Environment](https://docs.aws.amazon.com/codecatalyst/latest/userguide/devenvironment-create.html)
- [What is a devfile?](https://devfile.io/docs/2.0.0/what-is-a-devfile)
- [devfile.io](https://devfile.io/)
- [AWS-Black-Belt_2023_Amazon-CodeCatalyst-Dev-Environments_1231_v1](https://pages.awscloud.com/rs/112-TZM-766/images/AWS-Black-Belt_2023_Amazon-CodeCatalyst-Dev-Environments_1231_v1.pdf)
- [Amazon CodeCatalyst による開発環境の管理](https://aws.amazon.com/jp/blogs/news/managing-dev-environments-with-amazon-codecatalyst/)

## おわり