はじめに

今回は外部APIを利用するのにローカルサーバーをSSL化して開発しなければならなかった。

参考にさせていただいたのがこちらのQiita記事

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

しかし私はLinux(Ubuntu)のマシンを利用しているのでこの通りにはいかない。いくつか手順が違ってくるので、そのメモを残す

Linux用Homebrewのインストール

先程の記事ではmkcertを利用する必要がある。しかしLinuxにbrewはインストールされていないのでLinux用のHomebrewをインストールする必要がある。

まずは下記のコマンドを実行してインストール

sh -c "$(curl -fsSL https://raw.githubusercontent.com/Linuxbrew/install/master/install.sh)"

続いて下記を実行してパスを通す

test -d ~/.linuxbrew && eval $(~/.linuxbrew/bin/brew shellenv)
test -d /home/linuxbrew/.linuxbrew && eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)
test -r ~/.bash_profile && echo "eval \$($(brew --prefix)/bin/brew shellenv)" >>~/.bash_profile
echo "eval \$($(brew --prefix)/bin/brew shellenv)" >>~/.profile

最後にbrewを実行して色々出てくればインストール完了

brew

SSL証明書の発行

ここからは先程のサイトとほぼ同じ

続いてオレオレSSL証明書の発行

まずはインストールしたbrewを利用してmkcertをインストール

brew install mkcert

LocalCAを作成

mkcert -install

続いてlocalhostに対してSSL証明書を発行する

mkcert localhost

Node(Express)をhttpsサーバーを利用して立ち上げ

server/local/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()

このファイルと同一ディレクトリに先程生成したlocalhost-key.pemとlocalhost.pemを配置。

package.jsonにスクリプトを追加。しかし参考にしたサイトと違うのはsudoの権限でコマンドを実行しているところ。

これがないと警告がでて動かない

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

cross-envとnodemonをインストールしていない場合にはそれぞれ予めインストールしておこう

ちなみにnodemonってなんと読むのだろうか?普通にノードデーモン?のでえもん?(ドラえもん的な?)

誰か読み方教えてください

sudo yarn global add cross-env
yarn add --dev nodemon

さてこれでサーバーを立ち上げてみよう。

yarn dev

だがしかし、これだと403エラーが出る。

localhostへhost名を割り当てる。

今回はhttps://bohol.com(仮)というURLでサーバーを立ち上げたかった。

localhostへhost名を割り当てなければならない

vim /etc/hosts

上記のhostsというファイルを編集してみよう

127.0.0.1   bohol.jp localhost

一番上に上記の記述があったのでドメイン名を追加。

これでもう一度サーバーを立ち上げてみよう。

yarn dev 

今度はうまく立ち上がった

まとめ

プロジェクトでLinux機を利用していてNuxtをSSL化しなければならないとき参考にしてほしい。ちなみに他のOSでは検証していない