大フィナーレ：インターネットへデプロイ

アプリ全体をネットに載せ——最初の <h1> からここまでの旅を振り返ろう。

旅の最後の一歩

アプリは localhost、自分のパソコンで動いてる。マスターの最終スキル：本物のアドレスに出す。フロントエンドとバックエンドは別々にデプロイ——最初から分けて作った理由そのもの。

フロントエンド（React）のデプロイ

Vite は1コマンドでアプリを完成ファイルに：

npm run build

dist/ フォルダができる——普通の HTML、CSS、JavaScript。置き場所は知ってる：静的サイト、レベル1と同じ！

GitHub Pages – dist/ の中身をリポジトリにアップロード、レベル1で知った方法。
または便利に Netlify / Vercel – 無料、GitHub アカウントと接続、変更のたび自動デプロイ。保護者と一緒にどちらか試して；ガイド付きセットアップで数クリック。

バックエンド（Node.js）のデプロイ

サーバーは常時オンのコンピュータが必要。Render や Railway がそれ——学校プロジェクトに足りる無料枠：

my-server フォルダを GitHub の別リポジトリにアップロード（node_modules なし——サーバー側で自動インストール）。
render.com で（保護者と一緒）New → Web Service、GitHub リポジトリ接続、設定：Build Command npm install、Start Command node server.js。
Render が https://my-server.onrender.com みたいなアドレスをくれる。ブラウザで .../api/messages を試す——API がインターネット上で生きてる！
最後の詳細：フロントエンドのすべての http://localhost:3900 を新しいサーバーアドレスに置き換え、フロントエンドを再デプロイ。

⚠️

ゲストブックを世界に出す前に、警備員の目で： インターネット上の誰でも見つけられる。サーバー側のメッセージ長チェックを維持（前レッスンで持ってる！）、メッセージを生 HTML として表示しない（React が自動で守ってくれる——使う理由の1つ）、保護者と時々本を確認することに合意。大きなサイトには専門チームがある——モデレーション と呼ぶ。

🏆 おめでとう、マスター！

始まりを振り返る時間：

レベル1： 空のファイル → <h1>It works!</h1> → GitHub Pages 上の HTML/CSS サイト全体。
レベル2： 変数、条件、関数 → ダークモード、ギャラリー、クイズ、フォーム。
レベル3： ターミナル、Node.js、React、コンポーネント、state、Express、API → インターネット上のフルスタックアプリ。

今知ってるのは本物のウェブ開発者の技の基礎。おもちゃ版じゃない——実際の基礎。本物の会社と同じツール、同じプロセス、同じ考え方。

次はどこへ？

ここから自然につながる方向：

データベース – メッセージがサーバー再起動を生き残る（SQLite が一番フレンドリー）。
TypeScript – エラーチェック付き JavaScript；会社の標準。
ターミナルの Git – 手動アップロードの代わりに git add、git commit、git push。
自分のアイデア – 最高の先生。クラス用アプリ？クラブのトーナメント表？作り方は分かった。

✅

確認（そしてさようなら）： フロントエンドとバックエンドが公開アドレスで動き、ゲストブックが世界中からメッセージを受け付ける。家族にアドレスを送ろう——全部自分の手で作ったことを忘れずに。 🚀

このレッスンのまとめ

フロントエンド：npm run build → 静的ファイル → GitHub Pages/Netlify/Vercel。
バックエンド：GitHub リポジトリ → Render/Railway → 公開 API アドレス → フロントエンドの localhost を置換。
公開アプリは責任：サーバー側チェックと大人の監視。