React (create-react-app) で Clipboard API にアクセスするために localhost:3000 をhttpsにする

経緯

• クリップボードにテキストをコピーするボタンの実装 - Qiita
• JavaScript でクリップボードにテキストをコピーする (2021年版) | MSeeeeN | 大阪発 IT メディア by MSEN

React アプリ(create-react-app(react-scripts))で Clipboard API を使おうとしたところ、次のエラーが発生してしまいました。

Uncaught TypeError: Cannot read property ‘writeText’ of undefined ...

• 【javascript】navigator.clipboard.writeTextで Uncaught TypeError: Cannot read property ‘writeText’ of undefined – オワタ太のブログ
• [JS] http環境ではnavigator.clipboard.writeTextがエラーになる - プロプログラマ -Flex,Air,C#,Oracle,HTML5+JS-

調べてみたところ、 https でないと使用できないようです。

そこで通常 npm start で自動起動してくる http://localhost:3000/ を https://localhost:3000/ にする必要に迫られたので、その方法を書き留めておきます。

対処

• XAMPP for WindowsでSSLを有効にする - Qiita
• Create React Appで作成したアプリをローカルのMacBook上でHTTPSで動作させる - kdnakt blog

今回は XAMPP の入っているPCでそのオレオレSSL証明書が既にあったので、それを流用します。

証明書を server.crt、 秘密鍵を server.key という名前でコピーして、 create-react-app プロジェクト配下に設置します(今回は ssl/ ディレクトリを切りました)。

次に、 .env に次の3行を足して再度 npm start します。

HTTPS=true
SSL_CRT_FILE=./ssl/server.crt
SSL_KEY_FILE=./ssl/server.key

これで https://localhost:3000/ でアプリにアクセスでき、無事 Clipboard API も動かすことができました。

参考

Clipboard API

• クリップボードにテキストをコピーするボタンの実装 - Qiita
• JavaScript でクリップボードにテキストをコピーする (2021年版) | MSeeeeN | 大阪発 IT メディア by MSEN

Uncaught TypeError: Cannot read property ‘writeText’ of undefined

• 【javascript】navigator.clipboard.writeTextで Uncaught TypeError: Cannot read property ‘writeText’ of undefined – オワタ太のブログ
• [JS] http環境ではnavigator.clipboard.writeTextがエラーになる - プロプログラマ -Flex,Air,C#,Oracle,HTML5+JS-

https化

• XAMPP for WindowsでSSLを有効にする - Qiita
• Create React Appで作成したアプリをローカルのMacBook上でHTTPSで動作させる - kdnakt blog