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 は大きく仕様が異なるのでご注意下さい。


公式・関連サイト


プラン

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

2020年4月より価格体系が変わりました。
無料プラン(Hobby)は転送量などが無制限となりました。

Simpler Pricing | Vercel Blog
Pricing | Vercel

ただし、デプロイ回数が 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

それぞれ Web の Settings - Integration からアカウントの連携を行います。
更にプロジェクトでデプロイするリポジトリを選択します。


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 から追加した際、
設定するネームサーバが表示されます。2020年5月よりネームサーバが変更されています。

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

または CNAME での設定も可能ですが、主にサブドメイン向けです。

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

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

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

Introducing Wildcard Domains | Vercel Blog

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

ドメインをネームサーバで登録した場合、ネームサーバのレコード設定が行えます。
以前は Now CLI(Vercel CLI の旧称)のみ設定可能になっていましたが、
現在は Vercel の Web より Domains からレコード設定が可能です。

代わりに サブドメイン.vercel.app を使用する事もできます。
2020年6月までは サブドメイン.now.sh で、引き続き使用可能ですが、
後に サブドメイン.vercel.app へ統一される可能性があります。

Custom Domains | Vercel Docs

旧形式 サブドメイン.now.sh

ZEIT Now で採用されていた サブドメイン.now.sh は引き続き使用可能ですが、
将来的に使えなくなる可能性があり、
サブドメイン.vercel.app や独自ドメインに変更するのが無難と思われます。

サブドメイン.now.sh がすでに使用されている場合、
サブドメイン.vercel.app を他のプロジェクトで設定する事はできません。
安心してドメイン名を変更できます。

Vercel の Web より Domainsサブドメイン.vercel.app または独自ドメインを Add します。
従来使用していた サブドメイン.now.sh は Domains のページで
追加した サブドメイン.vercel.app または独自ドメインへ転送するよう設定可能です。
必要に応じてソースを修正し、再ビルドして下さい。


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

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

Redirecting Domains | Vercel Nlog


動作確認

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]"
    }
  }
}

※ 近く now-phpvercel-php へ変更予定です。

静的ファイルの出力は世界中の 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 | zeit/now

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

Discussions | zeit/now

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

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

Vercel Status