0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-09-15

背景

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

前提条件

  • Windows10を使っている
  • VSCodeが使える状態
  • Cloud9をブラウザからアクセスできる状態

やってみる

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

1. セキュリティグループに穴をあける

デフォルトでは、指定されたIP以外(恐らくAWSマネージャとか?)以外SSHが塞がれているので
まず繋げるように許可しに行きましょう。

AWSマネージメントコンソールに行く

image.png

EC2見に行く

image.png

ここでIPアドレスをコピーしてメモっておく
image.png

セキュリティグループを見に行く

image.png

インバウンドルール編集

image.png

ルールを追加して保存

image.png

2. SSHの鍵の作成と登録

Cloud9側/操作するPC側 どちらでもいいが ssh-keygenを行う。
自分は Cloud9側で行った。

Cloud9の下のターミナルで下記コマンドを実行する

ssh-keygen -b 4096 -C 'VS Code Remote SSH user' -t rsa
image.png

公開鍵をCloud9のSSHに登録する

~/.ssh/id_rsa.pub に公開鍵ができているので、その内容を丸ごとコピーして
~/.ssh/authorized_keys の 最終行に貼り付ける
image.png

秘密鍵をクライアントのSSHに登録する

Cloud9にできた~/.ssh/id_rsaをダウンロードして、C:\Users\ユーザー名\.ssh\cloud9_secret.keyとして保存する。次にC:\Users\ユーザー名\.ssh\config を開き、こんな感じに設定しておく。
image.png

メモ

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

3. VSCodeの設定と接続

単にインストールするだけ、あっさり。

拡張機能の追加

拡張機能タブを開いて、 Remote -SSH をインストール (Preview版なので転んでも泣かないこと)
image.png

リモートエクスプローラを開く

左のアイコン一覧からSSHっぽいのを選ぶ。ちゃんと設定できていれば Cloud9が選択肢に表示される。
(一瞬どこからつなぐか迷ったが、単にアイコンが非表示になっていた。)
image.png

接続

Cloud9を右クリックして Connect to Host すれば接続される
image.png

相手方の種別を選択

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

接続完了

接続されたら エクスプローラタブを見たときに、 リモートに接続されています。と言われ、フォルダーを開くから、リモートのフォルダーを見れるようになる。
image.png
image.png
Gitリポジトリであれば、ちゃんと認識されてコミットとかもできる。
image.png

4. Cloud9を自動終了させない設定をする

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

完走した感想

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

追記

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

参考資料

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?