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

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

More than 1 year has passed since last update.

はじめに

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

MikihiroSaito
Javascript好きな人。将来ボホール在住エンジニア。 技術関連の記事をメインに情報を発信します。 Tyepscript、React、Vue(Nuxt)、Git、Docker等
https://blog.boholabo.com
yyphp
PHPerが毎週集まり、ざっくばらんに情報交換する雑談コミュニティ
https://yyphp.connpass.com/
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