devcontainerを使ってHugoのブログ開発環境を整える

はじめに

前回はdevcontainerを使ってみる記事だったので、今回は実際に使っているHugoのブログ開発環境にdevcontainerを入れてみる。

環境

Windows 11 Professional
WSL2 Ubuntu24.04 LTS
Visual Studio Code 1.92.0

準備

がインストール済みであること。

devcontainer.jsonの作成

プロジェクトルートに以下を作成した。
docker-in-dockerで動作させるため、その設定を入れている。
開発コンテナには拡張機能くらいしか入れる予定はないので、イメージについては一考の余地あり。

.devcontainer/devcontainer.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": {
		"docker-in-docker": {
			"version": "latest"
		}
	},

	"runArgs": [
		"--init"
	],

	"mounts": [
	 	"type=bind,source=${localEnv:HOME}/.ssh,target=/home/vscode/.ssh,readonly"
	],

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

作成後、再度プロジェクトを開きなおすと、開発コンテナでワークスペースを開くかを聞かれるので、「開く」を選択する。

これで完了。

一通り作業をしてみて、トラブルがあったのでそれも記載しておく。

トラブル

Git pushできない

devcontainer.jsonをリモートにプッシュしようとしたが失敗した。

> git pull --tags origin master
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

開発コンテナ上でSSHのKeyがないことが原因と思われる。
調べてみたところ、ssh-agentを使う方法があるようだった。

ただ、今回は devcontainer.jsonに以下を追加することで解決した。

	"mounts": [
	 	"type=bind,source=${localEnv:HOME}/.ssh,target=/home/vscode/.ssh,readonly"
	],

参考

参考

おわりに

devcontainerもっと積極的に使っていくために、ブログの開発環境に入れてみた。
今後これをもっと使っていこう。

Hugo で構築されています。
テーマ StackJimmy によって設計されています。