Web サービス Vercel(ヴェルセル/旧 ZEIT・Now)についてまとめています。

2020年4月より ZEIT が Vercel に変わりました。

▲ ZEIT is now Vercel | Vercel Blog

zeit.co は vercel.com に変わっています。他も順次変わってくるでしょう。
2020年5月、Now CLI は Vercel CLI に変更されました。
now が vercel に変更されています。
2020年6月、一般ユーザー向けのサブドメイン now.sh も vercel.app に変更されています。


目次


公式・関連サイト


.now.sh の停止

▲ URLs are becoming consistent | Vercel Blog

2021年2月20日を持って ~.now.sh の提供を終了し、~.vercel.app へ統一されました。
~.now.sh で維持していた場合は ~.vercel.app へ変更されている事にご注意下さい。


プラン

Vercel は無料で使用できます。ただし 非営利・個人使用に制限されます。

2021年2月に価格体系が変わりました。
有料プランは主にチームでの使用向けですが、
転送量やストレージ容量などの上限を上げたい場合も検討が必要でしょう。

▲ Pricing | Vercel

2021年4月現在で無料のプラン Hobby は次のような制限があります。

  • 帯域幅: 月 100GB まで
  • サーバレス関数の実行: 1 時間で 100GB まで
  • ビルド実行: 月 100 時間まで
  • デプロイ: 1 日 100 回まで
  • サーバレス関数の作成: デプロイ毎に 12 回まで
  • サーバレス関数の実行時間: 1 回 10 秒まで
  • Git リポジトリのプリジェクト接続: リポジトリ毎に 3 プロジェクトまで

全プラン共通の制限は次があります。

  • プロキシリクストのタイムアウト: 30 秒
  • CLI によるデプロイでの作成: 1 週間で 2000 回まで
  • デプロイぼビルド時間タイムアウト: 45 分

サーバレス関数(Serverless Functions)はプログラミング言語を動作させる機能で、
HTML・画像ファイルなど、静的ファイルの表示ではサーバレス関数の制限は対象外です。

無料プランで制限に達している利用者はかなり少ないようで、
2021年2月より Dashboard の Usage は有料プラン専用の表示になり、
無料プランでは基本的に上記の制限を意識せずに使えるようになっています。
代わりに無料プランの制限を超過している場合、メール通知が届くようになりました。
特に超過するケースが多いのは サーバレス関数の実行 関連になっているようです。

▲ Limits | Vercel Docs

数ヶ月おきでプランの変化が生じています。今後も上記の制限は変わる可能性があります。
ただし、基本的には無料プランでも通常使用で問題がない範囲で、
だんだんと制限はゆるくしているように思われます。


ログイン・アカウント抹消

Vercel ではパスワードを所有しません。
ログインはメール認証または GitHub・GitLab・Bitbucket 経由でログインします。

アカウントの抹消は Settings - General 内 Delete Your Vercel Account で容易にできますが、
一度アカウントを抹消するとそのメールアドレスでは再登録できなくなります。
しばらく使う予定がなくても将来的使う予定があればアカウント抹消しないで下さい。


Git 連携

次の Git リポジトリに対応しています。

  •  GitHub
  •  GitLab
  •  Bitbucket

▲ Three Improvements to Project Creation & Git Integration | Vercel Blog

当初はユーザーおよびチーム別に GitHub・GitLab・Bitbucket の関連付けを行っていましたが、
2020年12月より、プロジェクト別でリポジトリの関連付けが可能になりました。
プロジェクトを選択した Project Settings に Git の項目が増えています。


Vercel CLI インストール

Git 連携しか使用しない場合でも Vercel CLI を入れておくと便利かもしれません。

Node.js をインストールした状態で、
シェル・ターミナルから次のコマンドでインストールできます。

npm i -g vercel

バージョンアップも同じ方法です。
更新が激しいので、動作がおかしいと思ったら更新してみて下さい。

▲ Download Vercel | Vercel


独自ドメイン・サブドメイン.vercel.app

独自ドメインを購入して使用できます。
.jp など登録条件がある独自ドメインはここから登録できません。

▲ Domains | Vercel

すでに所有しているドメインは Web の Domain から追加した際、
設定するネームサーバが表示されます。

サブドメインなしの場合は A レコードの設定が表示されます。

サブドメイン 種類 値
@・空白・ドメイン名 A 76.76.21.21

サブドメインが付いている場合は CNAME レコードになります。www を含みます。

サブドメイン 種類 値
設定サブドメイン CNAME cname.vercel-dns.com.

サブドメインはワイルドカード指定も可能です。

▲ Introducing Wildcard Domains | Vercel Blog

追加の代わりに Transfer-In を選択し、Vercel でドメイン管理する事もできます。

ドメインを 🎈 Cloudflare で管理している場合、
Vercel はこれを認識して注意書きを表示します。
サブドメインなしの場合、A レコードで IP アドレスを設定するように表示されます。

ネームサーバを設定して、ドメインをまるごと Vercel 管理をする事もできます。
2020年5月よりネームサーバが変更されています。従来はこちらが推奨でした。

ネームサーバ
ns1.vercel-dns.com
ns2.vercel-dns.com

ドメインをネームサーバで登録した場合、ネームサーバのレコード設定が行えます。
これにより、Vercel 管理にしてもサブドメインなどは外部サービスを使用できます。
以前は Vercel CLI のみ設定可能になっていましたが、
現在は Vercel の Web より Domains からレコード設定が可能です。

代わりに サブドメイン.vercel.app を使用する事もできます。

▲ Custom Domains | Vercel Docs

ドメイン・サブドメイン毎のリダイレクト

2019年10月より、Web 上で、ドメイン・サブドメイン毎のリダイレクトを
容易に設定できるようになりました。
サブドメイン.vercel.app もリダイレクトの設定が可能です。
独自ドメインでの公開にする場合はリダイレクト設定すると、
Web や Vercel CLI でも独自ドメインのアドレスがメイン表示されます。

▲ Redirecting Domains | Vercel Blog


サブドメインのレコード設定

独自ドメインのネームサーバを Vercel に設定した場合、
Vercel CLI よりサブドメインのレコードを設定できます。
Git 連携にしている場合でも使用可能です。

▲ DNS | Vercel CLI Reference

2020年6月より、Web の Dashboard 画面から、Dpmains を選択し、
該当ドメインの ︙ - View DNS Records & More を選択する事で
レコードの確認・設定を Web からでも行えるようになりました。
ドメインをプロジェクトに割り当てている場合は、プロジェクトの View Domains で
該当ドメインの Edit を選択し View DNS Records & More for ドメイン名 でも
レコード確認・設定を行う事ができます。

▲ DNS Records UI | Vercel Blog

ネームサーバのレコード設定については、次も参照して下さい。

🎈 ネームサーバ | ふうせん🎈 FU-SEN

レコードの追加 - A・AAAA・ALIAS・CNAME

レコードの追加は通常次になります。
ネームサーバ側で値の先を参照し、A・AAAA レコードで返す ALIAS も使用できます。

vercel dns add ドメイン名 サブドメイン 種類 値

サブドメインがない場合は '@' とします。 @ のみは環境によりエラーとなります。
ALIAS は通常サブドメインがない '@' で使用します。

レコードの追加 - TXT

TXT レコードは SPF の設定やドメイン所有者認証などで使われます。

vercel dns add ドメイン名 サブドメイン TXT '値'

空白が含まれる場合は必ず囲って下さい。 '値' の代わりに "値" でも構いません。

レコードの追加 - MX

vercel dns add ドメイン名 サブドメイン MX 値 優先度

小規模であれば、メールアドレスは [email protected] なので、
サブドメイン は '@' になるでしょう。

レコードの追加 - SRV

vercel dns add ドメイン名 サブドメイン SRV 優先度 Weight ポート ホスト名

レコードの追加 - CAA

Vercel は 🎈 Let’s Encrypt を発行し、
その際に CAA レコードも設定します。
独自に証明書をアップロードした時は設定をする事ができます。

vercel dns add ドメイン名 サブドメイン CAA 'フラグ タグ "ホスト名"'

'~' の囲いにご注意下さい。

レコードの一覧

vercel dns ls ドメイン名

ドメイン名 を省略した時はログインしているアカウントすべての値が表示されます。
vercel dns add ~ で追加したレコードは id に値があります。
これは vercel dns rm ~ で使用します。

レコードの削除

vercel dns rm レコードID

レコードID は vercel dns ls ドメイン名 で表示されています。

ゾーンファイルのインポート

他で運用していたネームサーバのゾーンファイルがある場合、
インポートで一括設定が可能です。

vercel dns import ドメイン名 ゾーンファイル

動作確認

vercel dev で、ローカル上での動作確認を行えます。
プロジェクトディレクトリへ移動します。

cd プロジェクトディレクトリ
vercel dev

Vercel はアプリのビルドに対応しています。

 プログラミング言語の実行(Serverless Functions)


サイトの公開(デプロイ)

サイトの公開動作がデプロイとなります。

Vercel CLI

簡単な使い方はプロジェクトディレクトリに移動し、vercel --prod を実行します。

cd プロジェクトディレクトリ
vercel --prod

Vercel CLI(Now CLI)17.0 以降でプロジェクトをはじめてデプロイする場合、
対話式で設定を行います。

> vercel --prod
Vercel CLI 18.0.0
? Set up and deploy “ディレクトリ”? [Y/n] よければ Y
? Which scope do you want to deploy to? ユーザー名
? Link to existing project? [y/N] すでにプロジェクトがあれば Y 新規は N
? What’s your project’s name? プロジェクト名を入力
? In which directory is your code located? ビルドする場所(デフォルト ,/)
フレームワーク名 framework detected. Default project settings:
- Build Command: `npm run now-build` or `npm run build`
- Output Directory: `public` if it exists, or `.`
- Development Command: None ここまで該当するフレームワークがない場合
? Want to override the settings? [y/N] 上の設定で正しければ N 変更は Y
�  Linked to ユーザー/プロジェクト (created .now and added it to .gitignore)
�  Inspect: URL [ビルド時間]
✓  Production: URL [copied to clipboard] [ビルド時間]

Web から設定の変更が可能です。

一度設定した後はシンプルな表示になります。

> vercel --prod
Vercel CLI 18.0.0
�  Inspect: URL [ビルド時間]
✓  Production: URL [copied to clipboard] [ビルド時間]

ローカルでビルドして、公開する事もできます。
Hugo は通常 public/ ディレクトリ内に index.html などを生成します。

hugo
vercel --prod public

ただし Vercel は Hugo の自動ビルドに対応しています。
したがって、 hugo コマンドを実行する事なく、
Hugo 構成ディレクトリで vercel --prod として構いません。
Hugo を認識し、自動ビルドします。
もちろんすでに index.html があるところで vercel --prod も可能です。

--prod を付けない vercel の場合は、
サブドメイン.ユーザー.vercel.app で仮公開できるアドレスで生成されます。

これらとは別に生成毎にランダムに付加されたアドレスでも生成されています。
必要な場合は Web からロールバックする事が可能です。

Git 連携

git push するとビルドが行われます。
GitHub では commit にコメントが入り、メール通知も行われます。

Vercel CLI 同様、Hugo などを自動認識してビルドしてくれます。


サーバ側でのキャッシュ

▲ Caching | Vercel Docs

Vercel は静的ファイルの場合、キャッシュサーバ(エッジサーバ)にキャッシュし、
再度参照した時は更新を確認した上でキャッシュサーバから配信します。
日本の場合は東京にサーバがあり、とてもレスポンスが速く、
更新があった場合は最新のファイルが出力される仕様になっています。

意図的にキャッシュを無効にしたり、逆に プログラミング言語の実行 でも有効にできます。

hTTP ヘッダの Cache-Control はデフォルトで次になっています。

Cache-Control: public, max-age=0, must-revalidate

従って Web ブラウザにキャッシュを保存せず、
必ず Vercel サーバを参照する前提になっています。
これは 🎈 Cloudflare などの CDN サービスを更に経由させても
そのままでは効果がない事を意味します。
転送量など特別な理由がない限り、ドメインを Cloudflare へサイト登録してあっても、
「DNS only」にして他の機能は無効にし、
完全に Vercel 任せで制御してしまうのが無難でしょう。

HTTP ヘッダに X-Vercel-Cache が含まれています。
これでキャッシュの状況を把握できます。

X-Vercel-Cache ファイル提供 意味
MISS 配信サーバ エッジサーバにファイルなし
HIT エッジサーバ エッジサーバにファイルあり
BYPASS 配信サーバ エッジサーバを通過した
STALE 配信サーバ エッジサーバのファイルは期限切れ
REVALIDATED エッジサーバ エッジサーバのファイルは期限切れで再検証

プログラミング言語の実行(Serverless Functions)

▲ Supported Languages | Vercel Docs

次のプログラミング言語は api/ 内にソースを入れて容易に実行できます。
拡張子で実行する言語が選定されます。次のとおりです。

  • Node.js (.js および .ts)
  • Go(.go)
  • Python(.py)
  • Ruby(.rb)

api/ を付けずに動作させたい場合や拡張子に関係なく動作させたい場合は
vercel.json で routes などを設定します。

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/api/file.js" }
  ]
}

▲ Community Runtimes | Vercel Docs - Official Runtimes

Community Runtimes として次の言語も対応されています。

.php ファイルの場合に PHP を動作するようにする例です。

{
  "functions": {
    "api/*.php": {
      "runtime": "[email protected]"
    }
  }
}

静的ファイルの出力は世界中の CDN サーバへ配信されますが、
動的に動作する場合、無料プランでは 1 ヶ所のみです。
vercel.json で場所を指定できますので、
日本向けでであれば hnd1 で東京サーバにすると良いでしょう。

{
  "regions": ["hnd1"]
}

動的ファイルのビルドを行う場合、
無料プランではビルドを一度行うと次のビルドが行えるまで数分待たされます。

vercel dev でローカルによる動作確認が可能ですが、
使用する言語がインストールされている必要があります。


vercel.json

カレントディレクトリの vercel.json で動作を設定できます。
旧表記は now.json で、こちらも有効ですが、後に使えなくなる可能性があります。

JSON なので、 , 区切りで項目を並べます。このような感じになります。

{
  "regions": ["hnd1"],
  "functions": {
    "api/*.php": {
      "runtime": "[email protected]"
    }
  },
  "rewrites": [
    { "source": "/(.*)", "destination": "/api/$1" }
  ]
}

上の項目以外にもいくつか存在します。

  • env・build.env 環境変数の設定
  • regions 実行するロケーション(東京は "hnd1")
  • redirects 転送(いわゆる 301・302 転送の設定)
  • rewrites rewrite 設定
  • headers HTTP ヘッダの付加

rewrites の destination は URL 表記も可能で、
これにより、リバースプロキシも容易に実現可能です。

当初は routes が使われていましたが、現在は非推奨になりました。
redirect・rewrites・header を使用して下さい。
また、プロジェクト名を設定する name、
公開ドメイン名を設定する alias も現在非推奨になっています。

▲ Configuration Reference | Vercel Docs

以前は vercel.json の生成が必須でしたが、現在はなしでもデプロイできます。
Vercel CLI を使用する場合、.vercel ディレクトリ内に関連ファイルが生成されます。
ファイル .gitignore も生成され、Git リポジトリでは .vercel 内が対象外になります。

これらは旧称では now.json および .now ディレクトリでしたが、
後に使えなくなる可能性があるため、変更をおすすめします。


Q&A

Vercel のサーバはどこにあるのですか?

世界各地に設置していて、日本には東京にサーバがあります。
東京は Vercel 設置のサーバでは 5 ヶ所目で、アジアで最初に設置されたサーバです。

▲ Now in Tokyo | Vercel Blog
▲ Smart CDN | Vercel

以前は Cloudflare CDN と連携していましたが、不具合があり使用を停止しています。
その代わりに Vercel は東京を含む各地へ CDN サーバを設置するようになりました。

なお、静的ファイルは近場にある(日本ならば東京)
エッジサーバにファイルをキャッシュとして蓄え、
一定期間で同じリクエストがあった場合はキャッシュから応答します。
そのため、特に静的ファイルは素早いレスポンスを実現しています。

動的ファイルでも Cache-Control ヘッダの付与によってキャッシュを有効にできます。
プログラミング言語の実行(Serverless Functions)

SSL は有効ですか?

はい、公開アドレスは必ず SSL が有効になります。
SSL なしでは使用できません。
.vercel.app で採用されている .app ドメインは Web サイトが https 限定です。
独自ドメインを指定する場合でも、http は https へ転送し、常時 SSL になります。

通常 Vercel は無料の SSL サーバ証明書 Let’s Encrypt を発行します。
サブドメイン.vercel.app および サブドメイン.ユーザー.vercel.app は
必ず Let’s Encrypt を用いて SSL 化されます。

▲ Automatic SSL with Now and Let’s Encrypt | Vercel Blog
🎈 Let’s Encrypt | ふうせん🎈 FU-SEN

独自ドメインの場合も Let’s Encrypt を発行するので、通常意識する必要ありません。

Not Found の表示を独自の設定できますか?

▲ Custom 404 Page | Vercel Blog

静的ファイルの場合、404.html を生成して機能します。
一時機能しない事があったり、vercel.json での指定が必要な事がありましたが、
現在は特に考慮せずに機能します。
静的サイトジェネータは 404.html を生成する事が多く、期待する表示ができます。

動的ファイルの /api/ 内で機能させたい場合、
404.html 以外のファイルを使用したい場合も手段があります。
ただし vercel.json の routes は現在非推奨の設定となっています。

HTTP ヘッダーを設定できますか?

Web フォントなどの静的ファイルで使用する場合は、
vercel.json に routes や headers で設定する事になりますが、
Vercel では静的ファイルの場合、デフォルトで access-control-allow-origin: * を返します。
そのため、通常は特に設定せずに期待する参照を得る事ができます。
また通常キャッシュは 31 日間有効です。

api/ 内でプログラミング言語(Serverless Functions)を実行する場合は
vercel.json やプログラミング言語でヘッダーを加えて下さい。

Cloudflare を使用した独自ドメインで参照できません。

Cloudflare を有効にしたまま Vercel 側で追加すると、
Let’s Encrypt のドメイン認証に失敗します。

特に Cloudflare 管理にする必要がなければ、
🎈 ネームサーバ を Vercel に変更するか、
DNS の項目で DNS only にして、Cloudflare をネームサーバ管理のみにします。

Cloudflare の CDN などを使用したい場合は、
Let’s Encrypt が生成するディレクトリを SSL の対象から外して下さい。
Cloudflare からは Page Rules を用いて次を設定します。
対象ドメインが example.net の場合、次の設定となります。

  • example.net/.well-known/*
  • SSL
    • オフ・Off
  • HTTPS の自動リライト・Automatic HTTPS Rewrites
    • オフ・Off

なお、現在 Vercel そのものが CDN でエッジサーバを構えていて、
日本から(特に Cloudflare で東京のサーバを参照する北日本~東日本)の
レスポンスは Cloudflare のエッジサーバとほぼ変わらない速さになりました。
静的ファイルではこれがデフォルトで適用されるようになり、
vercel --prod ではキャッシュクリアされ、最新ファイルを貯めなおします。
CDN を使用している事を意識せずに使えて、レスポンスが良く、とても理想的です。
転送量がとても多いなど、特別な理由がない限りは、Cloudflare 経由にせず、
Vercel を直接参照するように設定する事を強くおすすめします。

▲ Provider Specific Instructions Cloudflare | Vercel Docs
🎈 Cloudflare | ふうせん🎈 FU-SEN

サブドメイン.vercel.app は Google の検索結果に表示されますか?

site:vercel.app 検索結果 | Google

vercel --prod で公開 URL として公開している場合は、
Google などで検索結果に出てくる対象です。
無料で誰でも使用できるドメインなので、後に悪用される可能性があり、
まともな運営は独自ドメインの使用が推奨されています。

複数のアドレスで公開されてしまうのですが……

▲ Deployments Deployment Types | Vercel Docs

コマンド vercel のみで生成されたプレビュー用 URL では
HTTP ヘッダに X-Robots-Tag: noindex を付与します。
そのため、Google などの収集対象になりません。
vercel --prod でもこれを含めた複数の URL を公開しますが、
公開用 URL のみを検索結果の対象とします。

しかし、公開用 URL を複数指定している場合は、
すべて Google などで収集される事になってしまいます。
適切な URL で表示されるようにするには
<link rel="canonical"> を用いて検索結果に出てきてほしいアドレスを指定します。

<link rel="canonical" href="https://balloon.asia/vercel/">

静的サイトジェネータではテーマが対応している事が多いので、
正しく生成されている事を確認できれば、あとは考慮する必要ありません。

不具合や質問はどうすれば良いですか?

Vercel CLI など GitHub にリポジトリが公開されている部分については
vercel/vercel の issues に報告して下さい。

 Issues - vercel/vercel | GitHub

質問については Discussions を使用できます。
GitHub という場所からもあって、英語の投稿・コメントばかりです。
また、 Serverless Functions が実装されてからは、
開発者寄りの突っ込んだ質問が多くなったような気がします。

 Discussions - vercel/vercel | GitHub

また、vercel.com 内を参照している時に右上 Support から Vercel メンバーに連絡できます。
その後はメールアドレスでのやりとりになります。
Docs の文面ミスなどは右上 feedback から連絡を入れるのが便利です。
場合によってはメンバーからメールで反応が返ってきます。

サーバの参照ができない場合は、Vercel Status も参照してみて下さい。

 Vercel Status