devContainerとは？
VSCodeを使ってリモート環境に接続して開発を行うプラグインです。SSH/Container(Docker)/WSLに対応しています。その中でdevContainerはDockerコンテナに接続するための機能です。
.devcontainer/devcontainer.json
指定するDockerfileのパスは.devcontainer/Dockerfileが推奨されています。
メリット
VSCodeの拡張機能をコンテナ化できること
最近は、VSCodeの拡張機能などを使って開発することが前提になっている現場が多いです。(ESlint、Prettierなど)、そういう環境固有のプラグインなどを開発環境で閉じ込めることができます。
コンテナを直接ターミナル上で触ることができる点
ターミナル上で直接コンテナ上のコマンドを叩くことが可能です。
手順
0.事前準備
事前にDockerをインストールして立ち上げておきます。でないと使えません。
1.「devContainer」の拡張機能を入れる。
2.docker-compose.ymlを作ります。
|
1 2 3 4 5 6 |
services: node: image: node:lts volumes: - .:/workspace |
3.設定ファイルを作成する。
「開発コンテナー：開発コンテナー構成ファイルを追加する。」を選択する。
docker-compose.ymlから設定ファイルを作成する。
.devcontainerというフォルダと設定ファイルが生成されます。
「コンテナーで再度開く」を選択する。
4.ある程度待つと以下のように自動でコンテナが立ち上がります。
試しにnext.jsを動かします。
1.next.jsなどフレームワークをインストールする。
|
1 |
npm install next@12.2.4 |
2.コードを書く
pages/index.js
|
1 2 3 |
export default function HHome(){ return <div>hello</div> } |
3.起動する。
|
1 |
npx next |
何か特に指定しなくてもVSCode側でポートフォワーディングを自動でやってくれるのでそのままブラウザで開くことができます。
3.ローカルホストに接続します。
VSCodeのプラグインを入れる。
試しに、eslintとprettierを有効にする設定としては以下です。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
"customizations": { "vscode": { "extensions": [ "dbaeumer.vscode-eslint", "esbenp.prettier-vscode" ], "settings": { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" }, } }, |
試しに、「.devcontainer/devcontainer.json」に上記設定を追加します。そうすることでコンテナ上のみで有効なvsCodeプラグイン設定をすぐ入手することが可能になります。（仮にインストールしていなくてもコンテナ上だけはインストールが行われます。）
ただし、ローカルで対象プラグインを無効にしているとコンテナ上でも動かなくなるのでそこだけは注意しましょう。
この記事へのコメントはありません。