viteでhttpsなlocalhostを起動する

吉川@広島です。

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

サンプルプロジェクトを作成

まず検証のためのサンプルプロジェクトを作成します。

Getting Started | Vite

npm init vite@latest sample-app -- --template react-ts # 何でも良いのですがreact-tsのtemplateで作成します
cd sample-app
yarn install

mkcertで証明書を発行

FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any names you'd like.

証明書の発行に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プロパティについては下記に説明があります。

Configuring Vite | Vite

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に怒られてしまいます。

同じハマり方をする人はあまりいないかもしれませんが一応共有します。