Coding 2019.09.08

Nuxt.jsでgenerateで出力された静的ファイルは「http-server」を使ってローカルでさくっと確認しちゃおう

記事のアイキャッチ画像

Nuxt.js環境でGenerateを使って静的ファイルの動作確認をローカルで確認したい場合に便利な「http-server」の導入とその使い方。

はじめに

Nuxt.jsで静的出力したページはパスの関係上、出力先のディレクトリのhtmlファイルをブラウザで直接見に行ってもいろいろなファイルが404エラーでうまく動作しません。そのためなんらかの方法でローカルにwebサーバーを立てる必要があるのですが、今回は「http-server」というnpmパッケージを使った簡単な方法を紹介したいと思います。

手順

Step1. パッケージのインストール

yarn add http-server

Step2. コマンドを追加

{
  "scripts": {
    "webserver": "http-server ./dist -o -p 8888",
  },
}

Step3. Webサーバー起動

yarn webserver

これでWebサーバーが起動してブラウザ上に静的出力されたdist/の中身が表示されたかと思います。

おまけ

コマンドの解説

http-server ./dist -o -p 8888の解説をすると、

  • ./dist: ドキュメントルートに指定するパス
  • -o: サーバー起動後にブラウザに自動で表示
  • -p 8888: ポートの指定
    になります。

node_modulesの罠

yarn add http-serverで追加した後にターミナル上でhttp-server ./dist -o -p 8888をしてもcommand not foundとなります。これはyarn addではパスが通っていないためで、追加したモジュールは今回の記事で紹介したようにアプリケーションを通して使う必要があります。(今回だったらpackage.jsonにコマンドを登録。)今回のhttp-serverに限らず、ターミナル上で直接コマンドを打ちたい場合は、yarn add global xxxxでモジュールを追加する必要があります。

さいごに

SSRやSPAとgenerateで出力した場合とでは仕組みが全く違っているので、generateで出力した静的ファイルをどこかにホスティングする場合は、確認必須ですよね。phpやPythonを使えば簡単にwebサーバーを起動することも出来るので、お好きなやり方で動作確認してみてください。今回はこれぐらいで、ではでは。


Category List カテゴリー

Tag List タグ