Devcontainer ってなに？ 実際につかってみる
Devcontainerとは？
- VSCodeの開発環境構築支援ツール
- VSCodeが開発環境として利用するDockerコンテナを作成してくれる
- そのDockerコンテナ上には開発に必要なもの(db, lib, runtime..)も詰め込んでくれる
メリット
- Dockerコンテナ内に開発で必要なものをすべて閉じ込める ⇒ ローカル環境を汚染しない
- コマンドで構築終わり ⇒ 開発環境の構築が楽になる
- 構築時のヒューマンエラー発生率低減 ⇒ システムのコード化
使ってみる
NodeJSの環境をDevcontainerを利用して構築します。
Docker,VSCode,Devcontainersは既にインストールしてある前提で記載しています。
必要なもの
- Docker
- Visual Studio Code(VSCode)
- Remote Development(Visual Studio Codeの拡張機能)
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack
以上！
Devcontainer定義の作成
VScodeを起動し、コマンドパレット(Ctrl+Shift+P)を開きます。
その後、「Dev containers:Add Dev Containers Configuration Files...」を選択します。
次に、今回作成する環境である「NodeJS & TypeScript」を選択します。
次に、利用するNodeJSのDockerイメージのタグを選択します。
タグ別の違いは下記サイトが詳しいです。今回はデフォルトを利用します。
次に、追加機能を選択する。
開発用のコンテナに追加したいCLI等があればここで選択すれば追加されます。
今回は利用したい追加機能はないので何も選択せず次へ行きます。
ここまで選択すると、プロジェクトフォルダに「devcontainer.json」が作成されます。
ここに利用する開発環境の定義を記載しており、開発環境を起動するときにこの定義を読み込みます。
開発環境の起動
確認用アプリ構築
Devcontainer環境で起動するNodeJSアプリを作成します。
Expressを使っておなじみのHello Worldアプリを用意します。
- Expressのインストール
アプリのルートディレクトリで下記コマンドを実行してPackage.jsonを生成します。
すべてデフォルト設定で生成しています。
npm init
その後、Expressをインストールしておきます。
npm i express
localhost:3000にアクセスしたらHello Worldが表示されるようindex.jsを作成します。
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
devcontainerを起動
vscodeを開き、左下にある><をクリックすると
リモートウィンドウの起動オプションが表示されるので「Reopen in Container」を選択する。
すると、開発環境用のコンテナがdocker上に作成され、起動してくれる。
（事前にDocker Desktopを起動しておくこと）
アプリを起動
vscodeのターミナル上で下記コマンドを入力してサーバーを起動する
node index.js
あとは、ブラウザからlocalhost:3000にアクセスすればコンテナ上の開発環境への接続が確認できる
終わりに
devcontainerに関して触りながら学習してみましたが、devcontainerなしでの
コンテナ上への開発環境構築に比べて構築～起動までの手順が楽になった印象を受けました。
ただ、あくまでサンプルの小さなアプリだったという理由もあるかと思うので
もう少し複雑な環境だとこう簡単にはいかないような気がします。
コンテナの構成を変えたいときは？
参考
Discussion