📱

LIFFをローカル環境で開発するためにhttps化する

に公開
React
liff
Vite
tech

概要

Reactとviteで構築するSPAをLIFF化するにあたり、localhostをhttps化する必要があった。
localhostや127.0.0.1は開発時のためにhttpでも許容してくれているサービス(GoogleログインやCognito)もあるが、LINEはそういうわけではないようなので対応方法をまとめます。

viteを使っているのでvite.config.tsをいじっていますが、Nextなどにも同様の機構はあると思うのでmkcertを使用するあたりまでは共通して参考になるのかなと思います。

変更箇所

.devcontainer/Dockerfile

devcontainerで使用しているDockerfile内でmkcertを使いたいので、.devcontainer/Dockerfileに以下を追加する。

+ apt install mkcert

.devcontainer/devcontainer.json

.devcontainer/devcontainer.jsonのpostCreateCommandで指定しているスクリプトを直接変更する。または、以下のようにpostCreateCommand.shを作ってそれを呼び出すようにする。

作成されるpemはデフォルトだとdevcontainerのルートに出力されます。
モノレポの場合はservices/webなどvite.config.tsのあるパスは違うので、ご自身の環境に合わせてmvしてください。

postCreateCommand.sh
# 証明書の作成
mkcert -install
mkcert localhost
# vite.config.tsと同一パスに移動する
mv  ./localhost.pem <vite.config.tsがあるパス>
mv ./localhost-key.pem <vite.config.tsがあるパス>

vite.config.ts

server.httpsを追記し、localhost起動時にhttsp化するようにする。
その際に前述のmkcertで作成した証明書を参照するようにする。

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
+import fs from 'fs'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()],
+ server: {
+   https: {
+     key: fs.readFileSync('./localhost-key.pem'),
+     cert: fs.readFileSync('./localhost.pem'),
+   }
+ },
})

これで起動時にlocalhostをhttps化できるようになりました。

参考

https://ja.vite.dev/config/server-options.html#server-https

https://dev.classmethod.jp/articles/vite-https-localhost/

https://qiita.com/iruka/items/76ce765057b457b29c64

https://s1r-j.hatenablog.com/entry/2022/03/21/031222

Discussion