Help us understand the problem. What is going on with this article?

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

なぜこれが必要なのか

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

どうやってやればいいか

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

  • 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で公開する

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away