前回は、黒い画面（ターミナル）でコマンドを入力し、手元のパソコン（ローカル環境）でReactアプリが動く「開発の土台」を構築しました。しかし、前回の最後でお伝えした通り、http://localhost:5173/ というURLは「自分自身のパソコン内」でしか閲覧できません。

第4回となる今回は、第2回で取得した合鍵（Cloudflare APIトークン）を使い、手元のコードを実際にインターネット上へアップロード（デプロイ）します。まだ初期画面の段階ですが、早い段階で「本番公開のパイプライン」を開通させておくことが、今後のスムーズな開発において極めて重要となります。

なぜ最初に「本番公開」を試すのか？
アプリを完全に作り込んでから最後に公開しようとすると、いざデプロイした際に「手元では動いていたのに本番サーバーではエラーになる」というトラブルが発生し、原因の特定が難しくなります。

「小さく作って、すぐに本番に届ける」。このセオリーに従い、何も機能が入っていない初期状態の段階で手元と本番サーバーを接続しておくことで、今後の更新作業がコマンド一発で安全に行えるようになるのです。

ビルド：手元のプログラムを「本番用の姿」に変換する
デプロイを行う前に、まず「ビルド」という重要な工程を挟みます。

私たちが開発時に書くReactのコード（TypeScriptやJSXなど）は、人間の開発者にとって読みやすい構造になっています。しかし、インターネット上のブラウザ（SafariやChromeなど）が理解できるのは、最終的にはシンプルなHTML、CSS、JavaScriptのファイル群です。

ターミナルでビルドコマンド（npm run build）を実行すると、Viteが手元のコードを一瞬で解析・圧縮し、Web上で最も高速かつ安全に動作するファイルに変換して「dist」という本番専用フォルダへまとめて出力してくれます。

Wrangler（ラングラー）を使ったコマンドライン・デプロイ
本番用ファイルが用意できたら、いよいよCloudflare Pagesへアップロードします。ここで登場するのが、Cloudflare公式のコマンドラインツール「Wrangler」です。

ターミナルでWranglerのデプロイコマンド（npx wrangler pages deploy dist など）を実行します。この際、第2回で取得したAPIトークンを開発環境に認識させておくことで、パスワード入力なしで安全に認証が通過します。

コマンドを実行すると、ターミナル上にファイル群がアップロードされていくログがリアルタイムで流れ始めます。そして数秒後、緑色のチェックマークとともに「https://〇〇〇.pages.dev」という本番公開URLが画面に出力されます。

本番環境とローカル環境の明確な役割分担
これで、世界中の誰もがあなたのアプリにアクセスできる状態が完成しました。ここで重要となるのが、2つの環境の明確な使い分けです。

ローカル環境（localhost）
「手元の作業部屋」です。コードを書き換えると0.1秒でブラウザに反映されるため、機能の追加や試行錯誤、デザインの微調整のために使います。ここでの変更は世界にはまだ見えません。

本番環境（pages.dev）
「世界に向けた本番店舗」です。手元で機能が完璧に完成したタイミングで再びデプロイコマンドを実行することで、初めて本番URLの中身が最新版へと切り替わります。

次回（第5回）は、いよいよタロット占いアプリの命である「カード画像素材」をプロジェクト内に取り込み、Reactで画像を正しく扱うための基本ルールを紐解いていきます。どうぞお楽しみに！

【編集後記】
ターミナルに表示された [https://…pages.dev](https://…pages.dev) のURLをクリックし、スマートフォンの回線（Wi-Fiを切った4G/5Gの状態）でアクセスしてみてください。手元のパソコンで動いていたあの画面が、自分専用のWebサービスとしてスマートフォンの画面に映し出された瞬間、思わず「おおっ！」と声が出てしまうはずです。この「世界と繋がった感動」こそが、個人開発を推し進める最大の原動力になります！