ngrokを使ってローカル開発中のVueアプリをHTTPSで公開する

開発中のVueアプリをHTTPSで公開したい

Vueアプリを開発中は通常、以下の流れで開発すると思います。

1. yarn serve で http://localhost:3000 で起動
2. ブラウザで http://localhost:3000 を開く
3. 以降、変更内容がホットリロードされる

通常はこの流れでスピーディに開発できますが、ある事情によりHTTPSとして立ち上げなければならない場合があります。

• LIFF（LINE Front-End Framework）などLINE上で立ち上げたい場合 (例)
• HTTPSのみ許可されるブラウザで起動したい場合

そんな時は ngrok を使って、ローカルで起動しているアプリをHTTPSで公開しましょう。

導入方法

今回は vue create などでVueアプリを作成している前提で進めます。

$ vue create ngrok-sample

Vueアプリの設定

ここが Vueアプリの場合の最重要ポイント です。Vueの設定を変更します。

vue.config.js に記載する場合

vue.config.js

module.exports = {
  // 他の設定…
  devServer: {
    disableHostCheck: true
  }
}

package.json に記載する場合

package.json

{
  【他の設定…】
  "vue": {
    "devServer": {
      "disableHostCheck": true
    }
  }
}

設定後、ローカルで起動させます。

$ yarn serve
 DONE  Compiled successfully in 3342ms                                                                                                                                                          15:51:51


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.10.24:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

ngrokのインストール

まずngrokが使えるように、アカウントを登録します。

• https://dashboard.ngrok.com/login

登録が完了すると以下の画面が表示されます。この中の 3. Connect your account に記載されている authtoken をコピーしておきます。

次に ngrok をインストールします。Macの場合はHomebrewを使う方法がいたってシンプルです。

先ほどローカルで起動したプロンプトとは別のプロンプトを開き、以下のコマンドでインストールしましょう。

$ brew cask install ngrok

先ほどの authtoken を設定します。

$ ngrok authtoken 【取得したauthtoken】

あとは以下のコマンドを実行します。

$ ngrok http 8081
ngrok by @inconshreveable                                                                                                                                                               (Ctrl+C to quit)

Session Status                online
Account                       諏訪悠紀 (Plan: Free)
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://eca64bce.ngrok.io -> http://localhost:8080
Forwarding                    https://eca64bce.ngrok.io -> http://localhost:8080

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

これで起動完了です。Forwarding に記載されている https から始まるURLにアクセスすると、ローカルで起動したVueアプリが表示されます。

ホットリロード（自動リロード）は効きませんが、リロードすると更新できます。

URLを固定したい場合

上記の手順でHTTPSサイトとして公開することができましたが、ngrokのプロセスを終えてしまうと閉じられ、再度立ち上げた際には異なるURLになってしまいます。

ドメインを固定化したい場合は有償プランへのアップグレードが必要です。Basic Planで$5から始められますのでご検討ください。

• https://dashboard.ngrok.com/billing/plan

Developer time is expensive. いい言葉ですね…！

まとめ

ローカルで開発中のVueアプリをHTTPSですぐに公開したい場合はぜひ使ってみてください。