Vercelとは？Webサイトをデプロイする方法を初心者向けに実践解説

Webサイトを公開するためのサーバーを自分で構築するには、サーバーの設定や運用、デプロイの仕組みなど、さまざまな知識が必要です。
そこで利用できるのが、WebサイトやWebアプリケーションのデプロイに対応したクラウドプラットフォーム「Vercel」です。

本記事では、Vercelの基本的な特徴を紹介した上で、GitHubと連携してWebサイトをデプロイし、コードの変更が自動で反映されるまでの手順を、実際の画面とあわせて解説します。
あわせて、無料プラン（Hobby）でできることや料金、独自ドメイン・環境変数の設定方法、NetlifyやAWS Amplifyとの違いも紹介します。

なお、料金や管理画面の情報は2026年10月時点のものです。

Vercelとは

Webサイト・Webアプリを公開できるクラウドプラットフォーム

Vercel（読み方：ヴァーセル）は、WebサイトやWebアプリケーションを開発・公開するためのクラウドプラットフォームです。
ReactをベースとしたフレームワークであるNext.jsの開発元が提供しているため、Next.jsで作成したアプリケーションを簡単にデプロイできることが特徴です。
ただし、Next.js専用ではなく、SvelteKitやNuxt、Astro、Viteなど多くのフレームワークに対応しています。

Vercelでは、GitHubなどのGitリポジトリにあるプロジェクトをインポートし、必要な設定を行うことでWeb上に公開できます。
従来のように、サーバーへファイルを手動でアップロードしたり、Webサーバーを個別に構築したりする必要がないため、Webアプリケーションの開発から公開までを効率化できます。

さらに、Gitリポジトリと連携することで、コードを変更してプッシュするたびにデプロイを自動実行することもできます。

Vercelでできること

Vercelでは、WebサイトやWebアプリケーションの公開だけでなく、開発や運用を効率化するためのさまざまな機能を利用できます。
具体的な利用ケースには次のようなものがあります。

• Webサイト・Webアプリケーションの公開：企業サイトやLP、ポートフォリオ、Todoアプリや予約システムなどを公開する
• Gitリポジトリとの連携：GitHubなどに保存したコードを、Gitで管理しながらVercelへデプロイする
• 自動デプロイ・プレビューデプロイ：コードをプッシュしたときに自動でWebサイトを更新したり、本番公開前に動作を確認したりする
• 独自ドメインの利用：Webサービスを独自ドメインで公開する
• 環境変数の利用：APIキーやデータベースの接続情報をソースコードから分離し、本番環境と開発環境で使い分ける

Vercelのメリット・デメリット

Vercelを使うかどうか判断するために、主なメリットとデメリットを整理しておきましょう。

【メリット】

• サーバーの構築・管理が不要：画面の案内に従うだけで、Webサイトを公開できる
• 更新の手間が少ない：GitHubにプッシュするだけで自動的にデプロイされる
• 本番公開前に確認できる：変更ごとにプレビュー用のURLが発行され、チーム内で共有できる
• Next.jsとの相性が良い：Next.jsの開発元が提供しており、Next.jsの機能をそのまま活かせる
• 無料で始められる：Hobbyプランでも、独自ドメインやHTTPSまで利用できる

【デメリット・注意点】

• 無料プランは商用利用できない：広告の掲載や受託案件などで使う場合は、Proプラン以上が必要になる
• 有料プランは従量課金がある：Proプランは利用クレジットを超えると従量課金になるため、アクセスが急増すると料金が増える
• Functionsの初期リージョンが米国：Vercel Functionsは初期設定で米国（ワシントンD.C.）で実行されるため、日本国内のデータベースに接続する場合などは、プロジェクト設定でリージョンの変更を検討する
• 長時間の処理には向かない：Functionsの実行時間には上限がある（Hobbyプランは最大300秒）

ポートフォリオや個人開発のアプリ、Next.jsで作ったWebアプリを手軽に公開したい場合には、Vercelは特に向いています。
一方で、長時間かかる処理を実行したい場合や、AWSなど特定のクラウドのサービスを中心にシステムを組みたい場合は、他のサービスもあわせて検討すると良いでしょう。

【実践】VercelでWebサイトをデプロイする

ここからは、実際にVercelを使ってWebサイトを公開してみましょう。
本記事では、Vercelが用意しているテンプレート「Next.js Boilerplate」からプロジェクトを作成します。
テンプレートを使うと、GitHubにリポジトリが自動で作成され、そのリポジトリとVercelが連携された状態でデプロイされます。

全体の流れは次のとおりです。

1. GitHubアカウントでVercelに登録する
2. テンプレートからプロジェクトを作成し、デプロイする
3. 公開URLにアクセスして表示を確認する
4. コードを変更してGitHubへプッシュし、自動デプロイを確認する

GitHubと連携すると、上の図のように、プッシュしたブランチに応じて本番環境（Production）またはプレビュー環境（Preview）へ自動的にデプロイされます。

手元にあるプロジェクトを公開したい場合は、手順の後半にある「既存のGitHubリポジトリをインポートする場合」「Vercel CLIでデプロイする場合」を、うまくデプロイできない場合は「デプロイできないときの確認ポイント」を参考にしてください。

事前準備：GitHubアカウントを用意する

Vercelを利用する際は、公式サイトでアカウントを作成する必要があります。
作成方法はさまざまですが、今回はGitHubと連携して使うため、GitHubアカウントを利用してVercelのアカウントを作成します。

GitHubへの登録がまだ済んでいない場合は、先にGitHubアカウントの作成を済ませておきましょう。

▼こちらもチェック▼

【画像付き】GitHubの使い方｜設定・基本操作 ▶

GitHubアカウントでVercelに登録する

Vercelのサインアップページを開き、「Continue with GitHub」を選択します。

GitHubへのログインを済ませると、以下の画面が表示されるので、「Authorize」を押してアカウントを連携しましょう。
連携後の初期設定が完了すると、そのままVercelにログインします。

GitHubやその他サービスとの連携状態は、アカウント設定ページの「Authentication」から確認できます。

テンプレートからプロジェクトを作成する

GitHubとの連携が完了したら、プロジェクトの作成画面に移動しましょう。
Home画面のProjectsメニューから「Add New」→「Project」と進みます（vercel.com/newに直接アクセスしても同じ画面を開けます）。

画面右側のテンプレート一覧から「Next.js Boilerplate」を選択すると、Next.jsを使用したテンプレートサイトを作成できます。

この画面では、次の項目を確認します。

• Git Scope：リポジトリを作成するGitHubアカウント（連携したアカウントを選択）
• Private Repository Name：作成されるリポジトリの名前（初期値は「nextjs-boilerplate」）
• Vercel Team：プロジェクトを作成するVercelのチーム（無料プランの場合は「Hobby」と表示されます）

画面に「Create a Git repository to easily update your project after deploying it.」とあるとおり、テンプレートを使う場合は、テンプレートのコードを複製したリポジトリが、自分のGitHubアカウントに非公開（Private）リポジトリとして作成されます。
以降は、このリポジトリへプッシュするたびに、自動でデプロイが実行されます。

デプロイを実行する

設定を確認したら「Create」をクリックします。
リポジトリが作成されてデプロイが実行され、正常に完了すると「Congratulations!」と表示されます。

デプロイ中はビルドログを確認できるため、処理が正常に進んでいるかを画面上から確認できます。
もしビルド中にエラーが発生した場合は、プロジェクトの「Deployments」からエラーになったデプロイを選択し、ビルドログに表示されたエラー内容を確認して、ソースコードやプロジェクト設定を修正します。
詳しい確認方法は、ビルドエラーのトラブルシューティング（Vercel公式ドキュメント）を参考にしてください。

公開URLへアクセスする

デプロイが完了すると、Vercelから「プロジェクト名.vercel.app」のような公開用のURLが発行されます。
完了画面のプレビューをクリックするか、プロジェクトの画面に表示されるURLへWebブラウザからアクセスすると、デプロイしたWebサイトを確認できます。

また、Vercelではプロジェクトごとにデプロイ履歴を確認できます。
プロジェクトの「Deployments」を開くと、デプロイの元になったコミットやブランチ、状態が一覧で表示されます。
状態が「Ready」になっていればデプロイは成功、「Error」になっている場合は失敗しています。

コードを変更して自動デプロイを確認する

最後に、GitHub上のコードを変更して、自動デプロイを確認してみましょう。
まずは、テンプレートから作成されたリポジトリを、手元のパソコンにクローンします。

git clone https://github.com/<GitHubのユーザー名>/nextjs-boilerplate.git
cd nextjs-boilerplate

git clone https://github.com/<GitHubのユーザー名>/nextjs-boilerplate.git
cd nextjs-boilerplate

「<GitHubのユーザー名>」の部分は、ご自身のGitHubのユーザー名に置き換えてください。
リポジトリ名を変更した場合は、「nextjs-boilerplate」の部分も変更後の名前に置き換えます。

次に、Webページに表示されている文章を変更します。
app/page.tsxを開き、h1タグ内の「To get started, edit the page.tsx file.」を「Hello World!」に書き換えて保存しましょう。

<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
  Hello World!
</h1>

<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
  Hello World!
</h1>

変更内容をコミットして、GitHubへプッシュします。

git add app/page.tsx
git commit -m "Update page.tsx"
git push origin main

git add app/page.tsx
git commit -m "Update page.tsx"
git push origin main

なお、Gitの操作に慣れていない場合は、GitHubのリポジトリ画面でapp/page.tsxを開き、ブラウザ上で直接編集してコミットしても構いません。

VercelとGitHubを連携している場合、変更を検知すると新しいデプロイが自動的に実行されます。
Deploymentsの一覧に、プッシュしたコミット（ここでは「Update page.tsx」）のデプロイが追加されていることを確認しましょう。

デプロイが正常に完了すれば、公開されているWebサイトにも変更内容が反映されます。

今回のように本番ブランチ（main）へプッシュすると本番環境（Production）が更新され、main以外のブランチへプッシュした場合は、本番とは別URLのプレビュー環境（Preview）が作成されます。
詳しい仕組みは、Gitリポジトリのデプロイ（Vercel公式ドキュメント）で確認できます。

動作を確認する際は、今開いているURLが本番環境とプレビュー環境のどちらなのかを意識しましょう。
プレビュー環境のURLは本番とは別に発行されるため、「修正したのに本番に反映されていない」と思ったら、Deploymentsの一覧で対象のデプロイがProductionかPreviewかを確認します。
また、プロジェクトのDeployment Protectionの設定によっては、プレビュー環境のURLを開くとVercelへのログインを求められます。チーム外の人にURLを共有する際は注意しましょう。

既存のGitHubリポジトリをインポートする場合

すでにGitHubにあるリポジトリを公開する場合は、プロジェクト作成画面の「Import Git Repository」からリポジトリを選択してインポートします。
リポジトリを選ぶと、次のような設定画面が表示されます。

• Project Name：Vercel上のプロジェクト名（公開URLにも使われます）
• Root Directory：アプリケーションが置かれているフォルダ（通常は「./」のまま）
• Application Preset：使用しているフレームワーク（自動で検出されます）
• Build and Output Settings：ビルドコマンドや出力先の設定（通常は変更不要）
• Environment Variables：デプロイ時に使う環境変数

設定を確認して「Deploy」をクリックすると、デプロイが実行されます。
以降の公開URLの確認や自動デプロイの流れは、テンプレートを使った場合と同じです。

なお、無料プランでは、GitHubの組織（Organization）が所有する非公開リポジトリはデプロイできません。
個人アカウントのリポジトリを使うか、リポジトリを公開する、またはProプランを検討しましょう。

Vercel CLIでデプロイする場合

GitHubと連携せずに、手元のプロジェクトをコマンドから直接デプロイすることもできます。
その場合は、Vercelが提供するコマンドラインツール「Vercel CLI」を使います（Node.js 18以上が必要です）。
ターミナルでプロジェクトのフォルダに移動し、次のコマンドを実行しましょう。

# Vercel CLIをインストール
npm i -g vercel

# Vercelにログイン
vercel login

# プレビュー環境にデプロイ
vercel

# 本番環境にデプロイ
vercel --prod

# Vercel CLIをインストール
npm i -g vercel

# Vercelにログイン
vercel login

# プレビュー環境にデプロイ
vercel

# 本番環境にデプロイ
vercel --prod

初めて「vercel」を実行すると、プロジェクトの設定に関する質問が表示されるので、内容を確認しながら回答します。
デプロイが完了すると、ターミナルにデプロイ先のURLが表示されます。
「vercel」はプレビュー環境へ、「vercel –prod」は本番環境へデプロイするコマンドです（新しいプロジェクトの最初のデプロイは、「–prod」を付けなくても本番環境になります）。

Gitと連携した自動デプロイが基本ですが、ちょっとした動作確認や、GitHubを使わずにデプロイしたい場合に便利です。

デプロイできないときの確認ポイント

デプロイが失敗した場合は、まずプロジェクトの「Deployments」から失敗したデプロイを開き、ビルドログに表示されたエラーメッセージを確認しましょう。
初心者がつまずきやすい原因と確認ポイントは次のとおりです。

また、プッシュする前に手元のパソコンでビルドコマンド（Next.jsの場合はnpm run build）を実行しておくと、コードが原因のエラーを事前に見つけられます。
ビルド設定の詳細は、ビルドの設定（Vercel公式ドキュメント）で確認できます。

Vercelの料金・無料プラン（Hobby）でできること

Hobby・Pro・Enterpriseの料金プラン比較

Vercelには現在、「Hobby」「Pro」「Enterprise」の3つのプランがあります。
2026年10月9日時点のVercelの料金ページと公式ドキュメントで確認できた内容は次のとおりです。

Proプランは「1ユーザーあたり月額20ドル」と紹介されることもありますが、正確には月額20ドルのプラットフォーム料金に、20ドル分の利用クレジットが含まれる仕組みです。
クレジットを使い切ると、超過分はデータ転送量や関数の実行時間などに応じて従量課金されます。
料金はすべて米ドル表記で、税金は別途かかります（詳しくはProプランの公式ドキュメントを参照してください）。

無料プラン（Hobby）でできること・できないこと

GitリポジトリをインポートしてWebサイトを公開したり、コードの変更に合わせて自動でデプロイしたりといった、基本的なデプロイ機能は無料プランでも利用可能です。
プレビューデプロイや独自ドメイン、環境変数、Vercel Functions、Web Analyticsも、上限の範囲内で利用できます。
また、Vercelが提供するグローバルな配信ネットワーク（CDN）やHTTPSも利用できます。

一方で、無料プランでは各種機能に利用上限があります。
Hobbyプランの公式ドキュメントで確認できた主な上限は次のとおりです（2026年10月9日時点）。

個人のポートフォリオや学習用のWebサイトであれば、多くの場合はこの範囲内で利用できます。
ただし、無料枠の上限は変更される可能性があるため、実際に利用する際は公式の料金ページで最新の条件を確認することをおすすめします。

無料枠を超えた場合と商用利用の注意点

Hobbyプランでは、上限を超えても追加料金が請求されることはありませんが、追加の利用枠を購入することもできません。
多くの場合、上限を超えた機能は30日が経過するまで再び利用できなくなります（Web Analyticsのように、より短い期間で再開できる機能もあります）。
そのため、サイトへのアクセス数が多い場合などは、Webサイトが利用できない期間が発生する可能性がある点に注意しましょう。

また、Hobbyは個人・非商用利用向けのプランです。
Vercelのフェアユースガイドラインでは、次のような利用が商用利用の例として挙げられています。

• サイトの訪問者から支払いを受け付ける
• 商品やサービスの販売を宣伝する
• サイトの制作・更新・ホスティングの対価として報酬を受け取る
• アフィリエイトリンクを主な目的としたサイトを運営する
• Google AdSenseなどの広告を掲載する

商用サービスや業務用途で利用する場合は、ProまたはEnterpriseプランを選択する必要があります。
なお、Proプランでは利用クレジットを超えると従量課金に切り替わります。新規利用者には、利用額が1請求期間あたり200ドルに達したときに通知する設定が初期状態で有効になっていますが、想定外の請求を防ぐためにも、使用量のアラート設定を確認しておきましょう。

独自ドメインを設定する方法

Domainsから独自ドメインを追加する

Vercelでは、すべてのデプロイに「vercel.app」のURLが発行されますが、独自ドメインを設定して公開することもできます。
独自ドメインは無料プランでも利用可能です。

独自ドメインを設定する際は、Projectsから対象プロジェクトを開き、サイドバーの「Domains」から設定を行います。

すでにドメインを取得している場合は、「Add Existing」からドメイン名を入力して設定を進めます。
また、「Buy」を押すと、ドメインを検索してVercel上で購入することもできます。

検索結果に表示される「Free with Pro」は、有料のProプランのチームが対象のTLD（.app、.devなど）のドメインを1つ、初年度無料で取得できる特典です。
2年目以降は通常料金で更新され、Proプランの無料トライアル中は対象外となります。

DNSレコードを設定する

他のサービスで取得したドメインをVercelで利用するには、ドメインの名前解決をVercelへ向けるためのDNS設定が必要です。
ドメインを追加すると、Vercelの画面に設定すべきレコードが表示されるので、その値をドメイン管理サービス側のDNS設定画面に登録します。

• example.comのようなドメイン（Apexドメイン）：Aレコードを設定する
• www.example.comのようなサブドメイン：CNAMEレコードを設定する
• ネームサーバーをVercelに変更する方法：Vercelのネームサーバーをドメイン管理サービスに登録する

設定する値はプロジェクトごとに異なる場合があるため、必ずVercelの画面に表示された値を使用してください。
また、ネームサーバーを変更する場合は、メールなどで使用している既存のDNSレコードをVercel側に移しておく必要があります。
レコードの設定画面はドメイン管理サービスによって異なるため、各サービスのドキュメントもあわせて参考にしてください。

設定が反映され、Vercelで確認が取れると、Domains画面のステータスが「Valid Configuration」に変わり、独自ドメインからVercel上のWebサイトへアクセスできるようになります。
なお、DNSの変更が反映されるまでには時間がかかる場合があります。
詳しい手順は、独自ドメインの追加と設定（Vercel公式ドキュメント）を確認してください。

環境変数を設定する方法

Environment Variablesから環境変数を登録する

環境変数とは、APIキーやデータベースの接続情報など、ソースコードとは別に管理する設定値のことです。
Vercelで環境変数を設定する際は、対象プロジェクトのサイドバーから「Environment Variables」を開きます。

「Add Environment Variable」を押すと、追加画面を開けます。
「Key」に変数名、「Value」に値を入力し、「Save」で保存します。
「Add new variable」で一度に複数の変数を追加できるほか、「Import .env」から.envファイルの内容をまとめて読み込むことも可能です。

「Type」では、変数の種類を選択します。
APIキーやパスワードなどの機密情報は、保存後に値を表示できなくなる「Secret」を選びましょう。
機密性のない設定値は、保存後もメンバーが値を確認できる「Config」を選択します。

Production・Preview・Developmentで環境を使い分ける

追加した環境変数は、「Environments」で利用する環境を指定できます。

それぞれの環境の違いは次のとおりです。

たとえば、本番環境では本番用のAPIキーを、プレビュー環境ではテスト用のAPIキーを使うといった使い分けができます。
なお、環境変数の変更は、すでに作成済みのデプロイには反映されず、新しいデプロイから適用されます。
変更後は再デプロイを行いましょう。詳しくは環境変数の公式ドキュメントを参照してください。

Vercelの主要機能

Vercelには、Webサイトを公開するための基本的なデプロイ機能だけでなく、Webアプリケーションの開発・運用を効率化するための機能も用意されています。
ここでは、代表的な機能を紹介します。

プレビューデプロイ

Vercelの特徴的な機能の一つが、プレビューデプロイです。
GitブランチやPull Requestごとに個別のデプロイが作成され、本番環境とは別のURLで動作を確認できます。

この仕組みにより、本番環境へ変更を反映する前に、チーム内でWebサイトを確認したり、レビューを受けたりできます。
Pull Requestの内容に問題がなければ、mainブランチにマージすることで本番環境へ反映されます。

Vercel Functions

Vercel Functionsは、APIやサーバー側の処理をVercel上で実行するための機能です。
サーバーを自分で管理する必要はなく、アクセス数に応じて自動でスケールします。
Vercel Functionsを利用すると、たとえば次のような処理をWebアプリケーションに追加できます。

• APIエンドポイントの作成
• 外部APIとの通信
• フォームから送信されたデータの処理
• データベースとの連携
• サーバー側での認証処理

Node.jsやPython、Goなど複数のランタイムに対応しており、Next.jsの場合はRoute Handlerなどで書いたサーバー側の処理が、デプロイ時に自動でVercel Functionsとして動作します。

Web Analytics

Vercelでは、公開したWebサイトの利用状況を確認するための分析機能も提供されています。
その一つがVercel Web Analyticsです。

Web Analyticsでは、訪問者数やページビュー、よく見られているページ、流入元、訪問者の国・OS・ブラウザなどを、プロジェクトのダッシュボードから確認できます。
Cookieを使わずに訪問者を識別する仕組みのため、プライバシーに配慮しながらデータを収集できるのも特徴です。
すべてのプランで利用でき、Hobbyプランでは月5万イベントまで利用可能です。

v0（AIによるアプリ・UI生成）

Vercelは、AIを利用してWebサイトやWebアプリケーションを生成するサービス「v0」も提供しています。

v0では、作りたいUIや機能を自然言語で説明したり、画像などを入力したりすることで、WebページのUIやコードを生成できます。
生成された結果を確認しながら修正を指示できるため、デザインやフロントエンドの実装を始める際のプロトタイプ作成にも利用できます。
作成したアプリはそのままVercelにデプロイでき、Vercelのプロジェクト作成画面にもv0への入力欄が用意されています。

VercelとNext.jsの関係

Next.jsは、Reactをベースに開発されたWebアプリケーション向けのフレームワークです。
Vercelが作成済みのWebサイトやアプリケーションを公開・運用するためのプラットフォームであるのに対し、Next.jsはアプリケーション開発そのものを効率的に進めるためのツールです。

Next.jsはVercel社が開発しているため、VercelはNext.jsとの連携が特に充実しています。
そのため、Next.jsで作成したアプリケーションを公開する場合、複雑なサーバー設定を行わずにデプロイしやすいことがVercelの大きな特徴です。
Next.jsが持つサーバー側の処理や画像最適化などの機能と、Vercelのホスティング環境を組み合わせることで、Next.jsの機能を活用したWebアプリケーションを構築できます。

なお、Next.jsはVercel専用のフレームワークではありません。
Next.js公式ドキュメントのデプロイ方法にあるとおり、Node.jsが動くサーバーやDockerコンテナ、静的なファイルとして書き出す方法など、Vercel以外の環境にもデプロイできます。

▼こちらもチェック▼

Next.jsとは【入門】Reactとの違い、できること、メリット ▶

VercelとNetlify・AWS Amplifyの違い

Vercelと同じように、Gitリポジトリと連携してWebサイトを公開できるサービスには、NetlifyやAWS Amplifyなどがあります。
それぞれの特徴を簡単に比較すると、次のとおりです。

VercelとNetlifyの違い

Netlifyは、Vercelと同じくWebサイトやWebアプリケーションの公開に利用されるプラットフォームです。
Gitリポジトリとの連携や自動デプロイ、プレビュー環境、サーバー側の処理など、Vercelと似た機能を多く備えています。

VercelはNext.jsとの連携が特に強いため、Next.jsの機能を利用したWebアプリケーションを構築する場合に、設定やデプロイをシンプルにしやすくなります。
反対に、Next.jsに限定せずさまざまなフレームワークを利用する場合は、機能や料金を比較した上で、より使いやすい方を選択すると良いでしょう。

VercelとAWS Amplifyの違い

AWS Amplifyは、Amazon Web Services（AWS）が提供するWeb・モバイルアプリケーション向けの開発プラットフォームです。
Vercelと同じく、Gitリポジトリからアプリケーションをデプロイできますが、両者の位置付けには違いがあります。

Vercelは、WebサイトやWebアプリケーションのデプロイ・ホスティングをシンプルに行いたい場合に適しています。
一方、AWS Amplifyは、AWSの各種サービスと組み合わせてアプリケーションを構築したい場合に利用しやすいサービスです。
そのため、単純にWebサイトを公開したい場合にはVercelのほうが始めやすく、AWSのサービスを組み合わせたシステムを構築したい場合にはAmplifyが適しています。

▼こちらもチェック▼

AWSとは【入門】基礎からわかりやすく解説 ▶

Vercelに関するよくある質問

Q. Vercelを利用するにはNext.jsが必要ですか？

A. 必要ありません。
VercelはNext.js専用のサービスではないため、ReactやVue、SvelteKitなどを利用したWebサイトや、HTML・CSS・JavaScriptだけで作成した静的なWebサイトも公開できます。

Q. Vercelを使う場合、サーバーを用意する必要はありますか？

A. 基本的には、自分でWebサーバーを構築する必要はありません。
デプロイやホスティングに必要な環境はVercelが提供します。
ただし、アプリケーションによっては、データベースなどVercelとは別に用意するサービスが必要になる場合があります。

Q. GitHubを使わないとVercelは利用できませんか？

A. GitHubは必須ではありません。
GitLabやBitbucketとの連携にも対応しているほか、本文の「Vercel CLIでデプロイする場合」で紹介したように、Vercel CLIを使って手元のプロジェクトをコマンドから直接デプロイすることもできます。

Q. Vercelでデータベースは使えますか？

A. 使えます。
Vercel上のWebアプリケーションから、外部のデータベースサービスへ接続できます。
また、Vercel MarketplaceからNeonやSupabaseなどのデータベースを追加すると、接続情報が環境変数としてプロジェクトに自動で設定されます。

▼こちらもチェック▼

Supabaseとは？できること・実際の使い方をエンジニア視点で解説 ▶

Q. 無料プランでも独自ドメインは使えますか？

A. 使えます。
Hobbyプランでも、1プロジェクトあたり50個までの独自ドメインを設定できます。
ただし、ドメイン自体の取得・更新費用は別途必要です。また、広告の掲載など商用利用にあたる場合は、Proプラン以上が必要になる点に注意しましょう。

まとめ

Vercelを利用することで、サーバーの構築やデプロイ作業にかかる負担を減らし、Webアプリケーションそのものの開発に集中しやすい環境を作れます。
GitHubと連携すれば、コードをプッシュするだけで自動的にWebサイトが更新されるため、公開後の修正もスムーズです。
独自ドメインや環境変数、プレビューデプロイなどにも対応しており、単純なWebサイトの公開だけでなく、継続的な開発・運用にも利用できます。

まずは無料のHobbyプランで、本記事の手順どおりにテンプレートをデプロイし、Vercelの基本的な仕組みを体験してみましょう。
商用サイトとして公開する場合は、Proプランへの切り替えを検討してください。