AWS Cloud9 + VSCodeで開発するまでの環境構築

概要

Cloud9で立ち上げた環境にVSCodeから繋ぎに行けると、VSCode側での拡張機能でLintingとかFormattingがバカバカ撃てて快適なので使いたかった。
結局無料枠のt2.microが弱すぎたので、ローカルで開発してCodeCommitにPushするかたちに落ち着いたが、手順自体はまとめたので共有。

用意するもの

WindowsのPC

Mac、Linuxについては解説していません。
試してないけど大体同じで行けそうな気はしてます。気だけしてます。（無責任）

Visual Studio Code

これいらないなら別のページ行ってください。
VSCodeの拡張機能が絡んでくる関係で、そのあたりの解説が参考にならないです。
拡張機能以外のところを参考にしたい場合は見ていっていただければと。

AWS IAMユーザのアクセスキー

管理権限持ちの人に作ってもらってください。作り方についてはここでは解説しません。

AWS CLI / AWS Command Line Interface

AWS コマンドラインインターフェイス配布ページからダウンロード。
インストーラを実行してインストールまでしておきましょう。

AWS Session Manager

AWS CLI 用の Session Manager プラグインをインストールするのページからインストーラをダウンロードできます。
このページの下の方にあるトピック欄から利用しているOSを選んで、リンク先のコマンドを実行、ダウンロードしたインストーラの実行までしておきましょう。

手順

1. Cloud9環境の作成

1. AWS Cloud9を開き、「環境を作成」を選択。
   
   ネットワーク設定はSSMの方を選択しておいてください。デフォルトがこちらになっていると思うので弄らなければOKのはず。(2024/01/08現在)
2. 環境を作成後、Cloud9 IDEを開く。
3. 画像のShow...から始まるフォルダの表示設定をすべて有効にする。
   

2. SSH用の設定作成

1. ローカルのWindowsPCで、SSHの公開鍵/秘密鍵を作成。

   C:\Users\ユーザ名> cd .ssh
   C:\Users\ユーザ名\.ssh> ssh-keygen
   Generating public/private rsa key pair.
   Enter file in which to save the key (C:\Users\ユーザ名/.ssh/id_rsa): C:\Users\ユーザ名\.ssh\id_rsa
   Enter passphrase (empty for no passphrase): (何も入力せずにEnter)
   Enter same passphrase again: (何も入力せずにEnter)
   Your identification has been saved in C:\Users\ユーザ名\.ssh\id_rsa.
   Your public key has been saved in C:\Users\ユーザ名\.ssh\id_rsa.pub.
   The key fingerprint is:
   SHA256:公開鍵 ユーザ名@PC名
   The key's randomart image is:
   +---[RSA 3072]----+
   |                 |
   |  ┈┈╱▔▔▔▔▔▔▔╲┈┈  |
   |  ┈┈▏┈┈╰╯╯╯┈▕┈┈  |
   |  ┈╭▏┈▕▏┗╮▎┈▕╮┈  |
   |  ┈╰▏┈┈┈┏╯┈┈▕╯┈  |
   |  ┈┈▏┈╲▂▂▂╱┈▕┈┈  |
   |  ┈┈╲┈┈┈┈┈┈┈╱┈┈  |
   |  ┈┈┈▔▔▏┈▕▔▔┈┈┈  |
   |  何らかの模様   |
   +----[SHA256]-----+
   

2. AWS CLIの設定をする。
   IAMからダウンロードしたアクセスキーは、今回以下のようになっているとする。

   Access key ID,        Secret access key
   foo+bar+foo+bar+foo+, foobar++foobar++foobar++foobar++foobar++
   

   ローカルのWindowsPCのコマンドラインにて以下を入力。

   > aws configure
   AWS Access Key ID [None]: foo+bar+foo+bar+foo+ (手もとのキーコピペしてね)
   AWS Secret Access Key [None]: foobar++foobar++foobar++foobar++foobar++ (手もとのキーコピペしてね)
   Default region name [None]: ap-northeast-1 (東京リージョン指定、他が良ければお好きに)
   Default output format [None]:
   

   この設定をデフォルトではなく、なにかしらの名付けをしておきたいのであれば、
   aws configure --profile Any-Nameという風に、--profileオプションをつけて実行する。
   そうすると、--profile Any-Nameでこの設定を利用することができる。

3. Visual Studio Codeの設定

1. Remote - SSHのダウンロード
   VSCodeの拡張機能マーケットプレイスからRemote - SSHをインストールする。
2. SSH設定の構築
   VSCodeの画面左下にこのような「><」みたいなアイコンが出る。
   
   これをクリックして画面上部の入力欄から
   ホストに接続する→新規SSHホストを追加する→お好みの設定名（今回はMyCloud9_Connection）を入力。
   ssh設定を保存する先を問われるので選択。
   今回はC:\Users\{{ユーザ名}}\.ssh\configに保存した体で進める。
3. SSH設定の変更・追記
   画面左下に「構成を開く」ボタンが表示されるので、これをクリックしてconfigファイルを開く。

   Host MyCloud9_Connection
     HostName MyCloud9_Connection
   

   これに追記/変更を加えて、以下のようにする。

   Host MyCloud9_Connection
     HostName InstanceID (作成したCloud9環境に紐づいているEC2インスタンスのインスタンスID)
     Port 22 (変更していなければこのままでOK)
     User ec2-user (変更していなければこのままでOK)
     IdentityFile C:\Users\ユーザ名\.ssh\id_rsa (先ほど作成したSSHキーの秘密鍵のフルパス)
     ProxyCommand C:\Program Files\Amazon\AWSCLIV2\aws.exe ssm start-session --target %h --document-name AWS-StartSSHSession --parameters portNumber=%p (オプションとして、aws cliの設定時に環境名をつけているのであれば)--profile Any-Name(を追記する)
   

4. Cloud9環境にSSH設定

1. Cloud9環境に入り、「~/.ssh/authorized_keys」を開く。
2. 「# Add any additional keys below this line」と記載のある行の下に、先ほど作成したSSHの公開鍵を貼り付ける。

5. SSH接続を実施

1. VSCodeのウィンドウ左下の「><」をクリックし、
   ホストに接続するor現在のウィンドウをホストに接続するを選択。
2. 作成したCloud9環境と関連付いているEC2が起動中であることを確認して、
   MyCloud9_Connectionを選択する。
3. 接続が成功して、Cloud9から確認できるファイルがVSCodeで見れるようになれば設定完了。

さいごに

手順まとめるのって難しい（というか手間が多い）ですね、記事書いてる人尊敬します。
誰が見てもわかる記事って考えること多いんだなって思いました。
これが「誰が見てもわかる記事」になっているかどうかは不明ですが、心がけたつもりです。
わからないところ、間違っているところがあればコメントお願いします。確認して修正しますので。

参考