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








*所感

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


Previous
Next Post »

人気の投稿