たごもりすメモ

コードとかその他の話とか。

React appを手元でProduction modeで動かす

react-scripts startで使えるDevelopment modeだとなんか変なことがちょいちょい起きるので、動作確認をProduction modeでやりたい。

ところでこのアプリからはCORSリクエストを送りまくるのでHTTPSのサイトとしてlocalhostにアクセスしたい。Development modeについては、これはpackage.jsonに以下のように書いておいてnpm startすることで実現できる。

...
  "scripts": {
    "start": "HTTPS=true react-scripts start",
...

React appをProduction modeで動かす

単に動かすならドキュメントにあるようにnpm run buildでビルドしたあと、それを配信するサーバを実行すればいい。

$ npm run build
$ npm install -g serve
$ serve -s build

serveコマンドをHTTPSを有効にして実行する

ところがこれだとHTTPなので、HTTPSにしたいときには困る。見てみたらserveコマンドには--ssl-certと--ssl-keyオプションがあって、このふたつを指定してあればHTTPSで動いてくれるっぽい。ちょいちょいと鍵と証明書を作って実行する。

$ openssl genrsa -out key.pem
$ openssl req -new -key key.pem -out csr.pem
(色々聞かれるが、全部Enter連打でいい)
$ openssl x509 -req -days 9999 -in csr.pem -signkey key.pem -out cert.pem
$ serve -s build --ssl-cert cert.pem --ssl-key key.pem 

   ┌─────────────────────────────────────────────────────┐
   │                                                     │
   │   Serving!                                          │
   │                                                     │
   │   - Local:            https://localhost:3000        │
   │   - On Your Network:  https://192.168.68.103:3000   │
   │                                                     │
   │   Copied local address to clipboard!                │
   │                                                     │
   └─────────────────────────────────────────────────────┘

できた。

Chromeで証明書チェックをスキップする

できたと思ってChromeでhttps://localhost:3000を開くと証明書チェックにひっかかって進めない。Development modeのときはAdvanced以下に開くリンクが出るんだけど、こっちでは出ないのは何の違いによるものなのか。

なんでだよと思って調べてみたら、このページ上で(どこかをクリックしてから?) thisisunsafe とタイプすると開けるとのこと。マジかよと思ってやってみたら、できた。マジかよ。

yuki.world

まとめ

できた。やれやれ。