Vercel(vercel.com・vercel.app)

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

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

ZEIT is now Vercel | Vercel Blog

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

Vercel のサービスは v2 と v1 があります。このページでは v2 で説明しています。
v1 は大きく仕様が異なるのでご注意下さい。


公式・関連サイト


.now.sh の停止

URLs are becoming consistent | Vercel Blog

2021年2月20日を持って ~.now.sh の提供を終了し、
~.vercel.app へ統一される事が公開されました。
日本時間では 2月21日 になる可能性があります。

すぐに ~.vercel.app に変更したい場合、 Vercel Web サイト から目的のプロジェクトへ入り、
プロジェクト名 を選択します。キャプチャ画像・「Visit」・URL は Web サイトになります)
View Domains を選択して「mywebsite.com」部分に ~.vercel.app を追加して下さい。
この「Domains」ページでは、 ~.now.sh~.vercel.app へ転送する設定変更、
~.now.sh の即時削除も可能です。


プラン

Vercel は無料で使用できます。

2020年4月より価格体系が変わりました。

Simpler Pricing | Vercel Blog
Pricing | Vercel

ただし、2020年10月現在で次のような制限があります。

  • 独自ドメインの割り当て: 50 まで(.vercel.app を除く)
  • 転送量: 月 100GB まで
  • デプロイ回数: 24 時間で 100 回まで

これは悪用防止のためにあえて制限をかけているようです。
Serverless Functions はプログラミング言語を動作させる機能で、
HTML・画像ファイルなど、静的ファイルの表示では
Serverless Functions 関連の制限は対象外です。

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

Now CLI から Vercel CLI への変更

2020年5月、Now CLI は Vercel CLI へ変更されました。
コマンド名も now から vercel へ変更しています。

[email protected] | zeit/now

ZEIT・Now の時から Now CLI を使用していた場合は、
Now CLI をアンインストールし、代わりに Vercel CLI をインストールして下さい。

npm r -g now
npm i -g vercel

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

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

Domains | Vercel

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

CNAME での設定が現在は推奨に代わっています。

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

サブドメインなしの場合は CNAME の代わりに ALIAS・ANAME の場合がありますが、
ネームサーバサービスによってはこれらがサポートされていない場合もあります。

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

Introducing Wildcard Domains | Vercel Blog

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

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

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

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

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

代わりに サブドメイン.vercel.app を使用する事もできます。
2020年6月までは サブドメイン.now.sh で、引き続き使用可能ですが、
後に サブドメイン.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

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

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

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

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

動作確認

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

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

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

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


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

サイトの公開動作がデプロイとなります。
無料プラン(Hobby)の場合、24 時間で 100 回までとなっている事にご注意下さい。

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 などを自動認識してビルドしてくれます。


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

Supported Languages | Vercel Docs

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

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

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

{
  "routes": [
    { "src": "/(.*)",  "dest": "/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]"
    }
  },
  "routes": [
    { "src": "/(.*)", "dest": "/$1" },
    { "handle": "filesystem" },
    { "src": "/.*", "dest": "/404.html" }
  ]
}

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

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

routes と redirect・rewrites・header は同時に記載できません。
どちらかに統一して下さい。
routes が先に採用されていたため、routes で記載されているケースが多いです。

なお、プロジェクト名を設定する name
公開ドメイン名を設定する alias は現在非推奨になりました。

Configuration Reference | Vercel Docs

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


Q&A

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

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

Now in Tokyo | Vercel Blog
Smart CDN | Vercel

AWS または GCP を使用しています。東京は AWS です。
そのため、公開される Web の IP アドレスは常に可変します。

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

SSL は有効ですか?

はい、公開アドレスは必ず SSL が有効になります。
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 を発行するので、通常意識する必要ありません。

Not Found 表示を任意の表示にできますか?

vercel.jsonroutes の設定を追加する事で実現できます。
次はファイルが存在しない場合、ステータスコード 404 と共に 404.html を表示します。

{
  "routes": [
    { "src": "/(.*)", "dest": "/$1" },
    { "handle": "filesystem" },
    { "src": "/.*", "status": 404, "dest": "404.html" }
  ]
}

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

Web フォントなどの静的ファイルで使用する場合は、
vercel.jsonroutesheaders で設定する事になりますが、
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/.well-known/acme-challenge/*
  • SSL
    • Off
  • Automatic HTTPS Rewrites
    • Off

www.example.net/.well-known/acme-challenge/* も必要でしょう。

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

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

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

Issues - vercel/vercel | GitHub

質問については Discussions を使用できます。(Spectrum chat から GitHub 内へ変更されました)

Discussions - vercel/vercel | GitHub

また、vercel.com 内を参照している時に右上 Support から Vercel メンバーに連絡できます。
その後はメールアドレスでのやりとりになります。

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

Vercel Status