Visual Studioでリモート接続開発を構築する

<!-- wp:paragraph -->
<p>Visual Studioでは リモート接続の方法として、SSH、コンテナ、WSLがあります。今回はWindowsのクライアントに、SSHでリモートサーバーでの接続環境を構築します。</p>
<!-- /wp:paragraph -->
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146872/a893120f-d65c-1ab5-877e-968e0827f7b0.png)


<!-- wp:paragraph -->
<p>SSHキーを作成します。</p>
<!-- /wp:paragraph -->

<!-- wp:loos-hcb/code-block {"langType":"bash","langName":"Bash"} -->
<div class="hcb_wrap"><pre class="prism undefined-numbers lang-bash" data-lang="Bash"><code>注：xxxxxは伏字です
c:\Users\xxxxx\.ssh&gt;ssh-keygen -t rsa -b 4096 -f id_rsa_remote-ssh
Generating public/private rsa key pair.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in id_rsa_remote-ssh.
Your public key has been saved in id_rsa_remote-ssh.pub.
The key fingerprint is:
SHA256:XXXXX
The key&#39;s randomart image is:
+---[RSA 4096]----+
|=o+   o=         |
|+= +  =..        |
(省略)
| .         ..  .o|
+----[SHA256]-----+</code></pre></div>
<!-- /wp:loos-hcb/code-block -->

<!-- wp:paragraph -->
<p>ファイル id_rsa_remote-ssh.pub が作成されますので、接続したいリモート環境の~/.ssh以下にコピー、ファイル名をauthorized_keysに設定（既存ファイルがある場合は追記）パーミッションは600で設定します。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>設定が完了したら、クライアントから接続できるか確認します。</p>
<!-- /wp:paragraph -->

<!-- wp:loos-hcb/code-block {"langType":"bash","langName":"Bash"} -->
<div class="hcb_wrap"><pre class="prism undefined-numbers lang-bash" data-lang="Bash"><code>c:\Users\xxxxx\.ssh&gt;ssh -i id_rsa_remote-ssh root@192.168.254.116
The authenticity of host &#39;192.168.254.116 (192.168.254.116)&#39; can&#39;t be established.
ECDSA key fingerprint is SHA256:XXXXX.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added &#39;192.168.254.116&#39; (ECDSA) to the list of known hosts.
Enter passphrase for key &#39;id_rsa_remote-ssh&#39;:
Last login: Thu Dec 30 22:22:33 2021 from 192.168.254.117
[root@localhost ~]#</code></pre></div>
<!-- /wp:loos-hcb/code-block -->

<!-- wp:paragraph -->
<p>Visual Studio Codeに リモートの登録先を設定します。コマンドパレットから Remote-SSH:open SSH Configuiration File..を選択します。</p>
<!-- /wp:paragraph -->
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146872/c020439e-626c-fc37-5329-2eb8c7eb0a14.png)

<!-- wp:image {"id":199,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.mkhs.work/wordpress2/wp-content/uploads/2021/12/image-14.png" alt="" class="wp-image-199"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":201,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.mkhs.work/wordpress2/wp-content/uploads/2021/12/image-15.png" alt="" class="wp-image-201"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>私の環境では下記のように設定しました。</p>
<!-- /wp:paragraph -->
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146872/acbdc1bd-7ed2-3b49-6f9c-bd2df261a402.png)

<!-- wp:image {"id":202,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.mkhs.work/wordpress2/wp-content/uploads/2021/12/image-16.png" alt="" class="wp-image-202"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>リモートエクスプローラーから設定した内容を右クリックすると接続できるようになります。</p>
<!-- /wp:paragraph -->
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146872/dcd90854-5b33-24b6-4b2c-7fcbf0adb23d.png)


<!-- wp:image {"id":204,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.mkhs.work/wordpress2/wp-content/uploads/2021/12/image-18.png" alt="" class="wp-image-204"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":205,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.mkhs.work/wordpress2/wp-content/uploads/2021/12/image-19.png" alt="" class="wp-image-205"/><figcaption>秘密鍵を作成するときに設定したパスワードを入力</figcaption></figure>
<!-- /wp:image -->
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146872/54257554-a792-dae8-b859-3f83d42aa39b.png)

<!-- wp:paragraph -->
<p>ターミナルがリモートのシェルになっている事が確認できます。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":206,"sizeSlug":"full","linkDestination":"none"} -->

<!-- /wp:image -->
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146872/9d9763e4-a579-60bd-ef21-63939c766665.png)