NuxtのローカルサーバをHTTPSに対応させる

NuxtのローカルサーバをHTTPSに対応させる方法を調べたので記録を残します。
経緯としては、navigator.mediaDevices.getUserMediaでマイクにアクセスしようとした際にHTTPSでないとアクセスできなかった事が発端になります。

それでは見ていきましょう。

ドメインを決めます

後述のサーバ証明書を作成するために、ドメインを決めます。
今回は例としてlocal.example.comとします。

合わせてhostsファイルにドメインとIPアドレスを記載します。
hostsファイルの場所についてはネット上に記事がたくさんあるので割愛します。
IPアドレスはご利用の環境に合わせて適切変更してください。

127.0.0.1       local.example.com

サーバ証明書を作成します

HTTPS化に必要なサーバ証明書を作成します。
今回はローカル環境で使用するのみなので自己署名の証明書を作成します。

Nuxtプロジェクトのルートフォルダにcertsフォルダを作成します。

手前味噌ではありますが、拙作の自己署名証明書を作成するDockerイメージを使用します。
Nuxtプロジェクトのルートフォルダで以下を実行してください。
HOST=xxxとIP=xxxの部分は適切書き換えてください。

docker run --rm -v $PWD/certs:/out -e HOST=local.example.com -e IP=127.0.0.1 tkuni83/self-sign-cert

certsフォルダにサーバ証明書が生成されます。

なお、この証明書は自己署名証明書なので本番環境では使用しないでください。

Nuxtにサーバ証明書を読み込ませます

nuxt.config.jsにserverプロパティを追加してサーバ証明書を読み込みます。
以下の例では、process.env.NODE_ENVを使用して、検証環境のみサーバ証明書を読み込むようにしています。

import path from 'path'
import fs from 'fs'

（中略）

if (process.env.NODE_ENV !== 'production') {
    module.exports.server = {
        https: {
            key: fs.readFileSync(path.resolve(__dirname + '/certs', 'server.key')),
            cert: fs.readFileSync(path.resolve(__dirname + '/certs', 'server.crt'))
        }
    }
}

変更したらサーバを再起動しましょう。

動作確認

local.example.comを開いて動作確認をします。
自己署名証明書を使用しているため、ブラウザによっては以下のような警告が表示されます。
赤枠の箇所をクリックすれば無視して進められます。

なお、certsフォルダのCAのサーバ証明書（ca.crt）をブラウザに登録すれば警告が出ないようにもできます。
Service Workerをローカルで動作させたい場合などはこの作業も必須みたいです。

以上です！

参考資料

公式ドキュメント： https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-server/#example-using-https-configuration

stackoverflow： https://stackoverflow.com/questions/56966137/how-to-run-nuxt-npm-run-dev-with-https-in-localhost