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

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

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

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

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

そうは思ったものの、これまでVSCodeの拡張機能などを捨てるには惜しく、悩んでいたところ、なんとAWSアーキテクチャブログに「VSCodeからCloud9を使う」手順がありました。

ただし完全に英語なので、私が途中で加えた変更も追記しつつ、日本語で記載していこうと思います。

目次

Cloud9をVSCodeで扱う手順

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

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

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

準備1)Cloud9の準備

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

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

準備2)PCの準備

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

注意点

  • インストールは全て必須です。省略しないでください。
  1. AWS CLI
    • 使ったことがない人は、AWSから正しく情報が取得できるまで(aws s3 lsなど)を必ずやっておいてください。
    • V2.xまたはV1.16.12以降をインストールしてください。
  2. SSHが動作する環境
    • 最新のWindowsまたはMacなら動作するはずですが、アップデートしていない場合はsshコマンドが動くか確認しておいてください。
    • 私の検証環境はMacです。
  3. VSCode拡張機能
    • リモートSSHの拡張機能をインストールしておいてください。
    • リンク先からVSCodeを起動することができ、そのままインストールできます。
  4. 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の部分は東京リージョンという意味です。適宜書き替えしてください。

実際に接続してみる

VSCodeの画面から接続してみます。

左下の><ボタンからでも良いですし、コマンドパレットからremote-sshを入力して[Remote-SSH: Connect Current Window to Host]を選択して、cloud9を選択してください。

上手く接続ができたらこれで手順は完了です。VSCodeからCloud9が操作できます。もし拡張機能が必要なら、個別にインストールしてください。

おわりに

今回はCloud9環境でVSCodeを使う方法について紹介しました。

まだ私も使い始めたばかりなので、何か気づきがあればこの記事で共有していきます。

とりあえずディスクの空き容量は少ないので、すぐ拡張機能したほうが良さそうです。

以上、Cloud9をVSCodeから使う方法でした。

目次
閉じる