🌐 Vibe Codingで作ったアプリを”世界に公開”してみた！ 農家でもできるWeb公開 超入門
GitHub + Vercelで、自分のPCだけで動いていたアプリに「世界共通のURL」を発行する
npm run dev でブラウザでも動いた！」「…でも、これってパートさんのスマホでは見られないんだよね？」
「自分のパソコンを閉じたらアプリも止まっちゃうし…」前回の記事では、Antigravityを使ってアプリを 「作って」「自分のPCで動かす」 ところまでをご紹介しました。でも、せっかく作ったツールも 自分のパソコンの中だけ では意味がありません。
パートさんに「このURL開いて」と送れたら、それだけで現場が変わりますよね。今回は、いよいよ 「誰でもスマホからアクセスできるURLを発行する」 ところまでやります。
- 「ローカル」と「公開」の違い
- GitHub（コードの保管庫）のアカウント作成
- Vercel（無料の公開サービス）でURLを発行する方法
- スマホで動作確認 → パートさんにURLをLINEで送るまで
- Buildモードの「Deploy」との違い
🌱 「ローカル」と「公開」の違い
| npm run dev（前回） | Web公開（今回） | |
|---|---|---|
| 見られる人 | 自分だけ | URLを知っている全員 |
| スマホ対応 | 同じWi-Fiなら△ | どこからでも◎ |
| PCを閉じたら | アプリ停止 | 24時間動き続ける |
| URL | localhost:5173（自分用） | pesticide-calculator.vercel.app（世界共通） |
📦 公開に必要な「2つの無料サービス」
Antigravityで作ったコードを預ける場所。無料。Googleアカウントのように、最初に1回だけ登録。
GitHubに預けたコードを自動でURLに変えてくれる。無料。GitHubアカウントでログインするだけ。
🔧 公開手順（5ステップ）
ステップ① GitHubアカウントを作る（5分）
- github.com にアクセス
- 「Sign up」をクリック
- 「Create an account」を選択
- メールアドレス、パスワード、ユーザー名を入力
- メールに届く確認コードを入力して完了
ステップ② AntigravityとGitHubをつなぐ（3分）
GitHubアカウントを作っただけでは、Antigravityからコードをアップロードできません。
「AntigravityにGitHubアカウントを教えてあげる」 作業が必要です。
「保管庫の鍵を、農場マネージャー（Antigravity）に渡す」ようなもの。鍵がないと荷物を預けられません。
この接続には GitHub CLI（ギットハブ シーエルアイ） というツールを使います。
難しそうに聞こえますが、Antigravityのチャットに頼むだけで自動でやってくれます。
方法A：AIに頼む（おすすめ！）
Antigravityのチャットに以下を入力：
AIが gh auth login コマンドを実行し、以下のような流れで進みます：
- ターミナルに 確認コード（8桁の英数字） が表示される
- ブラウザが自動で開き、GitHubのログイン画面が表示される
- 先ほど作ったGitHubアカウントでログイン
- 確認コードを入力して 「Authorize」 をクリック
- ターミナルに 「✓ Logged in as ○○○」 と表示されたら成功！
方法B：自分でやる場合（参考）
Antigravityのターミナルに以下を入力：
表示される質問に以下のように答えます：
- 「Where do you use GitHub?」→ GitHub.com
- 「What is your preferred protocol?」→ HTTPS
- 「Authenticate Git with your GitHub credentials?」→ Yes
- 「How would you like to authenticate?」→ Login with a web browser
その後はブラウザで確認コードを入力して完了です。
もし「gh: command not found」と表示されたら、GitHub CLIがインストールされていません。Antigravityのチャットに 「GitHub CLIをインストールして」 と頼めば、AIがインストールから対応してくれます。
ステップ③ Antigravityからコードをアップロード（3〜5分）
方法A：AIに頼む（おすすめ！）
Antigravityのチャットに以下を入力：
リポジトリ名は「pesticide-calculator」でお願いします。
AIが git init → git add → git commit → git push を全部自動でやってくれます。
方法B：自分でやる場合（参考）
ターミナルに以下を順番に入力：
git add .
git commit -m “初回アップロード”
git remote add origin https://github.com/あなたのユーザー名/pesticide-calculator.git
git push -u origin main
ステップ④ Vercelと連携して公開（3分）
- vercel.com にアクセス
- 「Continue with GitHub」 でログイン（GitHubアカウントで認証）
- 「Add New Project」→ さっき作った 「pesticide-calculator」 を選択
- 設定はそのままで 「Deploy」ボタン をクリック
- 1〜2分待つと… 🎉 URLが発行される！
ステップ⑤ スマホで確認 → パートさんにURLを送る（1分）
- 発行されたURLをコピー
- スマホのブラウザで開いて動作確認
- LINEでパートさんに送信！
Google検索で「QRコード 作成」と検索 → URLを貼り付け → 生成されたQRコードを印刷して作業場に貼っておくと、スマホをかざすだけでアクセスできます。
🔄 アプリを更新したくなったら？
Antigravityで修正 → GitHubにアップロード → Vercelが自動で再公開してくれる
「計算結果の文字をもっと大きくして」
数分後、最新版に！
📊 Buildモードの「Deploy」と何が違う？
| Buildモードの公開 | Antigravity + Vercelの公開 | |
|---|---|---|
| 手順 | ボタン1つ（超簡単） | GitHub → Vercel（数ステップ） |
| カスタムURL | × | ○（独自ドメインも設定可能） |
| 更新 | 手動で再Deploy | git push で自動更新 |
| 機能の自由度 | シンプルなアプリ | 履歴管理・DB連携など本格対応 |
| 複数ページ | △ | ◎ |
- 「まず動くものを5分で公開」→ Buildモード
- 「本格アプリを継続的に改善しながら公開」→ Antigravity + Vercel
⚠️ 知っておきたい注意点
URLを知っていれば世界中の誰でも見られます。個人情報や機密データは絶対に入れないでください。
Vercelには Hobby（無料） と Pro（月額$20〜） と Enterprise（要見積もり） の3プランがあります。
| Hobby（無料） | Pro（$20/月〜） | |
|---|---|---|
| 料金 | $0（永久無料） | $20/デプロイユーザー/月 |
| データ転送量 | 月100GBまで | 月1TBまで |
| ビルド時間 | 月100時間まで | 月400時間まで |
| 関数実行 | 月100GB時間まで | 月1,000GB時間まで |
| ドメイン数 | プロジェクトあたり50個 | 無制限 |
| チーム利用 | 個人のみ | チームコラボ対応 |
| ビルド速度 | 通常 | 高速（キュー待ちなし） |
| 独自ドメイン | ○ | ○ |
| SSL/HTTPS | ○（自動） | ○（自動） |
農家さんの現場ツールならHobby（無料）で十分です。 たとえば月100GBの転送量は、1ページあたり500KBのアプリなら 月に約20万回アクセスできる計算 です。パートさん数人で使う計算ツールなら、まず上限に達することはありません。
もし将来アプリが成長してアクセスが増えたら、そのときにProへのアップグレードを検討すれば大丈夫です。
前回の記事で触れた通り、LocalStorageはブラウザごとに独立しています。自分のスマホとパートさんのスマホでは データは別々 です。共有するにはデータベース連携が必要ですが、それは今後の応用編で。
✅ 今日から試せる！5分アクション
- github.com でアカウントを作成する
- vercel.com のトップページを眺めてみる
- 前回作ったアプリで 「公開したら、誰に使ってもらいたいか」 を1人イメージしておく
たとえば…
- 「パートの鈴木さんに、散布前に自分で計算してもらいたい」
- 「JAの営農指導員に見せて感想を聞きたい」
- 「家族に自慢したい」（これも立派なモチベーション！）
📐 シリーズ全体ロードマップ
| 回 | テーマ | レベル | 状態 |
|---|---|---|---|
| 第1回 | AI Studio チャットでコード生成 | 入門 | ✅ 公開済 |
| 第2回 | AI Studio Buildでワンクリック公開 | 初級 | ✅ 公開済 |
| 第3回 | Antigravityで本格アプリを作る | 中級 | ✅ 公開済 |
| 第4回（今回） | Antigravityで作ったアプリをWeb公開 | 中級〜上級 | ✅ 公開済 |
まとめ
- 前回作ったアプリを GitHub（保管庫）+ Vercel（直売所） の組み合わせで世界に公開
- GitHubアカウント作成 → GitHub連携 → コードをアップロード → VercelでDeploy → URL発行 の5ステップ
- AntigravityならGitHub連携もアップロードも 「AIに頼むだけ」
- 更新は
git pushするだけで 自動再公開 - Buildモードは「手軽さ」、Antigravity + Vercelは「本格さと継続改善」が強み
- 公開 ＝ 誰でもアクセスできるので、個人情報・機密データは入れない
- まずはGitHubアカウントを作るところから！
💬読者の声をお聞かせください
この記事に関するご質問・ご感想をお待ちしています。
