[Mac][Golnag]VSCodeとDevContainerでGoの開発環境構築

# はじめに
パソコンを買い替えたので備忘を兼ねてメモ

# やりたいこと
Mac環境を汚さずに Go の開発環境を作りたい
DevContainerの機能を使えば自身のMac端末にGoをインストールしなくても開発環境を構築できるのでそうしたい

# 環境構築イメージ
こんな感じにしたい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/e0abade1-63f2-910e-b88a-648d6186028c.png)
ref. https://code.visualstudio.com/docs/devcontainers/containers

# 環境情報
```
% sw_vers
ProductName:		macOS
ProductVersion:		14.6
BuildVersion:		23G80
```


# やったこと
## 必要なソフトのインストール
### Docker Desktop
公式サイトからDL
https://www.docker.com/products/docker-desktop/


DL後、インストーラーを起動してインストールします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/66ea25e4-69ba-3773-9a28-18d3ec0d9281.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/636d3955-d7d6-9df2-bc1a-32001e0384d2.png)

#### インストール情報
```
~ % docker -v
Docker version 27.3.1, build ce12230
~ % docker-compose -v
Docker Compose version v2.30.3-desktop.1
```

### VS Code
公式サイトから必要なZIPをDLします
https://code.visualstudio.com/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/bb002d80-41dd-eb7a-e4f0-21290090a18a.png)

解凍してできた「Visual Studio Code」をアプリケーションに移動します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/c5ee21c8-ebf3-7e56-834c-f4ee600d3428.png)

こんな感じに無事起動できました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/6ea59ec0-61f2-1cfa-c78e-d463b56b5435.png)

## VS Code 設定
### Dev Containers のインストール
VS Codeからコンテナにアタッチできるように、VS Codeの拡張機能Dev Containers をインストールします
VS Codeの画面左側の↓のアイコンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/597d1e7b-02f5-8d3f-cae2-c642828fbedc.png)

拡張機能の検索画面が表示されるので「Dev Containers」と入力し、検索結果から選んでインストールします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/16664176-6a31-f850-202a-a1254ce63c24.png)

インストールが完了すると、左側にこんなアイコンが追加され、クリックするとREMOTE EXPLOERが表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/ad7f3b05-c320-06b4-d812-9e4d4ba216d2.png)

今回はGoの環境を作りたいので、サンプルから「vscode-remote-try-go」というサンプルを使って試してみたいと思います
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/4fe2cb72-0949-4898-529f-812645203523.png)

サンプルを選択すると、コンテナがのビルドが行われます
ビルド完了すると、自動的にコンテナへの接続が行われ、ローカルのフォルダーがコンテナマウントされます
こんな感じに、サンプルのファイル群も作成されていました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/e0ac261e-eb6b-983b-03e8-8d5147552b57.png)


また、ターミナルでGoのバージョンを確認してみると以下のバージョンがインストールされていました
```
vscode ➜ /workspaces/vscode-remote-try-go (main) $ go version
go version go1.22.10 linux/arm64
vscode ➜ /workspaces/vscode-remote-try-go (main) $ 
```

DevContainerで構築する開発環境、どんなコンテナ環境を作るのか？は「`devcontainer.json`」というファイルで定義することができます
通常、このファイルはプロジェクトのルートに「`.devcontainer`」ディレクトリを作成し、その配下に配置するものになります

今回のサンプルではこんな感じになってました
<details><summary>devcontainer.json</summary>

```json
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/go
{
	"name": "Go",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	"image": "mcr.microsoft.com/devcontainers/go:1-1.22-bookworm",

	// Features to add to the dev container. More info: https://containers.dev/features.
	// "features": {},

	// Configure tool-specific properties.
	"customizations": {
		// Configure properties specific to VS Code.
		"vscode": {
			"settings": {},
			"extensions": [
				"streetsidesoftware.code-spell-checker"
			]
		}
	},

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

	// Use 'portsAttributes' to set default properties for specific forwarded ports. 
	// More info: https://containers.dev/implementors/json_reference/#port-attributes
	"portsAttributes": {
		"9000": {
			"label": "Hello Remote World",
			"onAutoForward": "notify"
		}
	}

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

	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
	// "remoteUser": "root"
}

```
</details>

チームやプロジェクトなどでは「devcontainer.json」を作成して共通の環境を使うようにすると、環境構築の手間が省ける＆メンバー全員が同じ環境で開発できるようになっていいですね

### おまけ
現在のプロジェクトやチームではDevContainerが使われいないけど自分は、ローカル端末をクリーンに使い他＆自分だけはDevContainerを使った環境で開発をしたいんだ！という場合は、別で「devcontainer.json」を作成し、それを元にコンテナ環境を作成
作成したコンテナ環境で開発を行うこともできます

### やってみた
1. **任意のプロジェクトを開く**
今回は、以下のリポジトリを clone
https://github.com/ixy-194/go-api-sample-todo


2. **devcontainer.jsonの作成**
コマンドパレットを開き（⌘ + ⇧ + P ）以下を入力
「`Dev Containers: Add Dev Container Configuration Files...`」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/a85e7115-d783-5129-1937-9d31e97efccb.png)

今回、プロジェクトディレクトリにファイルを作成したくないので、「`Add configration to user data folder`」
を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/deab8771-385a-68ef-5d61-8391b406c9e8.png)

次に「`From a predefined container configration template...`」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/bd24c71b-01b8-5f8c-880a-fcfc7d412596.png)

Goを選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/4c3b3cdc-a58c-7f25-0149-2e386ac39db9.png)

インストールバージョンを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/12e3cb0d-6295-3f22-5cf1-cc5962865c5d.png)

他にも必要なソフトをインストールしたりできますが、今回は何も選択せずにこのま`OK`をします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/78475f62-3c7e-5576-0ef2-aebef09af675.png)

そうすると、こんな感じに「devcontainer.json」ファイルを生成してくれます
```json:
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/go
{
	"name": "Go",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	"image": "mcr.microsoft.com/devcontainers/go:1-1.23-bookworm"

	// Features to add to the dev container. More info: https://containers.dev/features.
	// "features": {},

	// 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",

	// Configure tool-specific properties.
	// "customizations": {},

	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
	// "remoteUser": "root"
}

```

また、コンテナで開き直すか？と聞かれるので、「Reopen in Container」で開き直します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/c19adb6e-a446-010b-ecdf-b0359769b2cf.png)
↑もし出てこなかった場合は、画面左下の「><」を選択して、「`Reopen in Container`」を選択すればいいです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/0ef032b5-69c0-aeb1-46bb-78f2bb8535d2.png)

 するとこんな感じにコンテナ環境ないで開き直されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/35b0d4c3-ade0-a865-60df-4f8ccea42629.png)

試しにターミナルからGoのバージョンを確認してみます
```zsh
vscode ➜ /workspaces/go-api-sample-todo (main) $ go version
go version go1.23.4 linux/arm64
vscode ➜ /workspaces/go-api-sample-todo (main) $ 
```
「`devcontainer.json`」で指定した環境になっていますね

ちなみに、コンテナ環境は「`devcontainer.json`」で直接コンテナイメージを指定していますが、
他にもDockerファイルやDocker-composeでも環境を作ることができるようです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/ee0cea8a-9706-c60c-71ce-6c33f9b33937.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/89a14c54-eb41-98ff-ac13-3cd68c491951.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974822/20212c5f-95f7-7783-65a3-35e824f139dd.png)
ref.https://code.visualstudio.com/docs/devcontainers/create-dev-container#_dockerfile:~:text=%E3%81%A7%E3%81%99%E3%80%82postCreateCommandpostStartCommand-,Docker%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB,-Dockerfile%20%E3%82%82.devcontainer

環境構築の幅が広がりますね

# 最後に
新しいPCを買ってテンションあげあげな感じだったので、こんな感じにローカルPCを汚さずに開発環境の構築をしてみました
素敵なのは、ローカルPCを汚さないことよりも、DevContainerを使うと、みんなが同じ環境で開発できるようになる！ということだと思います
チーム開発をするときはぜひ取り入れてみてください

ではでは

p.s 
「`devcontainer.json`」って、どこか任意のフォルダに作成したものを指定する方法はないのでしょうか？
今回、そのやり方がわからなくてコマンドパレットから作成したけど、任意のフォルダを指定できるようになったらそれだけでリポジトリ管理したりできていいのになーと。（いや、素直にプロジェクトルートに配置すればいいんだけど）