Nuxt.jsのローカル環境でのSSL証明書を数分で設定する方法

きっかけ

世の中には、便利なSaasのサービスが溢れています。そのサービスの中には、個人情報を扱ったりするため、適切に暗号化をした環境で利用することを前提に作られていることが多くあります。今回は、Stripeという決済サービスを自社サービスに取り込もうとした際に発生した際に発生した内容をベースに記載します。

開発環境

開発環境について記載します。

Nuxt.js
パッケージ管理:yarn
ブラウザ:Google Chrome
開発環境: Mac Book Pro

きっかけとなった現象

Stripeという決済サービスがあるのですが、このサービスを利用したクレジットカード決済を利用ｈしたアプリケーションを作成している際に発生した現象です。Stripeでは、クレジットカードのカード情報を提供するフロントエンド向けライブラリと提供するバックエンド向けライブラリを利用して、実装をしていくような形で決済サービスを利用します。Stripeのフロントエンド向けJavascriptライブラリは、Stripeのサービス内のAPIと連携してクレジットカードの番号をやりとりし、その情報にトークンを紐付け、利用者には、トークンを返すという流れになります。
このやりとりの中で、クレジットカード番号等の秘密情報が含まれているため、暗号する必要があったというお話です。下記にクライントのコードを示します。

動かして見ると下記のようなブラウザ上で下記のエラーが発生します。
内容は、Stripe.jsを利用する場合は、HTTPSで動かして下さいね！と言われて怒られてしまってます。

(index):1 You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS.

解決方法

HTTPSで動作するローカル環境が出来れば良いとのことですので、Nuxt.jsでlocalhostでSSL化する方法を実施します。下記に示す2つを実施します。

ローカル環境でSSL証明書を利用できるようにする
作成した証明書をNuxtに設定する

ローカル環境でSSL証明書を利用できるようにする

ローカル環境でSSL証明書を作成する必要があるため、今回は、mkcertを利用することにします。 mkcertは、自己署名入り証明書を簡単に作成することができるツールです。通称、オレオレ証明書と呼ばれているものです。

1.インストール方法(mac を前提に記載しています。)

brew install mkcert

2.ローカル環境に認証局を作成する

mkcert -install

3.証明書を作成する

mkcert localhost

4.実行結果を確認する(下記2ファイルが作成される)

localhost-key.pem
localhost.pem

Nuxtでサーバの挙動を設定する

公式ドキュメントを確認するとhttps://ja.nuxtjs.org/api/configuration-server/
下記のようにnuxt.config.jsを記載すれば良いようです。

import path from 'path'
import fs from 'fs'

export default {
  server: {
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
      cert: fs.readFileSync(path.resolve(__dirname, 'server.crt'))
    }
  }
}

この内容を例に具体的にファイル名を変更します。

server: {
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')),
      cert: fs.readFileSync(path.resolve(__dirname, 'localhost.pem'))
    }
  }

これで設定は終わりです。いつもどおり下記コマンドで起動し、

yarn run dev

ブラウザで確認してみると「証明書」が反映されているのが確認できると思います。

余談

弊社ではpushをトリガーにCICDツールと連携してパイプラインが動作し、専用の開発環境へこのnuxt.config.jsを自動デプロイする仕組みを実装しているのですが、この設定を誤ってそのままデプロイしてしまっていました。自動テストの仕組みで、すぐ気づくことが出来て影響はなかったのですが、少し焦りました。対策としては、ローカル環境向けのNuxt.config.js、クラウド向けのNuxt.config.jsを作成して、実行時やビルド時にシンボリックリンクで切り替えるという形の対策をいれることとしました。

まとめ

公式ドキュメントをきっちり読むと意外と知らないことがあるなと思いました。キーワードでGoogleで検索するのも良いですが、まずはじめに公式ドキュメントを読むということは改めて大事だなと感じました。