VisualStudioCodeでサーバーにSSH接続する

# 1. 概要
WindowsPCにインストールされているVisualStudioCodeから、LinuxサーバーにSSH接続する。

# 2. 前提
- 接続先のサーバーがある(この記事ではRed Hat系のLinuxサーバーに接続します)
- VisualStudioCodeがインストールされている

※VSCodeポータブルを使用する場合は`見出し7`から

# 3. 拡張機能のインストール
Remote Developmentをインストールする。
![remote.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/0f2d0831-57a6-89e0-b8d9-434007d2f84e.png)

下記の赤枠が追加されていればOK
![side.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/50bf15ca-1fe7-8ff3-d48d-53287ba7c02e.png)

# 4. 実際にSSH接続する
VisualStdioCodeの右下の青い部分をクリックする。
![footer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/2af98323-d65d-c142-706d-343efe3152f0.png)

`ホストに接続する...`をクリックする。
![host.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/07cfcbc2-1449-25df-ac79-afe707bc811f.png)

`+新規SSHホストを追加する...`をクリックする。
![host1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/5368b32a-fca5-a2fc-a19b-0da40300ba63.png)

テキストボックスに接続先サーバのIPアドレスを入力する。
![host2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/23fb0f1a-fa3a-ae0a-9c5a-1b6d9a4d1d4a.png)

`C:\Users\ユーザ名\.ssh\config`をクリックする。
※.sshフォルダが存在しない場合は手動で作成する。
![host3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/76731de0-e990-7598-90b7-c5248790fd90.png)

Windowsのエクスプローラーから`C:\Users\ユーザ名\.ssh`のconfigファイルをメモ帳で開く。
最下行に`User root`と追記し上書き保存する。
![config.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/6cd6ec48-4ca3-7792-8309-c668c7e0a7ac.png)


左下、リモートエクスプローラーをクリックし、IPアドレスにカーソルを合わせて`新しいウィンドウで接続...`をクリックする。
![conect.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/b91f4298-6fb6-179f-000d-ccd03f11c9ba.png)

rootユーザのパスワードを入力しEnterキーを押下する。
![pass.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/6b8e0401-714d-23d4-a961-0e0732af8a69.png)

左下にIPアドレスが表示されていればSSH接続成功。
![success.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/3a5969db-e7a5-bd15-1f36-de3f2ade1953.png)

# 5. Linuxサーバーのディレクトリやファイルを開く
左上のエクスプローラーを選択し、フォルダを開くを選択する。
![dir.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/b51c26b3-3d1a-beb7-6b75-f7a00d5ac7b2.png)

開きたいディレクトリの絶対パスを入力し、OKを選択する。
![dir1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/82cbd52d-a732-12bf-8ee2-84acb5936f34.png)

もう一度パスワードの入力を求められた場合はパスワードを入力し、`はい、作成者を信頼します`を選択する。
![dir2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/15a955bc-76fe-949a-ec74-ebd9182a5516.png)

# 6. その他注意点
新しいウィンドウで開いた場合、拡張機能を別でインストールする必要がでてくる可能性があります。

# 7. VisualStudioCodeポータブルを使用する場合
## 7-1. インストール
VisualStudioCodeポータブルを以下のリンクからインストールする。

https://code.visualstudio.com/download

.zipの`x64`をクリックする。
![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/8f2d4b87-da46-35aa-997d-687d489e967e.png)

ダウンロードされたzipファイルを解凍する。
解凍したら`data`というフォルダを作成する。
![data.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/01f0b287-b1b5-5ac8-cc3f-ced775678d5b.png)

`Code.exe`をダブルクリックして開く。
![window.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/bbbcaecb-a3d1-2e94-317d-579c800c4db4.png)

## 7-2. 拡張機能のインストール
### 7-2-1. 日本語化する
テキストボックスに`japan`と入力し`Japanese Language Pack for Visual Studio Code`を選択しインストールする。
![japan.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/6dcb3049-1ea8-bfc7-f9f3-ec60773e5c5f.png)

右下の`Change Language and Restart`をクリックする。
![restart.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/b7a80c1e-f8c3-a238-cf0a-cff0c643512f.png)

再起動されて日本語化されたらOK
他に必要な拡張機能があれば適宜インストールする。

### 7-2-2. Remote-SSHのインストール
テキストボックスに`remote - ssh`と入力し`Remote - SSH`を選択しインストールする。
![remote.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/80444a23-5d75-09e4-fdf7-89f851d15f06.png)

下記の赤枠が追加されていればOK
![side.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/50bf15ca-1fe7-8ff3-d48d-53287ba7c02e.png)

### 7-2-3. configファイルの指定
Code.exeが格納されているフォルダに`.ssh`というフォルダを作成する。
![dottossh.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/dfe7b83b-4295-21b4-446a-47ff074d3d86.png)

VSCodeに戻り、`Ctrl` + `,`を押下し、テキストボックスに`Remote.SSH:Config`と入力。
`Remote.SSH:Config File`のテキストボックスに`${execPath}/../.ssh/config`と入力する。
![setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/7a2e4a79-b982-b680-c185-3711fe4fe346.png)

## 7-3. 実際にSSH接続する
VisualStdioCodeの右下の青い部分をクリックする。
![footer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/2af98323-d65d-c142-706d-343efe3152f0.png)

`Connect to Host...`をクリックする。
![connect.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/69f7feb4-7da8-4755-b074-9d00305e4b3f.png)

`+ 新規SSHホストを追加する...`をクリックする。
![new.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/0764deac-2c73-8183-d701-5c7130a99ba5.png)

サーバーのipアドレスを入力し、Enterキーを押下する。
![ip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/fba3cfe1-62bb-92e8-647c-66b8c1a89c73.png)

`${execPath}/../.ssh/config`をクリックする。
![folder.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/0d993efe-ffb9-af3d-68b8-43e8e828e144.png)

Code.exeが格納されているフォルダの`.ssh`フォルダにある`config`ファイルをメモ帳で開く。
最下行に`User root`と記述し上書き保存する。
![config.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/33137dfa-4ce3-6139-53f1-2d260d2c1489.png)

左下、リモートエクスプローラーをクリックし、IPアドレスにカーソルを合わせて`新しいウィンドウで接続...`をクリックする。
![ssh1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/1337ae89-036c-92ff-f5cd-abf6ef8e56ae.png)

rootユーザーのパスワードを入力しEnterキーを押下する。
![pass.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/74e424e0-5c2a-b8ab-0b0c-c1e7928e4c9b.png)

左下にIPアドレスが表示されていればSSH接続成功。
![success.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/8865e453-e730-12ec-c672-8b2a36a4e1f2.png)

## 7-4. Linuxサーバーのディレクトリやファイルを開く
左上のエクスプローラーを選択し、フォルダを開くを選択する。
![dir.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/b51c26b3-3d1a-beb7-6b75-f7a00d5ac7b2.png)

開きたいディレクトリの絶対パスを入力し、OKを選択する。
![dir1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/82cbd52d-a732-12bf-8ee2-84acb5936f34.png)

もう一度パスワードの入力を求められた場合はパスワードを入力し、`はい、作成者を信頼します`を選択する。
![dir2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885685/15a955bc-76fe-949a-ec74-ebd9182a5516.png)

## 7-5. その他注意点
- 新しいウィンドウで開いた場合、拡張機能を別でインストールする必要がでてくる可能性があります
- Code.exeが格納されているフォルダをzip化して、GoogleDriveやUSBメモリーなどに保存すれば別のデバイスでも使用できます

# 参考記事
[Visual Studio Code で Remote SSH する。](https://qiita.com/nlog2n2/items/1d1358f6913249f3e186)
[VSCode Portable ModeでもRemoteSSHを使いたい!](https://qiita.com/kairi003/items/4547ce7fdc99f1e0e0b6)