Web サービス Vercel（バーセル）についてまとめています。

2020年 ZEIT Now が Vercel に変わりました。

▲ ZEIT is now Vercel | Vercel Blog

ドメインも一新し、公式 Web サイト zeit.co は vercel.com に変わり、
一般ユーザー向けのサブドメイン now.sh も vercel.app に変更されています。
CLI も now から vercel へ変更されています。

 How do you pronounce “Vercel”? #5340 | GitHub vercel/vercel Discussions

「Vercel」の正しい読みは……

したがって日本語読み・カタカナ表記は「バーセル」となります。

目次

公式・関連サイト

• ▲ Vercel ログインしている場合は Overview 表示
  • Docs ドキュメント
  • Domains ドメインの登録
•  GitHub vercel
  • Issues | vercel/vercel 不具合報告
  • Discussions | vercel/vercel 質問など
•  Twitter @vercel
•  Vercel Status - サーバ稼働状況

プラン

Vercel は無料で使用できます。
ただし 非営利・個人使用に制限されます。
営利目的や事業向けは複数アカウントでシェア開発できる
有料プラン Pro・Enterprise を選択して下さい。

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

▲ Pricing | Vercel

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

※ 独自ドメインはサブドメインをカウントに含みません。
sub.example.com を Vercel で使用する場合、
独自ドメイン example.com で一カウントになります。

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

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

▲ Limits | Vercel Docs

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

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

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

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

Git 連携

Git リポジトリと連動する事で CLI を使用する事なく、
リポジトリへの push により、ビルド・デプロイされるようになります。

▲ Git | Vercel Documentation

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

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

Vercel CLI インストール

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

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

npm i -g vercel

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

▲ Download Vercel CLI | Vercel

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

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

▲ Domains | Vercel

ドメインを Vercel で購入し、後に他の Web サービスへ移す必要がある場合、
Web サイトの Domain より該当ドメイン名の右にある ︙ - Transfer Out で
Auth Code を入手し、容易に移管が可能になっています。
ただし独自ドメインの多くは新規登録から 60 日は移管できないのでご注意下さい。

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

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

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

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

▲ Introducing Wildcard Domains | Vercel Blog

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

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

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

ドメインをネームサーバで登録した場合、ネームサーバのレコード設定が行えます。
これにより、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 値 優先度

小規模であれば、メールアドレスは address@domain.ext なので、
サブドメイン は '@' になるでしょう。

レコードの追加 - 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 が含まれています。
これでキャッシュの状況を把握できます。

プログラミング言語の実行（Serverless Functions）

▲ Supported Languages | Vercel Docs

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

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

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

▲ Community Runtimes | Vercel Docs - Official Runtimes

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

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

{
  "functions": {
    "api/*.php": {
      "runtime": "vercel-php@0.4.0"
    }
  }
}

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

{
  "regions": ["hnd1"]
}

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

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

プログラミング言語を用いたビルド

▲ Build Step  Build Image | Vercel Docs

Vercel へアップロードした後、
プログラミング言語を用いてビルド作業を行いたい場合は
Build Step を用いて任意のプログラミング言語をインストールし、
ビルド作業を行う事ができます。

vercel.json

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

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

{
  "regions": ["hnd1"],
  "functions": {
    "api/*.php": {
      "runtime": "vercel-php@0.4.0"
    }
  },
  "rewrites": [
    { "source": "/(.*)", "destination": "/api/$1" }
  ]
}

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

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 のサーバはどこにあるのですか？

世界各地に設置していて、日本には東京にサーバがあります。

▲ Regions | Vercel Documentation\

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

動的ファイルでも 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 を発行するので、通常意識する必要ありません。

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

▲ How do I use a Cloudflare domain with Vercel? | Vercel Blog
▲ Provider Specific Instructions Cloudflare | Vercel Docs
🎈 Cloudflare | ふうせん🎈 FU-SEN

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

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

Cloudflare の CDN などを使用したい場合は、
Let’s Encrypt が生成するディレクトリを SSL の対象から外して下さい。
Cloudflare から 対象ドメイン より
SSL/TLS - エッジ証明書・Edge Certificates を選択し、
「常に HTTPS を使用・Always Use HTTPS」を オフ・Off にします。
この項目だけは ページルール・Page Rule でオフに設定できません。
サブドメインを他の Web サービスで使用している場合、
http→https 転送は別の方法で対処する必要があります。

更に ページルール・Page Rules を用いて次を設定します。
対象ドメインが example.net の場合、次の設定となります。

正しく設定されているか、curl を用いて確認して下さい。

PS C:\Users\balloon> curl.exe http://example.net/.well-known/acme-challenge -I
HTTP/1.1 404 Not Found

上記のように 404 Not Found が返ってこれば正常です。
301 や 302 が返ってくる場合は、設定がおかしいので確認して下さい。

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

日本語ドメインは使用できますか？

Punycode（xn-- ではじまる英数）で登録して使用できます。
サブドメイン.vercel.app も日本語で設定できます、
ただしプロジェクト名では -- が - に変換され、Punycode は使用できません。

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 やプログラミング言語でヘッダーを加えて下さい。

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

site:vercel.app 検索結果 | Google

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

そうではない開発向け URL プロジェクト-任意の英数-ユーザー.vercel.app や プロジェクト-ユーザー.vercel.app では
HTTP ヘッダに x-robots-tag: noindex が含まれているため、
クローラー（検索エンジンロボット）はこれを検索結果に入れる事はありません。
このため一般公開したくない場合は robots.txt や meta タグで拒否をする代わりに
--prod を付けない vercel コマンドで開発 URL を生成し使用する事が可能です。

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

▲ Deployments Deployment Types | Vercel Docs

毎回生成される URL　プｒゾイェクト-任意の英数-ユーザー.vercel.app や
コマンド vercel で生成された プロジェクト-ユーザー.vercel.app は
HTTP ヘッダに X-Robots-Tag: noindex を付与します。
そのため、Google などの収集対象になりません。
vercel --prod でもこれを含めた複数の URL を公開しますが、
サブドメイン.vercel.app または設定している独自ドメインの
公開用 URL のみが検索結果の対象となります。

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

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

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

動的に出力している場合は必要に応じて適切な転送したりエラー表示にするなど
ソース側で対処できるはずです。

独自ドメインを使用し プロジェクト.vercel.app などを使いたくない場合、
Vercel Web サイトのドメイン設定で転送の設定もできますので、
301・308 転送で目的の URL を参照するように設定して下さい。

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

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