この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
開発中の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
に記載する場合
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が使えるように、アカウントを登録します。
登録が完了すると以下の画面が表示されます。この中の 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ですぐに公開したい場合はぜひ使ってみてください。