Nuxt.jsでlocalhostをSSL化する方法

解決したいこと

Facebookのログイン機能を実装するときに、OAuth設定で、HTTPSが強制されていました。
ローカルで開発する時に少し困ったので、
今回はNuxt.jsでlocalhostをSSL化する方法を紹介します。

以下のように「HTTPSを強制」をOFFに出来ない...

解決方法

解決する為に、今回はmkcertを使ってSSL証明書を発行しました。
mkcertはLocalCAの作成と証明書の発行が簡単に出来るツールです。
mkcertを使うことで、ブラウザで警告を出さずにSSL化することが出来ます。
主な流れは以下の通りです。

1. mkcertをインストール
2. mkcertでLocalCAを作る
3. mkcertで証明書を作成
4. 作った証明書を読み込んでNuxtを起動

SSL証明書の発行まで

mkcertのインストール

$ brew install mkcert

LocalCAを作る

$ mkcert -install

localhostに対してSSL証明書を発行

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

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

これで証明書を作ることが出来ました。

Nuxtをhttpsで起動する

今回変更するファイル群は以下の通りです。
既存のserver/index.jsを汚したくなかったので、server/localhost/index.jsを新たに作成しました。
mkcertで作った証明書もserver/localhost/に移動しておきます。

server/
  ┣ localhost/
    ┣ index.js
    ┣ localhost.pem      // mkcertで作ったcert
    ┣ localhost-key.pem  // mkcertで作ったkey
package.json

起動スクリプトの作成

server/localhost/index.js

const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = express()
const https = require('https')
const fs = require('fs')

// Import and Set Nuxt.js options
const config = require('../../nuxt.config.js')

async function start() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  const { host, port } = nuxt.options.server

  try {
    const builder = new Builder(nuxt)
    await builder.build()
  } catch(error) {
    console.error(error)
    return false
  }

  // https config
  const https_options = {
    key : fs.readFileSync(`${__dirname}/localhost-key.pem`),
    cert: fs.readFileSync(`${__dirname}/localhost.pem`),
  }

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  https.createServer(https_options, app).listen(port, host)
  consola.ready({
    message: `Server listening on https://${host}:${port}`,
    badge: true
  })
}
start()

package.jsonの修正

package.json

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/localhost/index.js --watch server",
   }
}

サーバー起動と動作確認

$ npm run dev
READY  Server listening on https://localhost:3000

ブラウザでhttps://localhost:3000にアクセス。

無事、警告も出ずhttps化することが出来ました。