はじめに

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サーバーを起動することも出来るので、お好きなやり方で動作確認してみてください。今回はこれぐらいで、ではでは。