概要
前回の記事で、
Nextjs + Tailwind + Firebase(Firestore) + LIFF
の構成でLIFFアプリを作ったので、LIFFアプリの良さについて語ってみる、
みたいな内容を投稿しました。
今回は、実際に開発していた時に感じた、非常に便利な開発環境について書いてみようと思います。
LIFFアプリエンドポイントの設定
書いていて、LIFFアプリの開発環境についてはいろいろと記事がすでに存在することがわかりましたが、
気にせず進めたいと思います。
LINEディベロッパーのサイトから、
LINEログインチャネルをLIFFアプリ登録した後、
エンドポイントを設定する画面です。
私はここに Heroku にデプロイしたエンドポイント（ある意味本番環境のエンドポイント）を登録しているのですが、これは本番環境としてデプロイした際に登録したものです。
開発の段階では、アプリを修正するたびにデプロイをわざわざ行なってデバッグするのはかなりの手間になります。
このエンドポイントには、httpsのものを入力する必要があるため、
自分で開発しているローカルのhttp のIPをそのまま入力することはできません。
解決策
これを解消するには、大きく２つのやり方が存在します。
- ngrok https://ngrok.com/ を使用し、https環境を構築する
- ローカルに自分で証明したhttps環境を作る
個人的には、ngrokを使うのもいいと思いますし、２番の方法でも開発はしやすかったです。
１番の方法も、２番の方法も、Nextjs, vuejs など使っているフレームワークなどにはよらず、汎用的に使えます。
私は、以下の素晴らしい記事をフォローして、２番の方法で開発をしました。
この記事のHTTPS環境をつくる のセクションをみていただければ問題なくわかると思います。
このserver.js をみていただければわかりますが、自分で生成した
- localhost.pem
- localhost-key.pem
を所定のフォルダに入れて、
HTTPS=true node ./server.js
によりローカル環境にHTTPS環境を構築する必要があります。
一度ローカル環境にHTTPS環境を構築できれば、LIFFアプリのエンドポイントにはそのローカルIPを入力しておき、開発、本番環境にデプロイしたタイミングで、本番用のエンドポイントをLIFFアプリに登録することで、
開発がとてもスムーズになります。
まとめ
今回は、LIFFアプリの開発を行う際の、おすすめのHTTPS環境として、
ローカルで自分でHTTPS環境を構築する
ということについて書きました。
開発環境を整えて、あまり苦しまずにアプリの開発に専念できることはとてもいいことですね。。
みなさんも良いLIFFアプリライフを。
今回はこの辺で。