《Nuxt.js》 create-nuxt-app で始めたプロジェクトで https://localhost:3000 で起動する方法。

Nuxt を create-nuxt-app で次のような流れでシンプルに始めたとき、http://localhost:3000 にアクセスして開発を進めることになります。

terminal.bash

npx create-nuxt-app your-title

cd ./your-title

yarn run dev

ただこれだと、たとえば web カメラを起動するための API は、 https 環境でしか動かすことができないので、それに対応できるようローカル環境を整えてやる必要があります。

ちょっとひと手間は必要ですが、簡単に実装することができます＊

サーバーを起動するためのスクリプト

この話は Nuxt の issue で言及されていて、 localhost https · Issue #146 · nuxt/nuxt.js · GitHub にあるコードを拝借しましょう。

仮にプロジェクトルートに作った server というフォルダに index.js を作成してみます。

server/index.js

const {Nuxt, Builder} = require('nuxt');

const https = require('https');
const fs = require('fs');
const isProd = (process.env.NODE_ENV === 'production');
const port = process.env.PORT || 3000;

const config = require('../nuxt.config.js');
config.dev = !isProd;
const nuxt = new Nuxt(config);

// Build only in dev mode with hot-reloading
if (config.dev) {
  new Builder(nuxt).build()
    .then(listen)
    .catch((error) => {
      console.error(error);
      process.exit(1);
    });
}
else {
  listen();
}

function listen() {

  const options = {
    key: fs.readFileSync('./server/cert.pem'),
    cert: fs.readFileSync('./server/cert.pem'),
  };

  https
    .createServer(options, nuxt.render)
    .listen(port);
  console.log('Server listening on `localhost:' + port + '`.');
}

自己署名証明書を作成する

https サーバを構築するのに、https.createServer(options, nuxt.render) の部分にあるように、署名済み公開鍵と秘密鍵をオプションで渡してやる必要があります。

そこで、署名済み公開鍵と秘密鍵 の両方を含む pem ファイルを作成します。
先ほど作成した server フォルダに移動して、次のコマンドを入力します。

/.terminal

openssl req -days 365 -new -nodes -newkey rsa:4096 -x509 -keyout cert.pem -out cert.pem

package.json にコマンドをかく

コマンドを実行できるようにするため、次のように package.json に記述します。

package.json

"scripts": {
  "devHttps": "node server/index.js",
},

あとはコマンドを叩くだけですね。

/.terminal

yarn run devHttps

これで https://localhost:3000 にアクセスすることができるようになりました🍟

おまけ

次のように PORT=8000 というように指定してあげると、 https://localhost:8000 というようにポート番号を変更してアクセスできるようになります。

package.json

"scripts": {
  "devHttps": "PORT=8000 node server/index.js",
},

おわります。