Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

解決したいこと

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

以下のように「HTTPSを強制」をOFFに出来ない...
スクリーンショット 2019-03-29 13.53.17.png

解決方法

解決する為に、今回は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にアクセス。

スクリーンショット 2019-03-29 11.47.38.png

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

yoshinbo
サービスエンジニアです。新規事業をよく担当します。
skill
株式会社SKILLはブロックチェーン関連サービス開発会社です。ブロックチェーン技術の社会実装を目指し、プロダクト開発および実証実験を行っています。
https://skill.luxe/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away