このレッスンの一行サマリ
ローカルから世界まで、最短2コマンド。APIキーを漏らさない型 だけ最初に1つ覚えれば、あとはおまけ。
このレッスンで終わる頃には
- 「公開する」が、自分のURLを誰かに送れる状態だと分かる
- GitHubにコードを上げる最低限の流れが頭に入ってる
- Vercelで1コマンド公開できる
- APIキーを漏らさない型 を1つ覚えている
「ローカルで動いた」で終わらせない
Lesson 03でMVPが動いたあなた。
ターミナルや自分のブラウザで動くのは、まだ 自分のパソコンの中だけ の話です。
ここから一歩進んで、
URLを誰かに送ったら、その人が触れる状態。
これが「公開する」です。たった2サービスで、最短10分でできます。
公開に使う2つのサービス
| サービス | 役割 | 料金 |
|---|---|---|
| GitHub | コードの保管庫＋共有先 | 無料 |
| Vercel | コードを動くサイトとして公開する場所 | 個人利用は無料 |
GitHubが「コードの倉庫」、Vercelが「倉庫から取り出して動くサイトに変換する工場」、というイメージです。
ローカル（自分のPC）
│
│ git push
▼
GitHub（コードの倉庫）
│
│ vercel deploy
▼
Vercel（公開先）
│
▼
世界（誰でもアクセスできるURL）
ローカルから世界までの4ステップ
ローカル
自分のPC＝家
GitHub
コードの倉庫
Vercel
公開する工場
世界
誰でも開けるURL
GitHub：コードの倉庫を作る
Vibe Coding 入門編 Lesson 6「GitHubに上げる」でも触れたGitHub、応用編では CLI から1コマンドで作る やり方を紹介します。
前提：gh コマンド
gh は GitHub公式のCLIです。インストール済みでなければ：
brew install gh
gh auth login
gh auth login でブラウザが立ち上がって、GitHubアカウントと連携します。1回やれば後は使い回せます。
リポジトリを作る
プロジェクトのフォルダで、こう打つだけ：
gh repo create my-pubmed-tool --private --source=. --push
これで：
- GitHubに
my-pubmed-toolという プライベート リポジトリが作られる - ローカルのコードがそこにアップロードされる
--private を --public に変えると、誰でも見れる公開リポジトリになります。最初は --private で大丈夫。
絶対やる：APIキーを漏らさない型
ここがいちばん大事なので、太字にします。
公開リポジトリでも、私的リポジトリでも、APIキー・シークレットキー・パスワード は絶対にコードに混ぜないでください。
正しい型 vs 危ない型
APIキーの扱い、何が違うか
- APIキーの場所：コードに直書き
- GitHubアップ：一緒に公開される
- 共有時：キーごと送られる
- 漏洩したら：リポジトリ履歴に永久保存
- APIキーの場所：
.envファイル - GitHubアップ：
.gitignoreで除外 - 共有時：キー無しで安全に共有
- 漏洩したら：そもそも上がらない
# プロジェクトルートに .env ファイルを作る
echo "NCBI_API_KEY=長い文字列" > .env
# .gitignore に .env を追加（既存に追記）
echo ".env" >> .gitignore
これだけで、.env ファイルはGitHubに上がらなくなります。
ただし、過去に1回でも .env をcommitしてたら、リポジトリ履歴に残ってます。漏れたものとして対処してください（参考：AMPLメモリの reference_api_key_rotation.md）。
Claude Code に確認させるコツ
不安なときは、Claude Code にこう聞きます。
このリポジトリ、APIキーが入ってないか、
.gitignoreを見て、コミット履歴も含めてチェックしてください。
これで、自分でgrepするより確実に見つけてくれます。
Vercel：1コマンドで公開
GitHubに上げたら、次はVercel。
インストール（初回のみ）
npm install -g vercel
vercel login
ブラウザが立ち上がって、メールアドレス（GitHubでもOK）でログインします。
公開コマンド
プロジェクトのフォルダで：
vercel deploy --prod
これだけ。
初回は対話形式でいくつか聞かれます（プロジェクト名・フレームワーク・ビルドコマンドなど）。Next.js なら自動検出されるので 全部Enterで進めて大丈夫 です。
完了すると、こんな応答が返ります。
Vercel CLI 32.x
🔍 Inspect: https://vercel.com/your-team/my-pubmed-tool/dpl_abc123 [3s] ✅ Production: https://my-pubmed-tool-abc123.vercel.app [50s] Deployed.
このURLが、世界に公開されたあなたのアプリです。
注意：環境変数の登録
.env の中身（APIキーなど）は、ローカルでは使えてもVercel側には自動で伝わりません。
Vercel ダッシュボードの Settings → Environment Variables で、.env と同じキー・値を登録してください。
または、CLIから：
vercel env add NCBI_API_KEY
で対話的に入れられます。
カスタムドメイン（任意・お金かかる）
xxx.vercel.app のままでも問題ないですが、自分のドメインがほしければ：
- Vercel Domains で
.comドメイン購入（年$10前後） - 購入後ワンクリックでプロジェクトに紐付け
ただし、最初の数本は vercel.app のままで十分。Lesson 09で「広げる」段階に来てから検討すれば良いです。
公開後にやる3つだけ
GA4導入
誰が・何ページ見てるか測る
Search Console
Google検索に拾われる
OGP画像
X/LINEで貼った時にサムネが出る
公開後にやる3つだけ
公開して放置せず、最低限これだけ。
1. Google Analytics（GA4）
誰が、何ページ見てるか、を測る。
- Google Analytics でプロパティ作成
- 計測IDを取得
- Next.js なら
<Script>タグで<head>に挿入
これも Claude Code に「GA4を入れて」と頼めば自動でやってくれます。
2. Google Search Console
Google検索に拾ってもらう。
- Search Console でプロパティ追加
- インデックス申請
- サイトマップ送信
これも Claude Code に頼んで、sitemap.xml を自動生成してもらえます。
3. OGP画像
X や LINE で URL を貼ったとき、サムネが出る設定。
- 1200×630 の画像を作る
- Next.js なら
<Head>に<meta property="og:image" content="..." />を追加
おかもん先生のAMPLでも、ロゴ＋見出し＋背景という最小構成のOGP画像を全ページで使い回しています。1枚作れば全ページに効く投資なので、最後に1回だけやればOKです。
完成したら、誰かに送る
URLができたら、家族・同僚・SNSの誰かに送ってください。
「ちょっと作ったから使ってみて」と。
これが 第一の関門の突破 です。1人でも反応をくれたら、Lesson 06〜08のフィードバックループに入る素材ができます。
逆に「作ったけど誰にも見せてない」状態のまま3ヶ月経つと、改善のヒントが0で、モチベーションも消えます。
公開した瞬間に、ソロ開発が「自分だけのプロジェクト」から「誰かに届くもの」に変わります。
今日の宿題
Lesson 03で動かしたMVPを、以下の手順で公開してください。
gh repo create [プロジェクト名] --private --source=. --push.envを.gitignoreに追加vercel deploy --prod- URL ができたら、家族か親しい同僚1人にだけ送る
公開URLができたら、Lesson 06（分析）の素材になります。
次のレッスン予告
公開すると、誰がどれくらい使ってるかが気になります。
次の Lesson 06 は アクセスをMCPで自動で見る です。GAとSearch Consoleのデータを、Claude Codeに分析させる仕組みを作ります。
完成したらお知らせします。
明日のアクション
今日の宿題は4ステップ
Lesson 03で動かしたMVPを、世界に出してください。
gh repo create [プロジェクト名] --private --source=. --push.envを.gitignoreに追加（APIキー保護）vercel deploy --prod- 完成したURLを、家族か親しい同僚1人にだけ送る
URLができたら、それがLesson 06（分析）の素材になります。
うまくいかなくても大丈夫。エラーメッセージをClaude Codeに見せて「これ直して」と言うだけで、ほぼ解決します。