Vercelとは

Vercelは、ウェブ開発者がウェブサイトやウェブアプリケーションを簡単にデプロイし、ホスティングするためのプラットフォームです。

GitHub、GitLab、Bitbucketなどのバージョン管理サービスと連携しています。そのため開発者がコードをこれらのリポジトリにプッシュすることで、Vercelは自動的にコードをビルドし、ウェブサイトやアプリケーションをデプロイします。このプロセスは、数クリックで設定することができ、継続的デプロイメントを実装することができます。

また、サーバーレス関数（API）をサポートしています。これにより、バックエンドのインフラストラクチャを自分で管理する必要がなくなります。開発者は必要な関数を簡単にデプロイし、スケーリングやインフラ管理の心配をすることなく、フロントエンドとバックエンドの両方の機能を実装することができます。

Vercelは、コンテンツデリバリーネットワーク（CDN）を利用して、世界中のユーザーに高速にコンテンツを配信します。これにより、ユーザーはどこにいても非常に高速なウェブ体験を享受できます。また、Vercelのインフラはスケーラブルで、高トラフィックにも対応可能しています。

Next.jsとの相性が非常に良く、静的サイト生成（SSG）やサーバーサイドレンダリング（SSR）を簡単に実装できます。また、他のフレームワークや静的サイトジェネレーターとも互換性があり、多様なプロジェクトに対応できます。

プランとしては、無料プランと有料プランを提供しています。無料プランでも基本的な機能を十分に利用できますが、有料プランでは追加のビルド時間や優先サポート、チームコラボレーション機能など、より多くの機能が利用可能です。

対応フレームワークについては、Vercelのホームページからお確かめください。

デプロイする手順

次に実際にデプロイする手順です。

それぞれ解説します。

ソースコードをGitHubにpushする

まずはデプロイしたいソースコードをGitHubにpushします。

環境変数についてはもちろん設定することができるため、誤っても .env などの環境変数を含むファイルはpushしないでください。また、機密情報は直接ソースコードに記述せず、環境変数として定義することを意識してください。

pushする手順については以下の記事で紹介しています。合わせてご覧ください

Vercelのアカウントを登録する

次にVercelのアカウントを登録します。

Vercel

上記Vercelのホームページから「Sign Up」を選択して、アカウントを登録します。プランはとりあえず無料である「hobby」プランを選択し、GitHubと連携を行ってください。アカウント登録が完了し、ダッシュボードが表示されれば完了です。

プロジェクトを作成する

プロジェクトを作成し、デプロイするまでの手順を紹介します。フローは以下の通りです。

それぞれ解説します

プロジェクトを立ち上げる

まずはVercel上でプロジェクトを作成します。

ダッシュボード右上にある「Add New」から新規プロジェクトを作成します。そして、ドロップダウンメニューから「Project」を選択します。

続いて「Import Git Repository」で、はじめのステップでpushした、今回デプロイをするリポジトリを選択します。

すると、以下のページが開きます。

プロジェクトの設定

上から順番に、「Project Name」はVercel上でのプロジェクトの名前を決めます。複数プロジェクトがある場合に判別するためのものなので、なんでも構いませんが「個人ブログ」などわかりやすい名前を設定しましょう。

次に「Framework Preset」で、使用しているフレームワークを選択します。Next.jsであれば「Next.js」、Vue.jsであれば「Vue.js」など、正しく選択しましょう。

「Root Directry」と「Build and Output Settings」は基本的にはそのままでいいです。ただし、プロジェクトの仕様で変更する必要がある場合は、オーバーライドして変更を行ってください。

環境変数の設定

続いて「Environment Variables」です。ここでは環境変数を定義している .env の設定を行います。

例えば、プロジェクトの環境変数として以下のように定義していたとしましょう。

NEXT_PUBLIC_USER_ID = USERID
NEXT_PUBLIC_USER_PASSWORD = USERPASSWORD

この場合は、「Key」にイコールの左側である NEXT_PUBLIC_USER_ID や NEXT_PUBLIC_USER_PASSWORD を入力し、「Value」にイコールの右側である Key に対応する値を入力します。

デプロイ

必要な環境変数を全て設定したら下にある「Deploy」ボタンを押します。しばらく待つとデプロイが完了し、URLにアクセするとデプロイしたページを開くことができます。

注意点

ここまで紹介してきたように便利なVercelですが、一つ注意点があります。

それはhobby（無料）プランでは商用利用ができないという点です。商用利用するためには、有料のProプランを利用する必要があります。商用利用したい人にとっては、別のホスティングサービスを利用するのも手段の一つかもしれません。

逆に商用利用しない場合は、制限内であればhobbyプランでも何度でもデプロイして利用することができます。個人開発の範囲内のみで扱いたいという場合であれば、どんどん活用していくべきだと思います。

最後に

ここまで、Vercelでアプリケーションをデプロイする方法について解説しました。

本当に簡単で、初回アカウント登録からわずか30分、なんなら10分あればデプロイが可能だと思います。また、最初に記述しましたが、コード変更後にGitHubにpushするだけで速攻変更が反映され再デプロイされるため、サーバー側のメンテナンスが全く必要ありません。

ぜひ活用して、様々なアプリケーションを作ってみてください。ここまでお読みいただきありがとうございました。