【AWS】Visual Studio CodeでCloud9のファイルを編集する方法

AWSのCloud9上のファイルをVisual Studio Code（以降、VS Code）で編集するための設定方法です。

Cloud9にもエディタ機能はあるのですが、VS Codeでコードを書きたい場面もあると思います。

この記事ではVS Codeの拡張機能「Remote SSH」で実現します。

SSH接続の設定

まず自分のPCからCloud9にSSH接続できるようにしておく必要があります。

Macでの設定にはなりますが、SSH接続の設定については過去記事で扱っています。

設定が完了していれば、次のようなコマンドでCloud9に接続できるはずです。

.pemファイル、IPアドレスの部分は自身の設定・環境に応じて変更が必要です。

ssh -i ~/.ssh/key.pem ec2-user@43.206.108.64

Remote SSHのインストール

VS Codeの拡張機能「Remote SSH」をインストールします。

左メニュー内の「拡張機能」をクリックして、検索ボックスに「remote ssh」と入力します。

一覧から「Remote – SSH」を探して、「インストール」をクリックしましょう。

インストールが完了すると、左メニューに「リモート エクスプローラ」のアイコンが追加されるはずです。

これでインストールは完了です。

Remote SSHの設定

次にRemote SSHの設定をします。

先ほど追加されたアイコンをクリックして、「リモート エクスプローラー」の画面に移動します。

SSH接続情報を設定するために、「＋」アイコンをクリックします。

SSHコマンドを入力して、Enterキーを押します。

続いて設定を書き込むファイルを選択します。

そのままEnterキーを押すと「~/.ssh/config」に接続情報が書き込まれます。

必要に応じて、設定ファイルを変更してください。

設定が完了すると、SSHターゲットに追加されます。

右にあるウィンドウのアイコンをクリックすると、新規ウィンドウが開いて接続することができます。

新規ウィンドウが開いたら、左の「エクスプローラー」アイコンをクリックします。

「フォルダーを開く」をクリックすると、ファイル・フォルダーを選択する画面になりますので、選択して「OK」をクリックします。

これでCloud9上のファイルやフォルダを表示されるはずです。

もちろん編集なども可能です。

設定は以上になります。