Nuxt.js localhost SSL化

Nuxt.jsでLIFFアプリを作成する際、LINEログインにlocalhost:3000のURLを追加する必要があります。LINEログインに設定するURLは、https://で始まる必要があり、つまりSSL化されているページでなければなりません。

本記事は、ローカル環境でLINEログインのテストを行う際、ローカル開発環境(プロジェクトディレクトリ)にてCA証明書を発行し、仮想サーバをSSL化することを目的としています。

Chocolatey

Chocolatey Software Docs | Setup / Install
How to install Chocolatey CLI
docs.chocolatey.org

SSL化をするにあたって、CA証明書を発行する必要があります。Windows でCA証明書を発行するためには、mkcert コマンドを使用して証明書を生成します。mkcert コマンドを使用するには、

  1. Chocolateyをインストール
  2. Chocolateyにて mkcertをインストール
  3. mkcertでCA証明書を発行

という流れになります。
Chocolateyがインストールされているかわからない場合、PowerShellを起動して以下のコマンドを実行してください。バージョンが表示されたらChocolateyがインストールされています。

PS D:\ > choco --version
0.10.15

Chocolatey インストール

※ PowerShell 管理者で実行

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

mkcert インストール

PS D:\ > choco install mkcert

CA証明書発行

Nuxtプロジェクトディレクトリに移動します。

PS D:\ > cd [Nuxtプロジェクトディレクトリ]

mkcert localhost コマンドでCA証明書を発行します。

PS D:\[Nuxtプロジェクトディレクトリ] > mkcert localhost

nuxt.config.js を開き、以下のコードを挿入します。

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

export default {

  ～ 略 ～

  server: {
    port: 3000,
    host: "localhost",
    https: process.env.NODE_ENV != 'development' ? {} : {
      key: fs.readFileSync(path.resolve(__dirname, "localhost-key.pem")),
      cert: fs.readFileSync(path.resolve(__dirname, "localhost.pem"))
    },
  }
}

yarn dev コマンドでローカルサーバを立ち上げ、https://localhost:3000となっていれば成功。

スポンサーリンク

コメント