vscodeでremote containersを使ってみる

# 概要
- vscodeでコンテナにリモートアクセスして開発
- dockerコンテナ上で開発環境が作れる
- Workspaceのファイルは ローカルファイルシステムからコンテナへ マウント or コピー or クローンができる
- 詳しいドキュメントはここに書かれています
    - https://code.visualstudio.com/docs/remote/containers
- ドキュメントにあったイメージ図を拝借
- <img width="762" alt="スクリーンショット 2021-07-16 16.34.13.png (192.1 kB)" src="https://img.esa.io/uploads/production/attachments/8212/2021/07/16/74788/2c06eff3-423c-43e5-9d71-c2dfdabd1067.png">

# 環境
- 今回試した環境はこちらです
- M1 Mac Book Pro (Big Sur)
- Docker Desktop


# 手順
## remote containersの導入 
- [remote containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)のvscode拡張機能を入れておきます

## 設定ファイル 
- `.devcontainer/devcontainer.json`を設定ファイルとしてリポジトリに置いておきます
- 存在しない場合は自動でプロトタイプを生成してくれるみたいです
- `.devcontainer/Dockerfile`や`.devcontainer/docker-compose.yml`を置いて開発環境用のコンテナを設定できます

## remote containerの起動
1.  vscodeを開き、左下の緑色のメニューを選択　
    - <img width="45" alt="スクリーンショット 2021-07-14 19.57.27.png (9.2 kB)" src="https://img.esa.io/uploads/production/attachments/8212/2021/07/16/74788/97fe5adc-b72a-47fc-8916-903e1b784425.png">

1. Open Folder in Containerを選択します
    - <img width="515" alt="スクリーンショット 2021-07-14 19.59.52.png (94.8 kB)" src="https://img.esa.io/uploads/production/attachments/8212/2021/07/16/74788/f70e056d-df6d-40c8-abc4-cdb9a9b5bc55.png">

1. または、コマンドパレット(`F1`)からRemote-Containers: Open Folder in Container...を選択してもできます

1. ファイル選択のウィンドウが現れるので、作業リポジトリを選択します
     - ここで`.devcontainer/devcontainer.json`が存在しない場合は以下のようなメニューから自動で生成できるみたいです
    - <img width="508" alt="スクリーンショット 2021-07-16 16.45.06.png (86.3 kB)" src="https://img.esa.io/uploads/production/attachments/8212/2021/07/16/74788/aaf806e2-09d7-48d6-8947-34718a833a78.png">

1. Starting Dev Container と表示されimageが生成されます

# 生成例
- 今回は試しにGo 1.16を選択して自動でコンテナ生成してみました
- 生成されたファイル
 ## devcontainer.json
```json
// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.187.0/containers/go
{
	"name": "Go",
	"build": {
		"dockerfile": "Dockerfile",
		"args": {
			// Update the VARIANT arg to pick a version of Go: 1, 1.16, 1.15
			"VARIANT": "1.16",
			// Options
			"INSTALL_NODE": "false",
			"NODE_VERSION": "lts/*"
		}
	},
	"runArgs": [ "--cap-add=SYS_PTRACE", "--security-opt", "seccomp=unconfined" ],

	// Set *default* container specific settings.json values on container create.
	"settings": {
		"go.toolsManagement.checkForUpdates": "local",
		"go.useLanguageServer": true,
		"go.gopath": "/go",
		"go.goroot": "/usr/local/go"
	},

	// Add the IDs of extensions you want installed when the container is created.
	"extensions": [
		"golang.Go"
	],

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Use 'postCreateCommand' to run commands after the container is created.
	// "postCreateCommand": "go version",

	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
	"remoteUser": "vscode"
}



## Dockerfile
```Dockerfile
# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.187.0/containers/go/.devcontainer/base.Dockerfile

# [Choice] Go version: 1, 1.16, 1.15
ARG VARIANT="1.16"
FROM mcr.microsoft.com/vscode/devcontainers/go:0-${VARIANT}

# [Option] Install Node.js
ARG INSTALL_NODE="true"
ARG NODE_VERSION="lts/*"
RUN if [ "${INSTALL_NODE}" = "true" ]; then su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"; fi

# [Optional] Uncomment this section to install additional OS packages.
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
#     && apt-get -y install --no-install-recommends <your-package-list-here>

# [Optional] Uncomment the next line to use go get to install anything else you need
# RUN go get -x <your-dependency-or-tool>

# [Optional] Uncomment this line to install global node packages.
# RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g <your-package-here>" 2>&1
```

        

# 備考
 ## 拡張機能の追加
- 拡張機能のナビゲーションバーの設定からAdd to devcontainer.jsonで追加できます
- <img width="552" alt="スクリーンショット 2021-07-16 17.12.11.png (209.8 kB)" src="https://img.esa.io/uploads/production/attachments/8212/2021/07/16/74788/7f81daf8-9db2-4f24-8410-ac29dfb141eb.png">

### 拡張機能を常に追加したい場合
- ユーザ設定のjsonファイル(settings.json)に`"remote.containers.defaultExtensions"`として追加すると常にリモートコンテナにその拡張機能がインストールされるみたいです
- gitlensを追加したい場合の例
```json
"remote.containers.defaultExtensions": [
    "eamodio.gitlens",
]
```

## gitの設定
- ローカルの`.gitconfig`がコピーされる

## パーミッション
- デフォルトではリモートコンテナではrootユーザとして`workspaces/`下にローカルファイルがマウントされるようです
- 調査中


# 参考
- https://code.visualstudio.com/docs/remote/containers
- https://code.visualstudio.com/docs/getstarted/settings