Cloud9にVSCodeからアクセスしてコードを弄る

# 背景
某プログラミングスクールでは 課題をするのにCloud9上でコードを書くのですがいかんせん、昨今流行りのCopilotやTabnineといったコード補完が無いのが物足りないので(そしてCloud9でやるという資料が少ないので) VSCodeのRemote SSHでコードを書きたくなりました。すでにいくつか記事はありますが、一応やってみたので載せておきます。

# 前提条件
- Windows10を使っている
- VSCodeが使える状態
- Cloud9をブラウザからアクセスできる状態

# やってみる
基本的にSSHを許可して、VSCodeに拡張機能を入れてから繋げるだけです。

## 1. セキュリティグループに穴をあける
デフォルトでは、指定されたIP以外(恐らくAWSマネージャとか?)以外SSHが塞がれているので
まず繋げるように許可しに行きましょう。

### AWSマネージメントコンソールに行く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254984/6926a351-c8a5-84a6-f3c7-fbd7be9e2e08.png)
### EC2見に行く 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254984/d7a80dec-bec1-9bc6-d704-be5b0628d40f.png)

ここでIPアドレスをコピーしてメモっておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254984/aba34eb3-0c56-1bf3-f707-799cf145c517.png)

### セキュリティグループを見に行く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254984/bcfc57f9-5c8d-eb13-cfa3-2047af8da153.png)
### インバウンドルール編集
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254984/1b27bd13-abdf-4610-a313-d6f26fa1c1af.png)
### ルールを追加して保存
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254984/fefa93c5-12f6-ba20-d9f1-5ed5a4e1a1cb.png)

## 2. SSHの鍵の作成と登録
Cloud9側/操作するPC側 どちらでもいいが ssh-keygenを行う。
自分は Cloud9側で行った。

### Cloud9の下のターミナルで下記コマンドを実行する
```ssh-keygen -b 4096 -C 'VS Code Remote SSH user' -t rsa```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254984/2239e91c-6b43-8869-100d-bb43e017a6fa.png)

### 公開鍵をCloud9のSSHに登録する
`~/.ssh/id_rsa.pub` に公開鍵ができているので、その内容を丸ごとコピーして
`~/.ssh/authorized_keys` の 最終行に貼り付ける
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254984/5d7be110-aa73-eebd-5d04-860b56f79dfc.png)

### 秘密鍵をクライアントのSSHに登録する
Cloud9にできた`~/.ssh/id_rsa`をダウンロードして、`C:\Users\ユーザー名\.ssh\cloud9_secret.key`として保存する。次に`C:\Users\ユーザー名\.ssh\config` を開き、こんな感じに設定しておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254984/bfaf57cd-31a7-2566-cf57-42469327222c.png)

### メモ
Windows10バージョン1803以降では SSHクライアントはデフォルトで内蔵していて何も追加で入れなくてもssh/ssh-key-genが使えるようになっている。便利になったなぁ。

## 3. VSCodeの設定と接続
単にインストールするだけ、あっさり。

### 拡張機能の追加
拡張機能タブを開いて、 `Remote -SSH` をインストール (Preview版なので転んでも泣かないこと)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254984/cbdd4038-3b82-7e76-0358-c7e4542a31b9.png)

### リモートエクスプローラを開く
左のアイコン一覧からSSHっぽいのを選ぶ。ちゃんと設定できていれば Cloud9が選択肢に表示される。
(一瞬どこからつなぐか迷ったが、単にアイコンが非表示になっていた。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254984/0219887b-360b-5a04-e1b3-39a905b3ee79.png)

### 接続
Cloud9を右クリックして Connect to Host すれば接続される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254984/f1ca833e-d471-d87b-5f6a-79698074ae23.png)

### 相手方の種別を選択
(スクショ取れなかった)
Windows/MacOS/Linux と 選択させられる。 今回はCloud9がUbuntuで動いているので、Linuxを選択した。何やらダイアログが出たりするので、リモートエクスプローラ用の設定フォルダとか作るのだと思われる。

### 接続完了
接続されたら エクスプローラタブを見たときに、 `リモートに接続されています`。と言われ、`フォルダーを開く`から、リモートのフォルダーを見れるようになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254984/239ac021-f2cd-a294-4d9f-2a8c17035efb.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254984/4332cd01-ff46-5f02-c634-fb4ac1592f06.png)
Gitリポジトリであれば、ちゃんと認識されてコミットとかもできる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254984/6e3212e9-0feb-5770-90a4-50667bb7e6e6.png)

## 4. Cloud9を自動終了させない設定をする
Cloud9はブラウザ画面を開いていないと **インスタンスが勝手に終了する省エネ仕様**になっている。なので、自動終了させないようにするとかしたいなら、もっと追加で設定する必要があるらしい。ただ、今回はプログラミングスクールのサポート外のことをやっていて 下手に環境壊したら後がめんどくさいので、ブラウザの画面を開きながらVSCodeで弄ることで妥協する。

# 完走した感想
既存資料とAWSの画面構成が違ったので どこ行けばいいのかわからんかった。
あと、SSHの鍵登録をよしなに～っての慣れてないので軽く調べたりした。

## 追記
Cloud9がシャットダウンする都度 IPアドレスは変わってしまうみたいです
少々、というかかなりめんどくさいので **4.**をやったほうが良さそうですね...

# 参考資料

https://blog.mmmcorp.co.jp/blog/2019/08/30/cloud9-with-vscode/

https://miima17.com/use-vscode-on-cloud9/

https://dev.classmethod.jp/articles/windows10-cmd-ssh-scp/