devcontainerを使ったDockerとvsCodeでの開発環境
備忘録も兼ねて。
僕はPythonやReactの開発環境はもれなくdocker composeを使っています。いまだに癖でdocker-composeってやっちゃう時もあるけど頑張ってv2を使っている感じです。あとそもそもReactとかNextの環境作るのにdocker使わなくていいんじゃね?っていうのはもちろんある。最近は僕もそう思う。昔はプロジェクトごとにnode_modulesあるのが嫌(dockerでも変わらない...)なのとnodeやらnpmのバージョン管理がめんどくさかったってのがある。今はpnpmのおかげでだいぶスッキリするのもあるし、nodeだってnodebrew使えばいいわけだし。
本題に戻りましょう。
最近自分でアプリ開発をするときと副業でアプリ開発するときでvscodeの設定を変えなきゃいけないことがありました。具体的にいうと、個人でするときはコードの保存時にeslint+prettierを動かすようにしていました。対して副業でのコーディング時にはこの機能をオフにして機能修正・追加以外での余計な修正をなくしてレビュアーに見やすくする必要がありました。いちいち設定だったり拡張機能のon/offがめんどくさくてどうにかならんかなと思ったところ、devcontainerなるものを知りました。devcontainerを設定すると、vscodeからコンテナに接続するときに細かい設定だったり、vscodeのいくつかの設定ができるようになります。
やり方は単純で対象のプロジェクトに.devcontainer/devcontainer.jsonを作るだけです。devcontainer.jsonの中身はこんな感じです.
{
"name": "Container Name",
"dockerComposeFile": ["../compose.yml"],
"service": "nextjs",
"workspaceFolder": "/usr/src/app",
"customizations": {
"vscode": {
"extensions": [
"andys8.jest-snippets",
"bradlc.vscode-tailwindcss",
"codezombiech.gitignore",
"donjayamanne.githistory",
"dsznajder.es7-react-js-snippets",
"eamodio.gitlens",
"firsttris.vscode-jest-runner",
"GitHub.copilot",
"GitHub.copilot-chat",
"GitHub.github-vscode-theme",
"GitHub.vscode-pull-request-github",
"henriiik.docker-linter",
"mhutchie.git-graph",
"ms-azuretools.vscode-docker",
"Orta.vscode-jest",
"p1c2u.docker-compose",
"Zarifprogrammer.tailwind-snippets",
"zhang-renyang.vscode-react",
"dbaeumer.vscode-eslint",
"rvest.vs-code-prettier-eslint"
]
}
}
}compose.ymlのパスと、コンテナのサービス名、ワークディレクトリのパスをちゃんと入力したら動きます。今回はこれに加えてvscodeの拡張機能の設定も加えています。ここにeslintとprettierの拡張機能を入れることで、コンテナの時はフォーマットが効くように、ローカル環境では効かないようにしました。あとはこれに加えて.vscode/settings.jsonにも手を加えたら完璧です。
仕事でdockerで環境構築する時はここまでやってあげるべきだったなと今なら思いますね。