- t_o_dです。
- 新しい開発環境構築の選択肢として登場したdevboxを試しています。
- 今回はdevboxの設定の
init_hookとscriptsを利用して「起動時の自動処理」と「カスタムスクリプトの登録」を行う方法を記録いたします。
環境
- mac OS Ventura 13.1
- devbox v0.2.3
手順
対象プロジェクトの準備
- 今回立ち上げる対象プロジェクト例として、簡易なNode.js(Vue3)プロジェクトを用意します。
- 以下のコマンドをうち任意のディレクトリにVue3プロジェクトを作成してください。
# vue3-sampleディレクトリに作成
$ npm init vite@latest vue3-sample -- --template vue
# 確認
$ cd vue3-sample
$ ls vue3-sample
README.md index.html package.json public src vite.config.js
初期設定
- Vue3サンプルの作成後、以下のコマンドでカレント直下に
devbox.jsonを作成します。
# 設定ファイル作成
$ devbox init
# 確認
$ ls
README.md devbox.json index.html package.json public src vite.config.js
- 作成後、以下のコマンドで
nodejsパッケージを追加します。
# nodejs(最新)を追加
$ devbox add nodejs
# 設定ファイル確認
$ cat devbox.json
{
"packages": [
"nodejs"
],
"shell": {
"init_hook": null
},
"nixpkgs": {
"commit": "xxxxx"
}
}
init_hookとscriptsの追加
- 開発シェルの立ち上げはそのまま
devbox shellを実行すればよいですが、追加で以下の2つを行って手間を減らしたいです。
- シェル起動時に任意の処理を自動実行
package.jsonのようなカスタムスクリプトの登録
- そのような時に
devbox.jsonのshell内のinit_hookとscripts設定が利用できます。
- まずinit_hookですが、これに任意のコマンドを設定してあげることで、そのコマンドをパッケージインストールが完了してシェルが起動したタイミングで自動で実行してくれます。
- 今回は起動時に以下の2つを自動実行させることとします。
- シェルのプロンプト名の表示
- nodeパッケージのインストール(npm install)
- 次にscriptsですが、これに任意の名前でコマンドを設定してあげることで、カスタムスクリプトとして登録ができて
devbox run 名前で呼び出すことができます。
- ※npm自体(package.jsonへの追記)にもありますが、そのような機能がない環境の時に便利です。
- 今回はカスタムスクリプトとして開発サーバーの起動を登録させることにします。
- 上記を踏まえて、
devbox.jsonの内容を下記に修正します。
{
"packages": [
"nodejs"
],
"shell": {
"init_hook": [
"export PS1='devbox vue3-sample> '",
"npm i"
],
"scripts": {
"dev": "npm run dev"
}
},
"nixpkgs": {
"commit": "xxxx"
}
}
- 修正後、以下のコマンドをうち開発シェルを立ち上げます。
# 立ち上げ
$ devbox shell
# 開発シェル内
# 「プロンプト名の表示」と「node_modulesの作成」を確認
devbox vue3-sample > ls | grep node
node_modules
- 起動時のスクリプトの実行が確認できたら、開発シェル内で以下のコマンドで開発サーバーが立ち上がる確認します。
# サーバー起動
# npm run devと違い別プロセスで立ち上がる。
devbox run dev
VITE v4.0.4 ready in 277 ms
➜ Local: http://localhost:5173/
- 問題なく
localhost:5173にアクセスできることを確認します。
- 確認できたら完了のため、Ctrl+cとexitで開発シェルを抜けます。
- 以上です。
補足
まとめ
- 起動時やカスタムスクリプトの機能を上手く活用すれば、実際の開発でもdevboxを取り入れることができそうと思いました。
参考
5
