Vue CLIで生成したNuxt.jsプロジェクトをhttps化して起動する方法

Vue CLIで生成したNuxt.jsのプロジェクトをnpm run devでそのまま実行するとhttp://localhost:3000でサーバーが起動する。Nuxt.js単体で開発する分にはこれで問題ないのだが、他サービスが関わってくるとできればhttpsでアクセスできるようにしたい。

ということで、Vue CLIで生成したNuxt.jsプロジェクトをhttps化して起動する方法をまとめる。

環境は以下の通り。

• macOS High Sierra
• vue-cli@3.0.1
• nuxt.js@1.4.2

Nuxt.jsプロジェクトをhttps化して起動する

とりあえずNuxt.jsプロジェクトをそのまま起動してみる。

# vue-cliをグローバルにインストール
$ npm i -g vue-cli

# テンプレートを生成する
$ vue init nuxt-community/starter-template my-project

# とりあえず実行してみる
$ cd my-project
$ npm i
$ npm run dev

# http://localhost:3000でアクセス可能

自己署名証明書（オレオレ証明書）を作成する

ローカルの開発環境で使うものなので、自己署名証明書を使う。

# 秘密鍵を生成する
$ openssl genrsa 2048 > server.key

# 証明書署名要求を生成する
$ openssl req -new -key server.key > server.csr 

# サーバー証明書を生成する（有効期限は適当に10年）
openssl x509 -in server.csr -days 3650 -req -signkey server.key > server.crt

自己署名証明書の詳しい作り方は、以下の記事を参考にしてほしい。

httpsサーバー用の設定ファイルを作成する

次にhttpsサーバーを起動するための設定ファイルを作成する。
ディレクトリ構成は以下のような感じ（好みで変えてください）

|- https
|   |- server.js   // ←これを作成する
|   |- server.crt
|   |- server.key
|- nuxt.config.js
|- package.json
|- 以下略

今回は開発時のみだけhttps化したいのでシンプルにまとめる。（本番環境では別の方法でhttps化するためここには書かない）

// ~/https/server.js
const { Nuxt, Builder } = require('nuxt')
const https = require('https')
const fs = require('fs')
const config = require('../nuxt.config.js')

const port = 3000
const nuxt = new Nuxt(config)
new Builder(nuxt)
  .build()
  .then(listen)
  .catch(error => {
    console.error(error)
    process.exit(1)
  })

function listen() {
  const options = {
    key : fs.readFileSync(`${__dirname}/server.key`),
    cert: fs.readFileSync(`${__dirname}/server.crt`),
  }

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

サーバーをhttps化して起動する

package.jsonのdevを以下のように書き換える。

// package.json
{
  // 略
  "scripts": {
    // "dev": "nuxt" を書き換える
    "dev": "node ./https/server.js"
  },
  // 略
}

書き換えたらサーバーを起動し、https://localhost:3000でアクセスする

$ npm run dev

参考サイト

• インストール - Nuxt.js
• localhost https · Issue #146 · nuxt/nuxt.js · GitHub

以上

written by @bc_rikko