Nuxt.jsでSSL(https)化する方法

Nuxt.js を使ったWebアプリケーションをSSL化したかったので、自己証明書を使ってローカル環境で HTTPS 通信できるようにしました。

個人情報などの重要なデータを送受信する際、SSL による暗号化通信をすることで、悪意のある第三者からの盗聴や改ざんを防ぐことができます。
今回は macOS のみで使えるキーチェーンアクセスで証明書を作成し、ローカル環境に秘密鍵とサーバー証明書を配置して HTTPS サーバーを起動しました。

＊環境

macOS
nuxt 2.8.1

＊参考

＊証明書の作成

キーチェーンアクセスから証明書を作成します。
コマンドラインでも作成することができますが、こちらのほうが簡単でした。

キーチェーンアクセス > 証明書アシスタント > 証明書を作成をクリックします。

任意の名前を入力し、証明書のタイプで「SSLサーバ」を選択、「デフォルトを無効化」にチェックを入れます。

確認画面が表示されるので、続けるをクリックします。

シリアル番号と有効期限はデフォルトのままで問題ないので「続ける」をクリックします。

個人情報は適宜入力しておきます。未入力の項目があっても大丈夫です。

鍵のサイズとアルゴリズムもデフォルトのままで問題ないので「続ける」をクリックします。

鍵用途拡張領域はデフォルトのまま「続ける」をクリックします。

基本制約拡張領域もデフォルトのまま「続ける」をクリックします。

dNSName に「localhost」、IPAdress に「127.0.0.1」を入力します。

証明書の作成場所はデフォルトのままで「作成」をクリックします。

証明書が作成されるので「完了」をクリックします。

ログインの「自分の証明書」に作成されています。作成された証明書「localhost」をダブルクリックします。

この証明書を使用するときを「常に信頼」に変更します。

更新した証明書を右クリックし「localhost を書き出す」をクリックします。

任意の名前を入力し、拡張子を「.cer」で保存をクリックします。
cer ファイルは Certificate の略で証明書のことです。公開鍵が誰のものかを証明していて、中身には公開鍵も含まれています。

証明書のなかに秘密鍵があるので、鍵を右クリックして「書き出す」をクリックします。

任意の名前を入力し、拡張子を「.p12」で保存をクリックします。
p12 は個人情報交換ファイルです。

パスワードを聞かれるので適当に入力します。
あとで使うので覚えておきます。

ログインパスワードを入力します。

＊CRTファイルの生成

OpenSSL のコマンドを使って、証明書（.cer）からサーバー証明書（.crt）を作成します。CRTファイルはサーバー証明書のことで秘密鍵で暗号化されたファイルです。

$ ls
server.cer
server.p12

# CRTファイルを生成
$ openssl x509 -in server.cer -inform DER -out server.crt -outform PEM

$ ls
server.cer
server.crt    <--生成
server.p12

＊秘密鍵の生成

p12 ファイルから秘密鍵（.key）を生成します。
パスワードを聞かれるので、キーチェーンアクセスで設定したパスワードを入力します。

$ openssl pkcs12 -in server.p12 -nocerts -nodes -out server.key
Enter Import Password:

$ ls
server.cer
server.crt
server.key    <--生成
server.p12

＊HTTPS サーバーの起動設定

Nuxt プロジェクトに HTTPS化する設定を追加します。
serverディレクトリ配下のindex.jsで、秘密鍵とサーバー証明書を読込み HTTPS サーバーを起動させます。
<server/index.js>

// ---- ↓追加 start ----
const https = require('https')
const fs = require('fs')
// ---- ↑追加 end ----

const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = express()
const config = require('../nuxt.config.js')
config.dev = process.env.NODE_ENV !== 'production'

async function start() {
  const nuxt = new Nuxt(config)
  const { host, port } = nuxt.options.server

  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  } else {
    await nuxt.ready()
  }

  // ---- ↓追加 start ----
  const options = {
    key: fs.readFileSync('./server/server.key'),
    cert: fs.readFileSync('./server/server.crt')
  }
  https.createServer(options, nuxt.render).listen(port)
  // ---- ↑追加 end ----

  app.use(nuxt.render)
  app.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })
}
start()

起動すると https://localhost:3000/ でアクセスできるようになります。

$ npm run dev

＊所感

コマンドラインで証明書を作成しようとしたのですが、証明書や秘密鍵のファイルの理解が浅かったため、うまくいかず何時間もハマりました。人に説明できるくらいに、よく理解しておこうと思います。
また、今回の内容では本番環境への導入やエラー処理などの考慮ができていないのですが、時間のあるときに設定ファイルを改善しておこうと思います。

もぐもぐプログラミング

＊環境

＊参考

＊証明書の作成

＊CRTファイルの生成

＊秘密鍵の生成

＊HTTPS サーバーの起動設定

＊所感

人気の投稿