create-react-appのサーバとserverless offlineの開発でHTTPSを使う #serverless

ここら辺の続き。
https://qiita.com/celeron1ghz/items/bb3ac19ea837cb986e22

動機

普通に1台のPCで開発するぶんには、create-react-app の付属のサーバは HTTPS=true yarn start とするだけで一発でhttpsで起動できてべんり。

けどブラウザのカメラ機能を使うとなると話は別。

スマフォ等の実機で検証する際には localhost ではなく 192.168.1.2 的なプライベートアドレスでアクセスしないといけなく、デフォルトで用意されている証明書は localhost 向けのためドメイン相違でエラーになります。

そもそも localhost でない場合は https でないと許可ダイアログが出る前にエラーになって何もできません。下記参照。

警告:カメラに直接アクセスする機能は強力なので、ユーザーの同意を得るとともに、サイトを安全なオリジン（HTTPS）に配置する必要があります。

というわけなのでオレオレ証明書を作って配置する。

オレオレ証明書を作る

ローカルの開発はIP変わる可能性があるのでshell fileにしておくとべんり。コマンドの意味はググってください。

DOMAIN=10.0.1.6
echo "generate cert for $DOMAIN..."

cd `dirname $0`
rm -f *.pem
openssl genrsa 2048 > key.pem
openssl req -subj "/C=JP/ST=Tokyo/L=Chuo-ku/O=Example K.K./OU=Example Section/CN=$DOMAIN" -new -key key.pem > csr.pem
openssl x509 -days 3650 -req -signkey key.pem < csr.pem > cert.pem

cat key.pem  >> server.pem
cat cert.pem >> server.pem

クライアント側(create-react-app)

create-react-appで起動するサーバはnpm moduleのwebpack-dev-serverですが
その証明書をどうやって置き換えるかといったら

直接置き換えろ！！という男気のある回答でした。

なので単純に cp server.pem ../../client/node_modules/webpack-dev-server/ssl/ でおk。

サーバ側(serverless)

証明書があるのであれば、serverless.yml でパスを指定するだけ！

custom:
  serverless-offline:
    httpsProtocol: .

簡単。