この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
吉川@広島です。
https://localhostでline-liff-v2-starterを動かしてみた | DevelopersIO
自分はLINE事業部所属なのですが、LIFFアプリ開発において、手元で動作確認するためにローカルサーバをLINE Developersに登録しようとすると http://localhost:{PORT}
はinvalidなURLとして弾かれてしまいます。
そのため、httpsなローカル開発サーバが欲しくなります。
これをviteで実現する方法を紹介します。
[Vite] Enabling https on localhost - DEV Community
主にこちらの記事を参考にさせて頂きました。
環境
- node 15.11.0
- yarn 1.22.10
- npm 7.18.1
- vite 2.4.4
サンプルプロジェクトを作成
まず検証のためのサンプルプロジェクトを作成します。
npm init vite@latest sample-app -- --template react-ts # 何でも良いのですがreact-tsのtemplateで作成します
cd sample-app
yarn install
mkcertで証明書を発行
証明書の発行にmkcertを利用します。
自分の端末はMacなので、インストールするためにHomebrewを使います。
brew install mkcert
証明書を発行します。
mkcert -install
mkcert localhost
以上で
- localhost.pem
- localhost-key.pem
が生成されます。
vite.config.tsを編集
vite.config.tsを編集し、
- httpsモードをONにする
- 作成したkeyとcertを読み込ませる
以上の設定を行います。
下記のコード追加を行います。
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'),
+ }
+ },
})
https.serverプロパティについては下記に説明があります。
https以下の更に細かいプロパティについては、
The value can also be an options object passed to https.createServer().
HTTPS | Node.js v16.6.0 Documentation
こちらを参照とのことです。
なお必須ではないですが、このままだと import fs from 'fs'
の型定義エラーが出るので
yarn add -D @types/node
でNodeの型定義を追加しておきましょう。
ローカルサーバを起動
以上で準備完了です。ローカルサーバを起動します。
yarn dev # もしくはyarn vite
Chromeで https://localhost:3000
にアクセスすると問題なく開くことができました。
有効な証明書と判定してくれていますね。
これで https://localhost:{PORT}
をLINE Developersに登録して開発できるようになりました。
[注意]CLIで--https trueオプションは付けない
ここからは個人的にハマった点の共有です。
CLIオプションの --https true
をつけないようにしましょう。具体的には下のようなコマンドです。
yarn vite --https true # これはダメ
最初自分が試した時にvite.config.tsの設定と合わせてこのオプションをつけてしまっていったんですが、どうもこれをするとせっかく設定したhttps以下がデフォルト設定に上書かれてしまうようです。
このようにChromeに怒られてしまいます。
同じハマり方をする人はあまりいないかもしれませんが一応共有します。