ngrokを使ってローカル開発中のVueアプリをHTTPSで公開する
開発中のVueアプリをHTTPSで公開したい
Vueアプリを開発中は通常、以下の流れで開発すると思います。
yarn serveでhttp://localhost:3000で起動- ブラウザで
http://localhost:3000を開く - 以降、変更内容がホットリロードされる
通常はこの流れでスピーディに開発できますが、ある事情によりHTTPSとして立ち上げなければならない場合があります。
- LIFF（LINE Front-End Framework）などLINE上で立ち上げたい場合 (例)
- HTTPSのみ許可されるブラウザで起動したい場合
そんな時は ngrok を使って、ローカルで起動しているアプリをHTTPSで公開しましょう。
導入方法
今回は vue create などでVueアプリを作成している前提で進めます。
$ vue create ngrok-sample
Vueアプリの設定
ここが Vueアプリの場合の最重要ポイント です。Vueの設定を変更します。
vue.config.js に記載する場合
module.exports = {
// 他の設定…
devServer: {
disableHostCheck: true
}
}
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が使えるように、アカウントを登録します。
登録が完了すると以下の画面が表示されます。この中の 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から始められますのでご検討ください。
Developer time is expensive. いい言葉ですね…！
まとめ
ローカルで開発中のVueアプリをHTTPSですぐに公開したい場合はぜひ使ってみてください。
