Node のプロジェクトで開発サーバを起動し、ブラウザで開く
Node で Web アプリケーションを実装している時に、開発用サーバを起動して、動作確認しながら実装することがある。
例えば、webpack-dev-server を起動して、ブラウザで見ながら実装するとか。
サーバの起動は package.json の scripts にタスクを定義して、 npm start などを実行すれば起動するように設定していることが多いと思う。
どうせなら、ブラウザも一緒に起動するようにすると便利。
次のツールを組み合わせて設定しておくとそれができる。
zenn-cli の preview での例
Zenn では CLI でコンテンツを管理できる。
そして、ローカルでプレビューサーバを起動して、ブラウザでレンダリング結果を参照しながらコンテンツを執筆できる。
それを利用するのに短いコマンドで用意できると便利だ。
前述のツールの使い方を「npm start で Zenn のプレビューをブラウザで開く」という例で説明する。
インストール
Zenn CLIをインストールする | Zennを参照して zenn-cli のインストールとセットアップは済んでいる前提で説明する。
次のコマンドで前述のツールをインストールする。
$ npm install --dev npm-run-all opener wait-on
package.json の scripts の追加
Zenn CLIをインストールする | Zennの通りにセットアップすると、すでに package.json はできているはず。
そこに以下のように scripts を設定する。
{
"name": "zenn-docs",
"version": "1.0.0",
// ↓ ここを追加する
"scripts": {
"preview": "zenn preview",
"browser": "wait-on http://localhost:8000 && opener http://localhost:8000",
"start": "npm-run-all --parallel preview browser"
},
// ↑ ここを追加する
"dependencies": {
"zenn-cli": "^0.1.35"
},
"devDependencies": {
"npm-run-all": "^4.1.5",
"opener": "^1.5.2",
"wait-on": "^5.2.0"
}
}
これで、次のコマンドを実行すると zenn-cli の preview サーバを起動して、ブラウザでプレビューを開く。
$ npm start
scripts の説明
scripts 以下の設定について説明する。
preview
"preview": "zenn preview"
これは zenn-cli の preview サーバを起動する設定[1]。
browser
"browser": "wait-on http://localhost:8000 && opener http://localhost:8000"
これはプレビューをブラウザで開くための設定。
プレビューの URLhttp://localhost:8000 にアクセスできるようになるのをまって、その URL をブラウザで開いている。
前半の wait-on http://localhost:8000 は wait-on を利用して http://localhost:8000 にアクセスできる様になるのを待っている[2]。
後半の opener http://localhost:8000 は opener を利用してブラウザでプレビューの URLhttp://localhost:8000 を開く。
start
"start": "npm-run-all --parallel preview browser"
npm-run-allを利用して、 preview と browser を並行に実行する設定。
これで、「npm start で Zenn のプレビューをブラウザで開く」が実現する。
まとめ
npm-run-all, opener, wait-on はとても便利なツールで設定次第で開発環境の立ち上げが便利になるだろう。
Discussion