【Nuxt.js】ローカル環境をhttpsで起動する方法

なぜこれが必要なのか

位置情報などを取得するGeolocationなど、http通信では動作しないものを動作させたい場合など。

どうやってやればいいか

nuxt.jsの設定でやる方法と、外部サービスを利用する２パターンがあります。

• Nuxt.jsの設定でやる方法
• 外部サービス（ngrok）を利用する方法

Nuxt.jsの設定でやる方法

実行環境

• @nuxt/cli v2.8.1
• macOS Catalina(v10.15.2)
• パッケージ管理はyarn

自己署名入り証明書の作成

mkcertを使って、オレオレ証明書を作成します。（コマンド内容は割愛）

$ brew install mkcert
$ mkcert -install
$ mkcert localhost

上記手順で、以下の証明書が発行されます。

• localhost.pem
• localhost-key.pem

起動設定にhttpsの起動設定を追加

nuxt.config.jsに、先程作成した証明書を設定します。
Ref：公式ドキュメント - serverプロパティ(HTTPS設定)

• importの追加
• serverプロパティにhttpsのプロパティを追加して、発行した証明書を設定する

nuxt.config.js

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

export default {
server: {
    port: 3000,
    host: "0.0.0.0",
    https: {
      key: fs.readFileSync(path.resolve(__dirname, "localhost-key.pem")),
      cert: fs.readFileSync(path.resolve(__dirname, "localhost.pem"))
    },
    // 以下その他設定...
}

起動

この状態で

$ yarn run dev

とすればhttpsでローカル環境が起動します。

外部サービスを利用する方法

設定周りをいじらなくても、ngrokというサービスを使うと、ローカル環境をhttpsで公開してくれます。便利！

利用方法は以下のブログが詳しく説明されています（外部リンク）
ngrokを使ってローカル開発中のVueアプリをHTTPSで公開する