このリポジトリでは、AWS 上に Cloud9 の代替となる開発環境を構築するための手順と設定ファイルを公開しています。 AWS Cloud9 の代替として、EC2 インスタンスで Visual Studio Code Server を使用します。

• 環境構築手順
• トラブルシューティング
• 停止・削除手順
• 基本操作
• 各種インストール手順
• 参考リポジトリ

マネジメントコンソール上部の検索欄で「CloudFormation」を検索して開きます。

CloudFormation のホーム画面左のメニューから「スタック」を開き、「スタックの作成」を選択します。

cloud9-alternative-cloudformation.yaml をダウンロードして、「スタックの作成」画面でアップロードして次に進みます。

スタック名を適当につけて、その他の設定はデフォルトのままで、作成まで進めます。 (最後に IAM リソースが作成されることを承認するチェックボックスにチェックが必要です)

しばらくすると、スタックの作成が完了します。

マネジメントコンソール上部の検索欄で「EC2」を検索して開きます。

EC2 のホーム画面左のメニューから「インスタンス」を開き、EC2 インスタンスを選択して、上部の「接続」をクリックします。

「EC2 Instance Connect」のタブを選択して「接続」をクリックすると、ブラウザ上で EC2 インスタンスに接続できます。

作成した EC2 インスタンスには、Visual Studio Code がインストール済みです。 以下の手順で、Visual Studio Code Server を起動して接続することができます。

まず、EC2 インスタンスで以下のコマンドを実行して、Visual Studio Code Server を起動します。

code tunnel service install

以下のように、メッセージとともにコード (8 桁の英数字) が表示されます。

[2024-08-05 05:40:38] info Using GitHub for authentication, run `code tunnel user login --provider <provider>` option to change this.
To grant access to the server, please log into https://github.com/login/device and use code XXXX-XXXX

ブラウザの別タブで https://github.com/login/device にアクセスし、GitHub にログインして、ターミナル上に表示されたコードを入力してください。

その後、EC2 Instance Connect の画面に戻り、以下のコマンドを実行してください。

code tunnel

すると、以下のように表示されます。

*
* Visual Studio Code Server
*
* By using the software, you agree to
* the Visual Studio Code Server License Terms (https://aka.ms/vscode-server-license) and
* the Microsoft Privacy Statement (https://privacy.microsoft.com/en-US/privacystatement).
*
[2024-08-05 05:42:42] info Creating tunnel with the name: XXXXXXXXXXXXXXXXXXXX
[2024-08-05 05:42:42] info
Open this link in your browser https://vscode.dev/tunnel/XXXXXXXXXXXXXXXXXXXX

Connected to an existing tunnel process running on this machine.

Open this link in your browser https://vscode.dev/tunnel/XXXXXXXXXXXXXXXXXXXX

最後の行に表示された URL にアクセスして GitHub でログインすると、ブラウザ上で Visual Studio Code が開きます。

EC2 インスタンスには、起動時のスクリプト (ユーザーデータ) で Visual Studio Code をインストールしています。

code コマンドが見つからない場合、以下のコマンドでユーザーデータのログを確認してください。

cat /var/log/cloud-init-output.log

code コマンドはインストールされているものの、ブラウザから Visual Studio Code に接続できない場合、以下のコマンドで Visual Studio Code Server の起動状況を確認してください。

code tunnel service log

構築した開発環境を使わないときは、「EC2 インスタンスの停止」または「CloudFormation スタックの削除」により、料金を削減することができます。

マネジメントコンソール上部の検索欄で「EC2」を検索して開きます。

EC2 のホーム画面左のメニューから「インスタンス」を開き、EC2 インスタンスを選択して、「インスタンスの状態」から「インスタンスの停止」を実行します。

マネジメントコンソール上部の検索欄で「CloudFormation」を検索して開きます。

CloudFormation のホーム画面左のメニューから「スタック」を開き、スタックを選択して、「削除」を実行します。

画面左のメニューボタン (≡) をクリックし、「ターミナル」>「新しいターミナル」でターミナルを開くことができます。

作業用のディレクトリは、ターミナルで mkdir workspace のようなコマンドで作成してください。

画面左のメニューボタン (≡) をクリックし、「ファイル」>「フォルダーを開く」で作成したディレクトリを開くことができます。

ターミナル上で Web アプリケーション等を起動した場合、ターミナルの右の「ポート」のタブを開いて、「転送されたアドレス」を右クリックし、「ブラウザーで開く」をクリックすると開くことができます。または、画面右下に表示される「ブラウザーで開く」をクリックしてください。

以下のコマンドで Git をインストールできます。

sudo dnf install -y git

以下のコマンドで、インストールできたことを確認してください。

git -v

Node.js や Terraform などの特定バージョンをインストールしたい際は、asdf を使用すると便利です。

以下の公式ドキュメントに従って、「1. 依存関係のインストール」「2. asdf のダウンロード」「3. asdf のインストール」の手順でインストールしてください。

https://asdf-vm.com/ja-jp/guide/getting-started.html

なお、「1. 依存関係のインストール」ではパッケージマネージャが DNF の場合の手順を実施してください。 また、「3. asdf のインストール」では、「Bash & Git」の手順を実施してください。

「3. asdf のインストール」で ~/.bashrc を編集したら、ターミナルを一度閉じて開き直してください。

以下のコマンドで、インストールできたことを確認してください。

asdf version

asdf を使って Node.js をインストールする手順を以下に示します。

まず、以下のコマンドで Node.js のインストールに必要な OS のパッケージをインストールします。

sudo dnf install -y python3 gcc-c++ make python3-pip

参考: https://github.com/nodejs/node/blob/main/BUILDING.md#building-nodejs-on-supported-platforms

続いて、以下のコマンドで asdf の Node.js プラグインをインストールします。

asdf plugin add nodejs

作業用のディレクトリに .tool-versions というファイルを作成し、インストールしたい Node.js のバージョンを以下のように記述します。

nodejs 20.16.0

.tool-versions を配置したディレクトリで以下のコマンドを実行して、Node.js をインストールします。

asdf install

以下のコマンドで、インストールできたことを確認してください。

node -v

EC2 インスタンスで Visual Studio Code Server を使用する環境の構築は、「AWS CDK Conference Japan 2024 presented by JAWS-UG コントリビュートワークショップ」のリポジトリを参考にさせていただきました。