https://localhostでline-liff-v2-starterを動かしてみた

はじめに

CX事業本部の吉川@広島です。

はてなブックマークを見ているとHTTPSでローカル開発環境を立ち上げる記事が話題になっていました。

How to use HTTPS for local development
[B! https] How to use HTTPS for local development

以前、 line-liff-v2-starter を使ってお試しLIFFアプリを立ち上げる手順を紹介しました。

【LINE】APIからユーザプロフィールを取得する

この記事では、

LIFFアプリではHTTPS必須のため、ngrokを使います。

と案内していましたが、今回はngrokを使わず、上の記事を参考に https://localhost:PORT をセットアップする方法でやってみたいと思います。

筆者環境

• macOS Catalina 10.15.7
• Google Chrome 88.0.4324.96

事前準備

まず、Homebrewを使ってmkcertをインストールします。

FiloSottile/mkcert

brew install mkcert

インストールできたら下のコマンドを実行します。

mkcert -install

私の場合、下のメッセージが出ました。

The local CA is now installed in the system trust store! ⚡️

line-liff-v2-starerリポジトリ直下で証明書を発行します。

pwd # => /path/to/line-liff-v2-starter
mkcert localhost

localhost.pem と localhost-key.pem が生成されます。

証明書を読み込んでLiffアプリ起動

証明書を読み込んで起動するために、ソースコードを一部変更する必要があります。
line-liff-v2-starerはNode.js+Expressで構築されています。

HTTPSサーバを起動するにはhttpsモジュールを利用する必要があるようです。

HTTPS | Node.js v15.7.0 Documentation

httpsとExpressを組み合わせて起動する方法についてはこちらの記事が参考になりました。

Node.js Express で HTTPSを利用するパターン

結果、下のように変更を加えました。

// line-liff-v2-starter/index.js
+ const fs = require('fs');
+ const https = require('https');
const express = require('express');
const app = express();
const port = process.env.PORT || 5000;
const myLiffId = process.env.MY_LIFF_ID;

const options = {
  key:  fs.readFileSync('./localhost-key.pem'),
  cert: fs.readFileSync('./localhost.pem')
};
const server = https.createServer(options,app);

app.use(express.static('public'));

app.get('/send-id', function(req, res) {
    res.json({id: myLiffId});
});

- app.listen(port, () => console.log(`app listening on port ${port}!`));
+ server.listen(port)

では起動します。

MY_LIFF_ID=xxxxxxxxxx npm run start

Chromeで https://localhost:5000 を見に行くと……

ちゃんとHTTPSで立ち上がっていそうですね！

LINE Developersでhttps://localhost:5000を設定

LINE Developersを開いてLIFFアプリプロジェクトのエンドポイントURLに https://localhost:5000 を設定します。

動作確認

Log in や Get Access Token が問題なく動作することを確認できました。

おわりに

最初のセットアップさえ済ませてしまえばHTTPSでlocalhostに繋げるのは非常に便利だと思いました。
お役に立てば幸いです。