Zenn
💨

未来のWeb開発はVercelで決まり！ 2024年版 機能紹介 〜その①〜

2024/09/03に公開
Next.js
TypeScript
Vercel
frontend
tech

はじめに

普段は都内でフロントエンドを中心にWEBエンジニアをやっています。
今回はVercel2024年版ということで現在使える機能とWEBアプリのDeployまでの流れを一部ハンズオン形式でまとめてみようと思います。

Vercelプラットフォームの概要と特徴

Vercelとは

VercelはVercel社(旧：ZEIT社)によって開発されたフロントエンド向けのホスティングサービスです。
また、同社はNext.jsを開発していることでも有名です。
そのためNext.jsとの親和性は抜群ですが、もちろん他のフレームワークにも対応しています。
Vercelを開発した背景としては、Jamstackの登場によってフロント/バックの切り分けが容易になったことや、フロントエンド開発の近代化、高速化が大きく影響しているそうです。
この辺りのお話はVercel社のCEOであり、Vercelの開発者でもあるGuillermo Raych氏の記事に書かれていますのでぜひ読んでみてください。

特徴

  • Next.jsとの相性◎
  • サーバーサイドレンダリング(SSR)ができる状態でDeployが可能
  • ソースコードの差分をGitHubにプッシュするだけで、自動的にビルドとDeployが可能
  • CDNの利用により高速なページの描画が可能

機能一覧

  • Project
    • 自分が参加しているプロジェクトのDeploy状況を確認できる。
    • またビルドログ確認したり過去のVersionへのロールバックもここからできる。
  • Deployments
    • プロジェクトのDeploy履歴が確認できる
    • Deploy単位でビルドログを確認
  • Analytics
    • DeployしたWebアプリケーションにアクセスしたユーザーの分析
    • enableにしたあと解析用のパッケージをインストールすることで簡易的にWeb解析が可能
  • Speed Insight
    • WEBサイトのパフォーマンスに関する解析
  • Logs
    • 時間やレベル、環境などを指定してランタイムログの表示、解析が可能
  • Firewall
    • Webアプリケーションに対しファイアウォールを設定し、DDoS攻撃や不正アクセスから保護する
    • WAFによってアクセス制限もかけられる
  • Storage
    • WEBアプリケーションで使用したいデータベースの作成、管理が可能。
    • 全てHobbyプランから使用可能
    • 選べるDBの種類は以下の通り
      • Edge Config - 低レイテンシーで動的な設定変更が必要な場合
      • Blob - 画像や動画を扱う場合
      • Postgres - 重要かつ信頼性の高いリアルタイムのデータを扱う場合
      • KV - ユーザー認証などのキー・バリューを扱う場合
  • Settings
    • 各種設定が可能

といったことがブラウザ上から可能になります。
これらは全て無料で利用できます。
この記事ではその中でも以下について重点的に紹介します。

  • GitHubと連携し自動でビルドおよびDeploy
  • 直前のVersionにロールバック
  • カスタムドメインの設定とSSL証明書の自動発行
  • 環境変数・シークレットの設定

Vercelの新機能のピックアップ

Vercelはパフォーマンスの向上やセキュリティの強化などのアップデート(多い時では週に数回)を繰り返すことで、よりよいユーザー体験の提供を実現しています。
そこで今回は直近のアップデート(2024/08/23まで)についてピックアップしてみました。

デプロイメントの保持期間を設定可能に。

セキュリティやコンプライアンス強化の観点から、以下のデプロイメントに対してプランに関係なく保持期間が設定できるようになりました。

  • キャンセルされたデプロイメント
  • エラーが発生したデプロイメント
  • プレビュー環境のデプロイメント
  • 本番環境のデプロイメント(現在のデプロイメント以外)

ログ周りの機能の改善

  • ランタイムログのLiveモード約5秒ごとに更新するように切り替えることができるようになりました。
  • ランタイムログがGoogle Cloudのように時系列グラフで視覚化できるようになりました。

Web Analytics

  • Web Analyticsのカスタム日付が選択可能になりました。
  • 分析データをCSVとしてエクスポートできるようになりました。

Speed Insights

  • 全てのプランで表示可能な履歴の期間が増えました。
    • Hobby - 24時間 → 7日間
    • Pro - 7日間 → 30日間
    • Enterprise - 30日間 → 90日間

アカウント設定画面のUXの向上

  • 以下の3つのセクションに分けることにより、直感的に操作できるようになりました。
    • Overview - 参加しているチームのリストと未参加のチームへのアクセスリクエストを含んだ一覧
    • Activity - 過去12ヶ月の行動履歴の一覧
    • Settings - 認証、課金、アクセス トークンなどのユーザー固有のオプション

料金プラン

Vercelの主要な3つの料金プラン（Hobby、Pro、Enterprise）の違いを以下の表にまとめました。
※この情報は2024年8月25日 時点のものです。

機能 Hobby Pro Enterprise
価格 無料 $20/月 カスタム価格
デプロイメント 無制限 無制限 無制限
帯域幅 100GB/月 1TB/月 カスタム
Serverless Function実行 100時間/月 1000時間/月 カスタム
チームメンバー - 無制限 無制限
同時ビルド 1 1(追加ごとに+$50) カスタム
プレビューデプロイメント ✓ ✓ ✓
カスタムドメイン ✓ ✓ ✓
HTTPS ✓ ✓ ✓
継続的デプロイメント ✓ ✓ ✓
Deployしたコンテンツのパスワード保護 - ✓ ✓
チーム管理機能 - ✓ ✓
優先サポート - - ✓
SLA - - ✓
SSO - - ✓
セキュリティレビュー - - ✓

個人開発レベルならHobbyプランでも十分サポートされており、さらに複数人で共同開発するならProプランが、大規模なプロジェクトならEnterpriseプランがおすすめです。
Enterpriseプランでは多くの機能がカスタマイズ可能になっており、それによって金額も変動します。
この記事ではHobbyプランでできることについて紹介していきます。

類似のホスティングサービスとの差別化

類似のホスティングサービスとして

  • Cloudflare
  • Netlify
  • AWS amplify
    などがあります。
    これらの違いを表にまとめてみました。
特徴 Vercel Cloudflare Pages Netlify AWS Amplify
主な用途 フロントエンド、特にNext.jsアプリのDeployとホスティング 静的サイトのホスティングとサーバーレス機能 静的サイトとサーバーレス機能、ビルドの自動化 フルスタックなウェブとモバイルアプリケーション
CI/CD 自動ビルドとデプロイメントパイプライン 自動ビルドとデプロイメントパイプライン 自動ビルドとデプロイメントパイプライン 自動ビルドとデプロイメントパイプライン
CDN 独自のグローバルCDN 独自のグローバルCDN 独自のグローバルCDN 独自のグローバルCDN
サーバーレス サーバーレスファンクションをサポート Cloudflare Workersを利用 Netlify Functionsでサーバーレス機能 AWS Lambdaを利用
カスタムドメイン 簡単に設定可能 簡単に設定可能 簡単に設定可能 簡単に設定可能
SSL/TLS 自動でLet's EncryptによるSSL/TLS証明書が発行される 自動でLet's EncryptによるSSL/TLS証明書が発行される 自動でLet's EncryptによるSSL/TLS証明書が発行される 自動でAWS Certificate ManagerによるSSL/TLS証明書が発行される
分析機能 組み込みの基本的な分析機能（Vercel Analytics） リクエストの分析機能 組み込みの基本的な分析機能 CloudWatchなどのAWSサービスを利用可能
最適化機能 Edge Networkを利用した最適化 Cloudflare CDNによるキャッシュと最適化 Netlify CDNを利用したパフォーマンス最適化 AWS CDN（CloudFront）を利用
開発者エクスペリエンス Next.jsとの深い統合、使いやすいUIと直感的な操作 Cloudflare Workersと統合した開発向けツール JAMstackエコシステムでの幅広いサポート AWSツールとの統合、複雑だが強力な操作性
無料プラン 無料プランあり 無料プランあり 無料プランあり 無料ティアあり
ユースケース フロントエンド中心のアプリケーション、特にNext.js 静的サイト、パフォーマンスが重要なサイト JAMstack、静的サイト、シンプルなサーバーレス フルスタックアプリ、AWSの他サービスと連携したい場合

VercelもNext.jsも同じ企業が開発しているため、Next.jsで用意されているSSR機能や静的サイト生成(SSG)、APIルートといったNext.js特有の機能をカバーしています。
この記事ではNext.jsを扱うため、恩恵の大きいVercelを採用しています。

Deploy設定とGitHubとの連携

Next.jsで開発したものをを実際にDeployしてみる

順番にご説明します。
必要ない方は飛ばしてしまって大丈夫です。

Vercelアカウントの設定

Vercelの公式サイト(https://vercel.com/)からアカウントを作成します。
右上のSign Upをクリック。

プランはHobby(無料)を選択。

ユーザーネームを入力するとGitHubと連携するかどうかを聞かれるので、GitHubのアカウントと電話番号を認証して連携する。
Vercelのプロジェクト画面が表示されれば一旦OK。

Next.jsの開発環境を構築する

お好きなターミナルを開いてプロジェクトを作成したいディレクトリで以下のコマンドを打つ

npx create-next-app —typescript

するといろいろオプションについて聞かれるため、こちらについても答えていく。
ちなみに私は↓こんな感じです。

質問に答え終わると自動的にプロジェクトのディレクトリが作成され、“Success!”と表示されればOK。

Next.jsの初期画面を表示

npm run dev

とターミナルに打ち込み、出てきたURL(http://localhost:3000)をクリックするとブラウザに初期画面が表示されます。
↓こんな感じの画面が表示されればOKです。

試しに画面を編集してみる

今ブラウザに表示されているファイルはsrc/app/page.tsxなので、そのファイルを改造してみます。

export default function Home() {
  return 'Local';
}

不要なものを削除して”Local”をただ返すだけのファイルになりました。
(この記事の本題はVercelについて、なのでこの辺りはサクッとやってます。)
GitHubのブラウザを開き、リポジトリが作成されていればOK。
再度ブラウザに戻り、”Local”と表示されていればOK。
以上でNext.jsの環境構築はOKなので、一旦GitHubにプッシュします。
やり方はなんでも大丈夫ですが、VSCodeからそのままやってしまうのが楽だと思います。

このファイルを公開するための設定をしていきます。
Vercelにログインし、先ほどのリポジトリをVercelにDeployします。
「Add New…」から「Project」を選択。」

Import Git Repository下のセレクトボックスから「Add GitHub Account」を選択し、任意のGitHubアカウントを登録します。

Only select repositoriesにチェックを入れ、「select repositories」から連携するリポジトリを選択して「Install」

再度VercelのブラウザでGitHubアカウントを選択し、今回のリポジトリを「Import」

Configure Projectでは特に何も触らず「Deploy」

その後、自動でDeployしてくれるので数分待つと…

Deploy完了しました。

実際にDeployされたページを見に行ってみます。
プロジェクトのページから「Visit」を押すと…

無事に公開されました！

このようにVercelを使うと個別にサーバーやドメインの契約をしなくても無料でWEBアプリケーションをネットに公開できます！
ドメインは固定で”vercel.app”になってしまいますが、独自のドメインに変更することももちろん可能です！(後述)

ロールバック

Deployしたものを元に戻したいときは、”ロールバック”機能ですぐにDeploy前の状態に戻すことができます。(注)Pro版/Enterprise版では任意のVersionにロールバックができます。
実際にロールバック機能を使用してVersionの切り替えを行っていきます。

1つ前のVersion

最新のVersion
例えば上記の画像のように’Version1’と表示しているものを’Version2’に変更するとします。
これを一つ前の状態に戻したい場合は、VercelブラウザのProjectタブにある「Instant Rollback」ボタンからVersionを簡単に戻すことができます。

現在のDeploy内容と直前のDeploy内容が表示されるので、問題なければ右下の「Continue」をクリックします。
クリックすると注意書き(※)が表示されます。問題なければ再度「Continue」をクリックします。



↑ロールバック完了
再度Deployした画面を見てみると…

一つ前のVersionに戻っています。
(注)ロールバックを行うと、本番ドメインの自動割り当てがOFFになり、その後変更をプッシュしてもロールバックされたVersionのまま変更されません。

↑ロールバック後にDeployをしても最新のVersionに切り替わっていないことがわかります。
これを解決するには手動で”Promote”を行う必要があります。
切り替えたいVersion(状態がStagedのもののみ)の3点リーダーから「Promote」を選択します。


そのまま「Promote」ボタンをクリックすることで、最新のVersionに切り替えることができました。

また、これにより自動割り当ても再度ONに戻ります。

↑続けて’Version5’の変更をプッシュし、自動で切り替わっていることが確認できます。

また、ロールバックで前のVersionに戻したとしても、ソースコードは最新のVersionのまま変わらないので取り扱いには注意が必要です。

カスタムドメインとSSL証明書

ドメインとは

ドメインにはメインドメインとサブドメインの二つがあります。

  • メインドメインとは
    ウェブサイトの主要なアドレスとなる部分で組織名やブランド名を表すことが多いです。

また、メインドメイン部分をオリジナルな文字列にしたものをカスタムドメイン(独自ドメイン)とも呼びます。

  • サブドメインとは
    メインドメインの前にドット(.)で区切って追加される部分で、ウェブサイト内の特定のセクションやサービスを区分けするために使用されます。

Vercelでは、あらかじめ取得したドメインをプロジェクトに設定し、そのドメインでWebサイトやアプリケーションを公開することができます。
また、開発環境や本番環境といった環境ごとにドメインを設定することもできます。

SSL証明書

Vercelでは、Let's Encrypt(無料のSSLサーバー証明書を発行してくれるサービス)を利用してドメインに自動的にSSL証明書を発行します。(デフォルトのvercel.appドメインに対しても同様)
これにより、HTTPS通信が標準で有効になります。

ドメインの変更

VercelのSettingsからDomainsを選択し、「edit」ボタンでドメインを「任意の文字列.vercel.app」に変更することができます。
また「Git Branch」欄からブランチごとにドメインを分けることもできます。(無料プランなら50個/プロジェクト)
以下の画像の場合ではmainブランチにtonkotsu.vercel.appというドメインを割り当てている。

環境変数とシークレット

環境変数とは

アプリケーションの設定や動作を制御するために用いられます。
VercelではProduction環境、Preview環境(本番以外のDeployされた環境)、Development環境(ローカル環境)に対し、個別に環境変数が設定できます。
環境変数の中でもAPIキーやデータベースURLといった機密性の高い情報のことをシークレットと呼びます。
つまり…先ほど表示した”Local”をPreview環境なら”Preview”、Production環境なら”Production”といったように
環境ごとに自動で変えたい場合にこの環境変数を使います。

設定方法

環境変数/シークレットの設定方法には大きく分けて以下の2通りがあります。

  • envファイルに記述する
  • Vercelから登録する(Vercel CLIでも可能)
    一般的には環境変数を使う環境によって設定方法が変わります。
  • ローカル開発用の環境変数：
    • .env.localファイルに記述。このファイルはGitで管理されず、各開発者のローカル環境で異なる設定が可能です。
  • シークレット(APIキーなどの機密性の高い情報)：
    • envファイルには記述せず、Vercelの環境変数設定を利用して管理します。

実際に設定して環境ごとに違うテキストを表示してみる

ローカル：

まずは.env.localに以下の内容を記述
(.env.localがない人は、プロジェクト直下にファイルを作成してください)

NEXT_PUBLIC_ENVIRONMENT_NAME=development!

page.tsxにハードコーディングしている”Local”をローカル(https://localhost:3000)で”development!”と表示されるように環境変数を設定する。

export default function Home() {
  return process.env.NEXT_PUBLIC_ENVIRONMENT_NAME;
}

https://localhost:3000にアクセスして、”development!”と表示されることを確認

Production：

今回はVercelのブラウザから設定してみます。
VercelプロジェクトのSettings→Environment Variablesを開く
“Environments”はDevelopmentに設定し、KeyとValueにそれぞれ”ENVIRONMENT_NAME”、”production!”を入力して「Save」(*)

(*)Next.js 9.4 からは NEXT_PUBLIC_ のプレフィックスを付けて環境変数を設定するとnext.config.js でenv設定しなくても直接使えるようになります。
このままではproduction環境にアクセスしても”Local”と表示されたままだと思いますので、先ほどのpage.tsxの変更をプッシュします。

“production!”と表示されていればOK。
このようにしてブランチ(環境)ごとに異なる値を設定することができました。

おわりに

いかがでしたでしょうか？
今回はVercelについてまとめつつ、WEBアプリケーションをDeployするまでの流れを説明してみました。
環境変数の設定やサーバー周りの管理をVercelがやってくれるのはかなり楽だなと感じました。
今回紹介しきれなかった機能もありますので、別の記事でまとめようと思います。
ここまでお読みいただき、ありがとうございました。

Discussion