Zenn
😀

ローカルで立ち上げた React アプリを cloudflared で外部に公開する

2024/10/20に公開
React
Cloudflare
tech

TL;DR

cloudflared を使えばローカルで立ち上げた React アプリを簡単に外部に公開でき、誰かに共有するのに便利

対象読者

（デモ等の目的で）React アプリを外部に公開する手軽な方法を知りたい人

非対象読者

  • cloudflared の詳細を知りたい人
  • React アプリの書き方を知りたい人

はじめに

React アプリの動作を他人に共有するためには、GitHub 等からリポジトリをローカルに clone して立ち上げる等の方法が考えられますが、手間がかかります。
また、顧客にプロトタイプのデモを行う必要がある場合は、ローカルに立ち上げたアプリを見せる方法で実施できますが、開発者が操作した部分の動作しか見せられない為自由度が下がります。顧客が実際にアプリを操作して動作を確認できれば、開発側との認識の齟齬を減らすこともできるかもしれません。
本記事では、ローカルに立ち上げた React アプリを cloudflared を用いて外部に公開する方法について紹介します。

cloudflared とは

cloudflared はトンネリングツールです。
ローカルで立ち上げたサーバーと Cloudflare のネットワークの間にアウトバウンドな接続（トンネル）を確立します（イメージを掴むために、公式ドキュメントの図がとても分かりやすいです）。
類似ツールとして ngrok があります。

動作環境

Ubuntu 22.04 on WSL2

方法

  1. 外部公開したい React アプリを用意してローカルで立ち上げる
$ npx create-react-app sample-app
$ cd sample-app
$ npm start

ブラウザで http://localhost:3000 にアクセスすると、以下の画面が表示されます。

  1. cloudflared で外部公開

（備考）cloudflared のインストール方法は公式ドキュメントを参照してください。

以下コマンドを実行します。外部公開したい React アプリの URL を --url オプションに指定してください。

$ cloudflared tunnel --url http://localhost:3000
(省略)
2024-10-20T06:16:14Z INF Requesting new quick Tunnel on trycloudflare.com...
2024-10-20T06:16:20Z INF +--------------------------------------------------------------------------------------------+
2024-10-20T06:16:20Z INF |  Your quick Tunnel has been created! Visit it at (it may take some time to be reachable):  |
2024-10-20T06:16:20Z INF |  https://XXXXXXXXXXXXXXXXXXX.com                                           |
2024-10-20T06:16:20Z INF +--------------------------------------------------------------------------------------------+

https://XXXXXXXXXXXXXXXXXXX.com がローカルで立ち上げた React アプリを外部からアクセスするために必要なURLです。
ブラウザでこのURLにアクセスすると、http://localhost:3000 でアクセスした時と同様の画面が表示されます（URL部分は上記コマンドを終了させたら無意味なものになりますが、念のため消しています）。

Discussion