開発環境で、SSL接続が必要なときってありますよね。ServiceWorkerだったり、WebARだったり。

mkcertを使って認証キーを用意すれば、nuxt.config.jsに数行の設定を追記するだけで、Nuxt.jsでは簡単にブラウザの警告も出さずにSSL化ができます。

mkcertでSSL認証キーの準備

mkcertとは、設定なしに開発環境でSSL認証をできるようにしてくれるツールです。

mkcertをインストール

$ brew install mkcert

(ドキュメントには、Linuxt, Windowsでのインストール方法も記載されています。)

認証局作成

SSL認証キーが正しいかを検査してくれる認証局というものをローカルに準備します。準備といっても一行実行するだけ。

$ mkcert -install

SSL証明書と認証キーを作成

$ cd /my/app/path/cert
$ mkcert localhost 127.0.0.1
Using the local CA at "/Users/****/Library/Application Support/mkcert" ✨

Created a new certificate valid for the following names 📜
 - "localhost"
 - "127.0.0.1"

The certificate is at "./localhost+1.pem" and the key at "./localhost+1-key.pem" ✅

適当なフォルダに証明書と認証キーを作成します。
私は、nuxtのフォルダと並列のディレクトリにcertフォルダを用意して、その中に作成しました。

また、他のドメイン・IPからもアクセスしたい場合は、引数に追加してください。（mkcert localhost 127.0.0.1 0.0.0.0 192.168.43.41）

以上で認証キーの準備完了です。

余談ですが、opensslを使ってこちらの記事のようなことをしてました。
これをみたらmkcertのありがたみが100倍になります。。

Nuxt.jsの設定

こちらも非常に簡単！nuxt.config.jsに以下を追記。

nuxt.config.js

// fsとpathを読み込んでない場合は先頭に追記
import fs from 'fs'
import path from 'path'

export default {
  // ここから
  server: {
    https: {
      key: fs.readFileSync(path.join(__dirname, '../cert/localhost+1-key.pem')),
      cert: fs.readFileSync(path.join(__dirname, '../cert/localhost+1.pem')),
    },
  },
  // ここまで
}

はい、これで起動すれば、もうSSL化されています。
https://localhost:3000 でアクセスできるはず。

ひとくふう

ただし、このままでは本番環境で実行するときも、認証キーを読み込みにいってしまうので、開発環境のときのみローカルSSL認証されるようにしましょう。

ということで、こちら。

nuxt.config.js

const server = {}
if (process.env.NODE_ENV === 'development') {
  server.https = {
    key: fs.readFileSync(path.join(__dirname, '../cert/localhost+1-key.pem')),
    cert: fs.readFileSync(path.join(__dirname, '../cert/localhost+1.pem')),
  }
}

export default {
  server,
}

これで、開発環境のときのみSSL化に成功しました。

まとめ

開発環境での認証局・認証ファイルの作成からSSLの設定まで、たったこれだけの作業で可能となります。

mkcertによって開発環境用の認証キーの作成が簡単に行えたわけですから、応用すればwebpack-dev-serverなど他でも活用できます。