Node のプロジェクトで開発サーバを起動し、ブラウザで開く

公開:2020/09/26
更新:2020/10/11
2 min読了の目安(約2600字TECH技術記事

Node で Web アプリケーションを実装している時に、開発用サーバを起動して、動作確認しながら実装することがある。
例えば、webpack-dev-server を起動して、ブラウザで見ながら実装するとか。

サーバの起動は package.jsonscripts にタスクを定義して、 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-clipreview サーバを起動して、ブラウザでプレビューを開く。

$ npm start

scripts の説明

scripts 以下の設定について説明する。

preview

"preview": "zenn preview"

これは zenn-clipreview サーバを起動する設定[1]

browser

"browser": "wait-on http://localhost:8000 && opener http://localhost:8000"

これはプレビューをブラウザで開くための設定。
プレビューの URLhttp://localhost:8000にアクセスできるようになるのをまって、その URL をブラウザで開いている。

前半の wait-on http://localhost:8000wait-on を利用して http://localhost:8000 にアクセスできる様になるのを待っている[2]

後半の opener http://localhost:8000opener を利用してブラウザでプレビューの URLhttp://localhost:8000を開く。

start

"start": "npm-run-all --parallel preview browser"

npm-run-allを利用して、 previewbrowser を並行に実行する設定。
これで、「npm start で Zenn のプレビューをブラウザで開く」が実現する。

まとめ

npm-run-all, opener, wait-on はとても便利なツールで設定次第で開発環境の立ち上げが便利なるだろう。

脚注
  1. プレビューサーバの起動だけしたい場合には npm run preview を実行すれば良い。 ↩︎

  2. プレビューサーバの起動は速いので待つ必要ないかもしれないが…。 ↩︎