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

  • 投稿日
  • 著者 アルム＝バンド
  • カテゴリー React.js
  • カテゴリー 開発環境

経緯

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

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

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

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

対処

今回は 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

Uncaught TypeError: Cannot read property ‘writeText’ of undefined

https化

Clipboard API create-react-app react-scripts SSL

この記事を書いた人

アルム＝バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。

記事一覧