devcontaienrを初めて作ったときにだいぶ苦戦したため、せっかくなので動かすところまでは簡単にできるよう、のンプレートを作ってみました。
Devcontainerとは
以下の記事などが大変参考になります。
今回は最低限動かす(コンテナを立ち上げ＋VSCodeの拡張機能のインストール＋設定)ところまでを書いていこうと思います。
記載するテンプレートはgithubにあげています(Pythonを例に作ってますが、ほかにも転用可能)。
簡単な使い方
前提条件
まず、Dockerを使えるようにします(ここは調べてみてください)。
また、VSCodeにDev Containersの拡張をインストールしておいてください。
フォルダの構成
今回のフォルダ構成は以下のようになってます。重要なのは、devcontainer.jsonを.devcontainerフォルダに格納することです。(Dockerfileは別にここでなくても、devcontaienr.jsonに認識されればOK)
devcontaienrの起動
devcontainerを起動する際には、.devcontainerフォルダが直下にあるフォルダをVSCodeで開いてください。開くと、右下にコンテナーで再度開くと表示されるので、クリックするとdevcontainerが開きます。
これでdevcontainerが開きました。あとは、いろいろ開発してください！
(中身はlinuxなのでちょっと慣れが必要かも)
もし開きなおしたい場合は、ctrl+shift+Pを押して、フォルダをローカル再度開くを選択すると、いったんローカルで開くので、その後もう一度devcontainerに入れます。
(出てこない場合は、reopenとかで検索すると見つかるかと思います)
devcontaienr.jsonの中身
devcontaienr.jsonの中身はこんな感じです。
{
"name": "example",// コンテナ名
"build": {
"dockerfile": "Dockerfile" // Dockerfileのパス
},
// VScodeの設定
"customizations": {
"vscode": {
// 拡張機能のインストール
"extensions": [
"usernamehw.errorlens", // errorLens
"ms-python.python",// Python
"charliermarsh.ruff"// Ruff
],
// 拡張機能の設定
// ruffの設定を入れている
"settings": {
"notebook.formatOnSave.enabled": true,
"[python]": {
"editor.defaultFormatter": "charliermarsh.ruff",
"editor.codeActionsOnSave": {
"source.fixAll": "explicit",
"source.organizeImports": "explicit"
},
"notebook.codeActionsOnSave": {
"notebook.source.fixAll": "explicit"
}
}
}
}
}
}
自分用にカスタマイズする際には、VSCodeの設定以下を設定すればOKです。
各項目の簡単な説明
| 項目名 | 内容 |
|---|---|
| name | コンテナ名(適当でもよいです) |
| dockerfile | Dockerfileのパス。相対パスで書けます |
| extensions | VSCodeの拡張機能。ここに記載されたものは devcontainerが立ち上がる時にインストールされる |
| settings | 拡張機能の設定。 setting.jsonと同じ内容が書けます |
extensionsの追加方法
- devcontainerを開いているか、VSCodeでdevcontaienr.jsonを開いた状態で、追加したい拡張機能を選択
- 歯車マークをクリックして、devcontaienr.jsonに追加をクリックする
例は最近rustを勉強しているので、rust-analyzerです。
Dockerfileの中身
Dockerfileはこんな感じです。
ここは基本的に普段コンテナ作るときと同じ内容を記載をしてください。
devcontaienrは、最終的にコンテナで運用するという思想みたいなので合わせてます。
FROM python:3
# Dockerの設定を書く。
# 例では,uvをインストールしている。
RUN pip install uv
まとめ
以上のような形で、devcontainerを始めることができます。
今回は、本当に動くまでしか作っていないですが、devcontaienrには便利な機能がたくさんあります。この記事を踏み台に、使いやすい開発環境を作ってみてください。
以下の記事は参考になると思います。