VScodeでリモートサーバをさもローカルのように操作する

# 背景
AWS-cliを使ってコマンド操作でEC2にあれやこれやする方法を学んでいたときにこんな便利なツールがあったのか！と感動したのでメモ。

## やれること
VSCode上でEC2などのリモートサーバに接続してリモートサーバ側のディレクトリやファイル操作をVSCodeだけでやれる。
**VSCodeだけで**やれるのです。

## 前提
AWS EC2インスタンスが用意されて、キーペア設定など完了し、SSH接続の準備ができているものとします。
また、私が試した環境は Windows10 home です。
またキーペアのタイプはRSA、秘密鍵のファイル形式はOpenSSH(拡張子`.pem`)とします。

#### 用意するもの
- AWS EC2インスタンス
- キーペア
- EC2インスタンスSSH接続情報

AWSコンソールの
EC2 > インスタンス > [各自のインスタンスID] > 接続ボタン > SSHクライアントタブ
の`例:`のところに以下の様な記載があります。これがEC2インスタンスSSH接続情報です。

`ssh -i "[各自の秘密鍵ファイル名].pem" ec2-user@ec2-[各自のEC2インスタンス パブリックIP].ap-northeast-1.compute.amazonaws.com`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689484/84395bd1-c092-2cd5-7b5d-a5ed67a0ecfe.png)

## VScodeに拡張機能「Remote - SSH」をインストールする

この拡張機能をインストールします。
※202/2/20時点ではまだプレビュー（ベータ）版のようなので今後細かい仕様が変わるかも知れません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689484/3d7379fe-572a-1944-cd30-c513b0743f11.png)

## 接続の準備（ローカル）
### 秘密鍵ファイルを保存する
AWSから取得した秘密鍵ファイルをローカルPCに保存します。
私の場合は以下に配置しました。
`C:\Users\[ユーザ名]\.ssh\[各自の秘密鍵ファイル名].pem`

### ユーザディレクトリの下にconfigファイルを作成する。
私の場合は以下です。
`C:\Users\[ユーザ名]\.ssh\config`

### configファイルに接続するEC2の情報を記載する。
作成したconfigファイルに以下の情報を記載します。
各括弧で囲った部分を自分の情報に書き換えてください。
EC2再起動などでパブリックIPアドレスが変わったらそのたびに書き換えます。

`Hostは`コンフィグファイル名内での設定名。
`HostName`は接続先のサーバホスト名。IPアドレス。

```bash:C\Users\\[ユーザ名]\\.ssh\config
Host Test-EC2
  HostName [各自のEC2インスタンス パブリックIP].ap-northeast-1.compute.amazonaws.com
  IdentityFile ~/.ssh/[各自の秘密鍵ファイル名].pem
  User ec2-user
```


上記configの設定をしたうえでssh接続してみる。

```bash
# これだけで接続される。もうどこにいても。
ssh Test-EC2
```

接続できた！これはめちゃめちゃ便利！
なんでもっと早く知らなかったんだ。。
毎回sshツールでつないでlsしてcatやらtailやらしてました。。

## 使い方

### VSCode左下の緑色の部分をクリックする（**これが分かりずらい！**）

![2022-02-12-19-49-57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689484/139dbd38-876b-42b5-a19e-e2b5658f69ea.png)

### リストからconnect to host を選択する
![2022-02-12-19-50-48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689484/e8ec7c3b-e147-3a0c-57b9-188f65f1e162.png)

### configファイルで設定した接続先名が表示されるので選択する
初回は接続するか聞かれるのでcontinueを選択する

![2022-02-12-19-51-34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689484/707c095f-d651-2c2c-cc68-05e48d6445bc.png)


### 接続確認
左下の緑色のゾーンに接続先が表示されていれば接続成功

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689484/1bce2853-ab33-2312-698f-42573b52be2a.png)


### フォルダを開くでサーバのディレクトリを表示
![](2022-02-12-19-54-56.png)![2022-02-12-19-54-56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689484/21d63ff4-d4ff-65d1-03b4-60f735c67c67.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689484/69e7f7dd-7936-d707-b435-97a8c17838ea.png)

まるでローカルディレクトリのように左側にツリー表示される！

### ターミナルでの操作
ターミナルではbashからいつも通りのコマンドをつかえる！

![2022-02-12-19-55-56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689484/59e54b83-bfe5-f810-e0fd-eed24680b596.png)

### 他ディレクトリの閲覧
他のetcとかのファイルも閲覧可能！
Vscodeメニューの　ファイル　＞　フォルダを開くとすると
他のディレクトリも閲覧可能（権限によるとは思います）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689484/660b5b97-8f5a-14db-16aa-a4d21f453f08.png)

### ファイル操作
ファイルの編集も全てローカルと同じように操作可能！
左のツリーから新規作成しても、ターミナルからtouchなどでファイルを作っても完全に同期している！

![2022-02-12-20-00-59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689484/1260be7c-455d-9c27-c6ac-6725a6e15a26.png)

## まとめ
知っている人からしたら当たり前かもですが、
個人的には使い勝手の良さもさることながら
WindowsとLinuxは**絶対に混ざり合うことはない全く別の概念**だったので
ついに歩み寄る姿勢を見せてきたのかと嬉しくなって思わず記事を書いてしまいました。

おしまい。