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

dyoshikawa

2021.01.28

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

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)

では起動します。