公開して共有する

この章でわかること: 作ってみるで完成したTODOアプリを、ネットに 公開してURLで顧客に触ってもらうところまで。提案で実際に使える形にします。

公開の全体像

手元のコード → GitHub(保管)→ Vercel(公開) という流れです。一度つないで おけば、以降は更新するたびに自動で公開版が新しくなります。

1. GitHub に上げる

   Claude Code に頼みます。

   このプロジェクトを GitHub の新しいリポジトリ(非公開)に上げて。

   ブラウザでの認証を求められたら、画面の案内に従ってサインインします。 完了後、GitHub の自分のリポジトリ一覧に新しいリポジトリが表示されていれば成功です。

2. Vercel にログインする

   vercel.com を開き、「Continue with GitHub」(GitHubで 続ける)でログインします(環境構築で作ったアカウント)。

3. リポジトリを取り込んで公開する

   Vercel で 「Add New…」→「Project」 を選びます。初回は GitHub との連携画面 (「Install」や「Configure GitHub App」)が出るので、対象のリポジトリ(または All repositories)へのアクセスを許可します。許可するとリポジトリが一覧に 出てくるので、Import → そのまま Deploy を押します(Next.js は自動認識)。

   ノート

   非公開リポジトリは、このアクセス許可をしないと一覧に出てきません。「自分の リポジトリが見つからない」ときは、許可の手順を見直してください。

4. 公開URLを確認する

   ビルドが終わると、https://〇〇.vercel.app のようなURLが発行されます。 スマホで開いて、タスクの追加・完了まで動くことを確認しましょう。これを誰かに渡せます。

5. (任意)限定共有する

   提案中のものを一般公開したくない場合は、関係者だけが見られるようにします。 Claude Code に「このサイトに簡単なパスワード(Basic認証)をかけて。IDと パスワードは安全に管理して、コードに直接書かないで」と頼みます。

   公開URL(本番)でも効かせるには

   パスワードを「環境変数」で管理する場合、手元だけでなく Vercel側の設定 (Settings → Environment Variables)にも同じ値を登録して再デプロイしないと、 公開URLでは有効になりません。「Vercelの公開URLでも有効にする手順を教えて」と Claude Code に頼めば、設定箇所まで案内してくれます。考え方と注意点は Basic認証を参照(今回の公開先は Vercel です)。

公開前の最低チェック

顧客に渡す前に、生成物の良し悪しの見分け方の観点で ひと通り触っておきましょう。今回は外部サービスや秘密情報を使っていないので 確認すべき鍵などは無いはずですが、APIキーなどの秘密情報が 画面側に出ていないか確認する癖をつけておくと、次から安全です。

更新は「直して push」だけ

公開後に「ここ直して」と Claude Code に頼み、変更をコミット&pushすれば、 Vercel が自動で公開版を更新します。商談後の修正もこの流れで素早く反映できます。

完成チェック

• 〇〇.vercel.app のURLでTODOアプリが開ける
• スマホでタスクの追加・完了ができる
• (必要なら)限定共有が設定できた

なぜ大事か

「作れる」だけでなく「公開して触ってもらえる」まで到達して、はじめて提案の 武器になります。ここまで来たら、あとは題材を変えて繰り返すだけ。商談の現場で、 顧客の要望をその場で形にできる準備が整いました。

—— おつかれさまでした。各章で学んだことを使って、ぜひ実際の提案で試してみてください。