【AWS】Cloud9をVSCodeから使えるようにする

2021年8月9日2021年9月24日

URLをコピーしました！

こんにちは、みーまです。

最近下記の理由から、Cloud9を使い倒してみようかなと思っています。

M1 MBPでDockerを使うとarchに邪魔される
RaiseTech（※）の講座でCloud9を使う事にしたので、なるべく触れていたほうが良い

※私はRaiseTechというスクールで受講者のサポートをしています。

Cloud9をVSCodeで扱う手順

この手順を全て終えるとCloud9をVSCode経由で扱えるようになります。

VSCodeでCloud9を扱うときのポイント、操作感など

VSCodeはローカル環境とSSH接続した先の環境で拡張機能を別々に管理していますので、ローカル環境でインストールした拡張機能はCloud9だとインストールしていない状態として認識されます。必要な機能は個別にインストールし直してください。
ローカルでインストールしたことがある拡張機能はボタンがInstall in SSHに変わっていて、全くインストールしていない状態より分かりやすくなっています。
全ての拡張機能が使えるわけではないようです。
- 実際にVSCode上から繋がらなくなることがあり、そのときは従来のCloud9画面でファイルを待避して再度環境を作りました。

準備1）Cloud9の準備

まず、Cloud9の準備を行ってください。

まだ構築していない場合
└必ずCreate a new no-ingress EC2 instance for environment (access via Systems Manager)を選択してください。
既に構築済みの場合
└Cloud9の環境名と似た名前のEC2がマネジメントコンソール上に存在するので、「セキュリティ」-「IAMロールを変更」からIAMロール「AWSCloud9SSMInstanceProfile」を選択して適用してください。
└もし上記のIAMロールが無い場合は新規作成が必要なので、1の構築の手順を進めてください。既に別のCloud9環境を使っている場合は、中に保存しているファイルについてはCloud9上からダウンロードすることができますので、待避してください。

準備2）PCの準備

次に、普段使うPC上で下記をインストールしておいてください。

注意点

インストールは全て必須です。省略しないでください。

AWS CLI
- 使ったことがない人は、AWSから正しく情報が取得できるまで（aws s3 lsなど）を必ずやっておいてください。
- V2.xまたはV1.16.12以降をインストールしてください。
SSHが動作する環境
- 最新のWindowsまたはMacなら動作するはずですが、アップデートしていない場合はsshコマンドが動くか確認しておいてください。
- 私の検証環境はMacです。
VSCode拡張機能
- リモートSSHの拡張機能をインストールしておいてください。
- リンク先からVSCodeを起動することができ、そのままインストールできます。
Session Manager プラグイン
- AWSのサービスであるSession Managerで擬似的にSSH接続します。
- これによりセキュリティグループの開放が不要です。
- 必ず起動することまで確認してください。

キーペアの作成〜Cloud9への登録

SSH接続にはキーペアが必要です。Cloud9用のキーペアを作成します。ファイル名は標準のままではなく、分かりやすい名前にしておくと良いでしょう。

注意点

これ以降のコマンドサンプルに$が付きますが、これはコマンドの入力を示す記号で、入力しろという意味です。$自体は不要です。

メモ

コマンド入力後に画面にでるガイダンスについての解説は割愛します。
既に使っているキーペアで対応したい場合はスキップしてください。

$ cd ~/.ssh
$ ssh-keygen -b 4096 -C 'VS Code Remote SSH user' -t rsa

無事にキーペアが作成されると、拡張子がないファイル（秘密鍵）と.pub（公開鍵）ファイルが作成されますので確認してください。

次に、Cloud9上の~/.ssh/authorized_keysに、.pubのほうの内容を12行目にコピペします。

ポイント

authorized_keysを開くにはCloud9のターミナルに以下のコマンドを実行してもらえれば、エディタで開いてくれます。

$ npm install -g c9
$ c9 ~/.ssh/authorized_keys

注意点

Cloud9上のエディタは自動セーブされません。保存を忘れないでください。

デフォルトの自動シャットダウンスクリプトを置き換える

Cloud9は未使用時間で自動シャットダウンするようになっていますが、使用しているとみなされるのはあくまでもブラウザ接続に限るので、そのままだと利用中にシャットダウンされてしまいます。

AWSアーキテクチャブログでは、SSH接続だけ（ブラウザで画面を開いていないとき）でも起動を維持するようにこのシャットダウンスクリプトを変更するように説明しています。

Modify the shutdown script
As an optional cost saving measure in AWS Cloud9, you can specify a timeout value in minutes that when reached, the instance will automatically power down. This works perfectly when you are connected to your AWS Cloud9 IDE through your browser. In our use case here, we connect to the instance strictly via SSH from our Visual Studio Code IDE. We modify the shutdown logic on the instance itself to check for connectivity from our IDE, and if we’re actively connected, this prevents the automatic shutdown.
https://aws.amazon.com/jp/blogs/architecture/field-notes-use-aws-cloud9-to-power-your-visual-studio-code-ide/

変更は下記のコマンドをCloud9上のターミナルで実行してもらうだけでOKです。

# Save a copy of the script first
$ sudo mv ~/.c9/stop-if-inactive.sh ~/.c9/stop-if-inactive.sh-SAVE
$ curl https://raw.githubusercontent.com/aws-samples/cloud9-to-power-vscode-blog/main/scripts/stop-if-inactive.sh -o ~/.c9/stop-if-inactive.sh
$ sudo chown root:root ~/.c9/stop-if-inactive.sh
$ sudo chmod 755 ~/.c9/stop-if-inactive.sh

ここまで準備ができたら、Cloud9のインスタンスID（固有のマシンID）を確認します。

当ブログで過去に書いた記事を参考にしていただくとインスタンスは特定できますので、i-xxxxxxxxxxxxの形式のIDを確認して控えてください。

PC側作業

ここからPC側の作業です。Session ManagerでSSHできるように設定を行います。

まず、Session Managerを使う為のスクリプトを入手して配置しましょう。

このスクリプトは、Cloud9が起動していないときは起動する機能が含まれています。（この為にもAWS CLIが必須になります）

$ curl https://raw.githubusercontent.com/aws-samples/cloud9-to-power-vscode-blog/main/scripts/ssm-proxy.sh -o ~/.ssh/ssm-proxy.sh
$ chmod +x ~/.ssh/ssm-proxy.sh

次に入手したスクリプトを変更しますが、ここに私独自のカスタマイズを入れています。7行目、8行目を下のサンプルの通りにしてください。9行目、10行目は5秒間隔で5回、起動しているかチェックする、というものです。基本はそのままでOKです。1回で起動しなかった場合はSLEEP_DURATIONを多めに調整すると良いです。

# Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
# SPDX-License-Identifier: MIT-0

#!/bin/bash
# Configuration
# Change these values to reflect your environment
AWS_PROFILE=$3
AWS_REGION=$4
MAX_ITERATION=5
SLEEP_DURATION=5

スクリプトが設定できたら、SSHの設定を追記します。~/.ssh/configを開いて、下記を追記します。

# Update hostname with your AWS Cloud9 EC2 instance ID
Host cloud9（分かりやすい名前があれば変えてもOK）
  IdentityFile ~/.ssh/秘密鍵のファイル名
  User ec2-user
  HostName i-XXXXXXXXXXXXXXXXX（調べて書き替える）
  ProxyCommand sh -c "~/.ssh/ssm-proxy.sh %h %p default ap-northeast-1"

ポイント

HostNameは、Cloud9が生成したEC2のインスタンスIDです。ここまで順に進めていれば、Cloud9のダッシュボードからEC2のページへ移動してコピーしてきているはずです。
ProxyCommandで~/.ssh/ssm-proxy.shを呼び出しています。defaultの部分はAWS CLIのプロファイル名で、ap-northeast-1の部分は東京リージョンという意味です。適宜書き替えしてください。