やりたいこと
LINE のLIFF アプリ を開発していると、手元の環境で試してみたいと思うのですが、https での実行が必須なので ngrok などのトンネリングツールを使ってhttps でアクセスできるようにしていたのですが、ngrok を使うとどうしても転送速度が遅くなってしまいます。
特に最近はNuxt.js などのフレームワークを使ったSPA アプリを作る機会が多いです。SPA アプリでは初回ロード時に多くのファイルをロードしなければならず、そうなるとngrok の転送速度では起動開始から確認できるまでに時間がかかってしまいます。
アプリや開発環境によっては数十秒から1分程度かかることもあり、とてもDX: Developer Experience （開発体験） が良い開発とは言えません。
というわけで、LIFF アプリ開発でのDX を向上するためにもローカル環境にてhttps で実行できるようにしてみました。
設定手順
大げさに書きましたが、公式ドキュメントの「HTTPS 設定を用いた例」にあるとおり、自己署名入り証明書（いわゆるオレオレ証明書）を作り、その証明書を使ってNuxt.js の アプリケーション・サーバーをhttps で実行できるようにするだけです。
試した環境は以下となります。
- macOS Catalina
- Version 10.15.5
- Nuxt.js
- Version 2.14.1
自己署名入り証明書を作成する
自己署名入り証明書の作成には mkcert を使います。
$ brew install mkcert
$ mkcert -install
$ mkcert localhost
上記のコマンドを実行すると証明書ファイルが作成されるので、Nuxt.js アプリのルートディレクトリ（nuxt.config.js ファイルがあるディレクトリ）に配置します。
Nuxt.js アプリでサーバー接続設定を追加する
次にNuxt.js アプリでサーバー接続設定を追加するため nuxt.config.js ファイルに追記します。
なお、ローカル環境でのhttps 接続設定は開発時のみとします。
import path from "path";
import fs from "fs";
let serverConfig = {};
if (process.env.NODE_ENV === "development") {
// 開発時のみHTTPS 接続設定を構成する
serverConfig = {
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"))
}
};
}
export default {
// 中略
// HTTPS 接続設定を反映する
server: serverConfig
};
アプリの起動はいつものとおり yarn dev もしくは npm run dev コマンドを使えばhttps で実行できるようになります。
LINE Developers のLIFF エンドポイントURL にローカル環境のIP アドレスを設定する
あとは下図のようにLINE Developers にあるLIFF エンドポイントURL 項目にローカル環境のIP アドレスを設定するだけです。
これで開発環境のPC ブラウザや、同じネットワークにあるスマートフォンのブラウザでLIFF アプリを利用できるようになりました。
ブラウザのアドレス欄に鍵マークがついていることからhttps でアクセスできていることが分かりります。
まとめ
分かってしまえばとても簡単なことでした。昔からWeb アプリの開発時には開発サーバーのHTTP サーバーにオレオレ証明書を入れていましたよね。
ほんの一手間で無用のイライラも無くなってサクサク開発できるようになりますので、お困りの方はぜひとも試してみてください。