Windows10 + VSCodeでリモートホスト上のDocker開発環境を使用する

# Visual Studio CodeのRemote Container拡張機能を使って、リモートホスト上にDocker開発環境を構築する
今回、開発環境を構築する際に色々と試行錯誤したので、自分用としてメモしてます。

# 環境
- Windows 10 Home（ローカル）
- Visual Studio Code
- WSL2
- Docker Desktop
- Ubuntu 20.04 LTS（リモートのDockerホスト）

# 事前準備
- WSL2のインストール
- Docker Desktopのインストール
- Visual Studio Codeインストール
  - 拡張機能：Dockerのインストール 
  - 拡張機能：Remote Developmentのインストール
- UbuntuへのDockerのインストール
  - Dockerの実行権をsshで接続するユーザに与える

# リモートへのssh接続の設定
WindowsからsshでリモートのUbuntuへ接続できるように設定を行う
## 公開鍵の登録
鍵のペアを生成して、リモートサーバに公開鍵を登録する

```Bash:powershell
# キーペアの作成
ssh-keygen -t ed25519
```
ssh-keygenを実行すると、キーペア(id_ed25519.pub、id_ed25519)が"C:\Users\ユーザ名\.ssh"に生成されます。
作成された公開鍵をリモートサーバへ登録します。
※.sshが存在しない場合は作成します。authorized_keysがすでに存在する場合は上書きすると既存のssh接続ができなくなる可能性があるので、注意しましょう。

```Bash:powershell
# 公開鍵の登録
scp C:\Users\ユーザ名\.ssh\id_ed25519.pub ユーザ名@IPアドレス:~/.ssh/authorized_keys
```

ssh-agentサービスへの秘密鍵の登録します。

```Bash:powershell
# サービス起動の確認※停止していたら起動する
Get-Service ssh-agent
# 秘密鍵の登録
ssh-add C:\Users\ユーザ名\.ssh\id_ed25519
# 鍵登録の確認
ssh-add -l
```

以上が完了したら、パスワードなしでssh接続できることを確認します。

```Bash:powershell
ssh ユーザ名@IPアドレス
```

## 拡張機能：Remote SSHを使用した接続
VScodeを開き、左のメニューからリモートエクスプローラーを表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680045/db6e95c7-183d-5fb0-27b9-fc0bc4eea4ff.png)
SSH TARGETSの横にある設定メニューを選択すると、Select SSH configuration file to updateと表示され、いくつかファイルが選択できるようになるので、C:\Users\ユーザ名\.ssh\configを選択して開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680045/73267302-eff1-53aa-bc75-4c4ad9aabfda.png)

以下のように設定します。

```~\.ssh\config
# Read more about SSH config files: https://linux.die.net/man/5/ssh_config
Host dev ※ リモートサーバのエイリアス名
    HostName IPアドレス
    Port 22
    User ユーザ名
```
設定がうまくいけばSSH TARGETSの部分にリモートサーバ(今回はdev)が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680045/e8cb36f8-3620-41d2-ec58-5a56be998c6e.png)

サーバ名を右クリック「Connect to Host in ~ 」でリモートサーバに接続できれば成功です。

# Docker開発環境の作成
今回はGOの開発環境を作成していきたいと思います。

# docker.hostの設定
リモートサーバをdockerホストとして設定します。
VSCodeの設定に以下を追加します。

```settings.json
"docker.host": "ssh://ユーザ名@IPアドレス"
```

## Dockerfileとdevcontainer.jsonの生成
Windows上のワークディレクトリを作成します。今回はGoという名前で作成しました。
GoディレクトリをVSCodeで開きます。
VScode下部から「リモートウィンドウを開く」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680045/f991b40d-6f6b-68ab-65d4-81a2a6ec092c.png)
以下のように表示されるので「Remote-Containers: Add Development Container Configuration Files...」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680045/66ae36fc-59fb-5243-5e79-04d952cb8bb3.png)
以下のように開発環境の選択肢が表示されるので、「Go」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680045/57e7b5f6-7183-d0b4-f9b2-22fb1a955730.png)
すると画像のように.devcontainerフォルダ配下にDockerfileとdevcontainer.jsonが生成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680045/88411d28-c2f5-a133-c3f7-ccd88bee7f01.png)

devcontainer.jsonに以下を追加します。

```devcontainer.json
	"workspaceMount": "source=/work/docker_dev,target=/workspace,type=bind,consistency=relegated",
	"workspaceFolder": "/workspace",
```
source=/work/docker_devはリモートサーバのワークディレクトリの絶対パスです。

以上が完了したら、リモートエクスプローラを開き、「Containers」を選択し、＋ボタンを押します。
以下のように表示されるので、「Open Current Folder in Container」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680045/59d7ce80-fe49-6d5c-a621-10e45e20ed53.png)

新しいウィンドウが開きます。
以下のようにコンテナの/workspaceに接続できていることを確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680045/3c22d860-2057-6955-49de-7f81083f6322.png)

ターミナルでGoのバージョンを表示します。

```Bash:bash
root@69dbfa463856:/workspace# go version
go version go1.14.6 linux/amd64
```

goがインストールされたコンテナにVSCodeから接続することができました。

# まとめ
VSCodeの拡張機能を用いることで、リモートサーバ上にDockerコンテナを作成し、VSCodeから接続できました。
今後問題に遭遇したら、解決方法など含め更新していきたいと思っています。