【初心者向け】Vercelって何？GitHubと連携してWebアプリを公開する手順を解説

作ったWebアプリ、どうやって公開するの？

コードが完成した。GitHubにもアップできた。次はいよいよインターネットに公開——でも、どうやって公開すればいいの？ というのが次の壁です。

そこで登場するのが Vercel です。

個人開発でWebアプリを公開するとき、Vercelはほぼ定番のサービスといっていいほど使われています。この記事では、Vercelとは何か・なぜ使われているのか・料金・実際の公開手順までをわかりやすく解説します。

一言で言うと、「WebアプリをインターネットにUPして、世界中からアクセスできるようにしてくれるサービス」です。

こういったサービスを「ホスティングサービス」と呼びます。レンタルサーバーと似たようなものですが、VercelはGitHubと連携することで、アップロードの手間がほぼゼロになるのが最大の特徴です。

特に「git push したら自動でサイトも更新される」という仕組みは、一度体験するとやみつきになります。コードを直してpushするだけで、数十秒後にはサイトに反映されています。

前提として、GitHubにコードがアップされている状態からスタートします。まだの方は前回の記事「GitHubって何？コードのアップロード方法を解説」を先にご覧ください。

vercel.com にアクセスして、「Sign Up」をクリック。

「Continue with GitHub」 を選んでGitHubアカウントでログインするのが一番簡単です。GitHubと連携した状態でアカウントが作られます。

ログイン後のダッシュボードで「Add New Project」をクリック。

GitHubのリポジトリ一覧が表示されるので、公開したいリポジトリを選んで「Import」を押します。

設定画面が表示されますが、Next.jsのプロジェクトであれば基本的に何も変えなくてOKです。そのまま「Deploy」ボタンを押してください。

しばらく待つと（だいたい1〜2分）、ビルドが完了してURLが発行されます。

https://プロジェクト名.vercel.app

このURLにアクセスすると、自分のWebアプリが世界中から見られる状態になっています。

一度Vercelと連携してしまえば、次回以降の更新はとても簡単です。

git add .
git commit -m "デザインを修正"
git push

これだけで、Vercelが自動的に変更を検知してビルド・公開まで行ってくれます。FTPでファイルをアップしたり、サーバーにSSHで入ったりする必要は一切ありません。

Vercelには3つのプランがあります。個人開発ならまず無料プランで十分です。

個人の学習・ポートフォリオ用途なら無料枠で十分です。主な制限は以下のとおりです。

商用利用は禁止

これが一番重要です。Hobbyプランは個人・非商用のみが対象で、Vercelの利用規約で明示されています。

今回作った Money Counter のような個人ツールであれば、Hobbyプランで問題ありません。

上限を超えると止まる

Proプランは超過分を従量課金で継続利用できますが、Hobbyプランは上限に達した時点でその機能が使えなくなります。翌月リセットされるまで待つしかないので、急にアクセスが増えた場合は注意が必要です。

ログの保持が1時間

エラーログが1時間で消えます。不具合が起きたときはすぐに確認しないとログが消えてしまうので注意してください。

個人の学習・ポートフォリオ目的であれば、まず無料プランで始めてOKです。 商用利用が発生したタイミングでProに切り替えるという判断で問題ありません。