こんにちは！BULB加藤です。
LINE開発やLIFFアプリ開発を効率化するために初期段階でやっておいたほうが良いこととして、localhostの証明書設定というものがあります。
LIFFが実際に動くエンドポイントURLはhttps通信しか許可されませんので、特に設定をしていないと開発や検証が大変になってしまいます。
こちらでは最もポピュラーは方法として、mkcertで証明書の登録を進めていきます。LINE開発だけでなく様々なシーンで役立つと思いますので、この機会にやっておきましょう。
mkcertとは
ローカル環境に認証局をインストールできるツールです。コマンドラインから簡単にインストールすることができます。MacでもWindowsでもいけるみたいですね。
コマンドラインからインストール
今回はmacで試したのでhomebrewでインストールします。
brew install mkcert
mkcert -install
mkcert localhost
途中パスワードを求められるので入力。
mkcert証明書ディレクトリへ移動
次に証明書が配置されるディレクトリに移動して、登録を実行していきます。以下のコマンドを叩くとディレクトリ情報が返ってきますので、cdでそこへ移動します。
mkcert -CAROOT //ディレクトリ情報が返ってくるのでそこへ移動
証明書発行を実行
mkcert localhost
これで「localhost」にアクセスした際の証明書が生成されます。
Created a new certificate valid for the following names 📜
- "localhost"
The certificate is at "./localhost.pem" and the key at "./localhost-key.pem" ✅
It will expire on 14 August 2023 🗓
僕が試したときは、有効期限は2年3ヶ月でした。なんだか微妙ですね！
httpsでアクセスする
フロントエンドの開発環境にもよりますが、Reactの場合はこのようなコマンドでサーバーを立ち上げるとhttpsでアクセス可能になります。（その他configファイルに設定を書き込む方法もあるようです）
HTTPS=true SSL_CRT_FILE=$(mkcert -CAROOT)/localhost.pem SSL_KEY_FILE=$(mkcert -CAROOT)/localhost-key.pem npm start
アドレスバーが鍵マークになっています。OKですね！
あとはLIFFのエンドポイントURLをhttps://localhost/などデバッグ用URLに変更しておきましょう。
今回は以上です。引き続き快適なLINE開発ライフを〜！
Discussion