Edited at

Ubuntu上のNuxtプロジェクトをローカルサーバーでExpressを利用してSSL化


はじめに

今回は外部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では検証していない