Vercel CLI 使ってみる

以前の Zeit Now は Vercel に名称変更されて、現在もサービス提供されている。Vercel が提供する Vercel CLI を使ってみたのでメモ。

• Download Vercel CLI – Vercel

まずは Vercel CLI をインストールする。npm でグローバルインストール。

$ npm install -g vercel

続いて、コマンドラインから Vercel アカウントでログインする。ローカルの .gitconfig や、作業ディレクトリがクローンしている GitHub アカウントなんかがあると、自動的に Vercel と連携している GitHub アカウントを特定して、その登録メールアドレス宛にメールが投げられる。

# メルアドは指定していないが自動的に特定してくれる
$ vercel login
Vercel CLI 20.1.2
We sent an email to XXX@example.com. Please follow the steps provided inside it and make sure the security code matches Wonderful Balinese.

# 届いたメールからログイン認証する

✔ Email confirmed
Congratulations! You are now logged in. In order to deploy something, run `vercel`.
💡  Connect your Git Repositories to deploy every branch push automatically (https://vercel.link/git).

届いたメールからログイン認証するとコンソール出力が進んでログインが完了する。

続いて、作業ディレクトリで vercel dev コマンドを叩いてみる。初回は色々聞かれる。

$ vercel dev
Vercel CLI 20.1.2 dev (beta) — https://vercel.com/feedback

# 設定対象の作業ディレクトリの確認
? Set up and develop "~/Documents/Dev/GitHub/example-repository"? [Y/n] y

# アカウント名の確認
? Which scope should contain your project? Neos21

# Vercel 上にデプロイ済のプロジェクトと連携するかどうかの確認・今回は新規プロジェクトなので「n」で回答
? Link to existing project? [y/N] n

# プロジェクト名を入れる。package.json などがあればそれから自動的にサジェストが効く
? What's your project's name?  example-repository

# ディレクトリ指定
? In which directory is your code located? ./

# ココで、配下のソースコードからフレームワークを特定してもらえる
# 今回は React ベースのプロジェクトを連携したので、次のようにビルドコマンドなどが特定された
Auto-detected Project Settings (Create React App):
- Build Command: `npm run build` or `react-scripts build`
- Output Directory: build
- Development Command: react-scripts start

# 上述の設定で良いか？と聞かれている。「n」で良いのだが、間違えて「y」と答えてしまった
? Want to override the settings? [y/N] y

# 変更したいところを選択して〜と言われているので、何も選択しないで終えた
? Which settings would you like to overwrite (select multiple)? None

# Vercel 上にプロジェクトが作られ、紐付けが自動的に行われる
🔗  Linked to XXX/example-repository (created .vercel and added it to .gitignore)
> Running Dev Command "react-scripts start"
ℹ ｢wds｣: Project is running at http://192.168.1.13/
ℹ ｢wds｣: webpack output is served from
ℹ ｢wds｣: Content not from webpack is served from /Users/Neo/Documents/Dev/GitHub/example-reposiory/public
ℹ ｢wds｣: 404s will fallback to /
Starting the development server...

> Ready! Available at http://localhost:3000
# このままコンソール出力が止まり、開発サーバが起動している

初回は色々聞かれるが、基本はデフォルトのままで良い。プロジェクトで扱っているソースコードが何のフレームワークをベースにしているのか自動的に特定してくれて、ライブリロード開発やビルドのコマンドをラップしてくれる。

セットアップが終わると ./.vercel/ ディレクトリが出来ていて、中に色々保存されているが、このディレクトリは Git 管理しなくて良い。

以降は $ vercel dev コマンドを叩くだけで、ライブリロード開発環境が起動する。このコマンドは、例えば React の react-scripts start コマンドをラップしてくれるだけではなく、Vercel Serverless Functions をローカル起動してくれるのだ。

• 参考：Serverless Functions - Vercel Documentation

すなわち、./api/ ディレクトリ配下に置いておいた Lambda ベースのコードがローカルで実行できるので、API 込みで動作確認ができるのだ。Netlify Functions でいうと netlify-lambda パッケージ相当のことができるワケだ。

こんな感じで、Vercel にデプロイする前提のアプリの開発がだいぶ楽になった。