Vercelとは？コードを置くだけで公開される仕組みをわかりやすく解説

手元で公開用ファイルを作れることを確かめる

連携する前に、自分のパソコンで一度、公開用ファイルへの変換(ビルド)を実行しておきます。

迷いやすいところ: AIに開発を頼んでいる場合は「ビルドして」と指示すれば実行してもらえます。手元で失敗するものは、Vercel側でも失敗します。先に確かめておくと、原因がコードなのか設定なのかを切り分けられます。

アカウントを作る

GitHubのアカウントでログインできます。

リポジトリと連携する

公開したいリポジトリを選びます。

迷いやすいところ: 連携時に「すべてのリポジトリ」か「選んだものだけ」かを聞かれます。必要なものだけを選ぶ方が安全です。

ビルドの設定を確認する

フレームワーク(アプリのひな形)に応じて設定が自動で提案されます。フレームワーク名の欄が空欄や「Other」になっていないかを見ます。

迷いやすいところ: 空欄のときは、自分のアプリのひな形の名前(AIに「このアプリのフレームワークは何?」と聞けば分かります)を選び直します。判別されないまま進めると、ビルドは通るのに何も表示されない状態になります。

環境変数を登録する

APIキーなどの秘密の値は、コードと一緒には送らず、手元では「環境変数ファイル」という専用のファイルに分けて書いておきます。このファイルはGitHubに送らない設定にするため、Vercel側には届きません。同じ値を、Vercelの管理画面に自分で登録し直します。

迷いやすいところ: 見落としやすい手順です。手元では動くのに公開すると動かない場合、まずここを疑います。

公開して、実際に開く

発行されたURLを開き、表示とページ移動を確認します。

迷いやすいところ: トップだけ見て終わらせないでください。他のページで404になる設定ミスは、そこでしか気づけません。