Vercel へのビルド＆デプロイをローカル環境から行う

この記事は個人ブログと同じ内容です

www.ritolab.com

Vercel は、モダンなウェブアプリケーションの開発、デプロイ、ホスティングを簡単かつ効率的に行うためのクラウドプラットフォームです。AWS Amplify, Firebase Hosting, Netlify, Heroku あたりと同じ位置づけのイメージ。

基本的には、Vercel と Github を連携させるだけで、開発ブランチプッシュやプルリクエスト作成時にプレビュー環境を構築してくれたり、デフォルトブランチにマージしたら本番環境へデプロイしてくれたりなど、簡単に運用が行える点が魅力です。

そんな中、今回は、ローカル環境から WEB アプリを Build し、Vercel へのデプロイを実施してみます。

Vercel CLI

ローカル環境からビルドやデプロイを行うときは、Vercel CLI を用います。まずは Vercel CLI をインストールします。

Vercel CLI インストール

pnpm i -g Vercel

バージョン確認

Vercel --version

認証

Vercel CLIでは、リソースにアクセスしたり管理タスクを実行したりする前に、ログインして認証する必要があります。ターミナル環境では、手動入力が必要な Vercel login を使用できます。

ちなみに、手動入力が不可能な CI/CD 環境の場合は、トークンページでトークンを作成し、--token オプションを使用して認証することができます。

Vercel login

以下の選択肢が表示されるので、自身がいつもログインしている方法を選択します。

? Log in to Vercel
Continue with GitHub
Continue with GitLab
Continue with Bitbucket
Continue with Email
Continue with SAML Single Sign-On
─────────────────────────────────
Cancel

選択するとブラウザが開くのでログインすれば認証が完了します。

プロジェクト設定の取得

ローカル環境でビルドを実行するために、予めプロジェクトの設定を取得しておく必要があります。Vercel pull コマンドで、プロジェクト設定をローカルに作成します。

プロジェクトをすでに作成済みであればこのとき、環境変数も作成されます。プレビュー環境や本番環境で設定している環境変数が別々の場合も多々ありますが、--environment オプションをつけることで、指定した環境のプロジェクト設定を作成できます。

Vercel pull --environment=preview

Vercel pull --environment=production

Vercel pull コマンドを実行すると、以下のように対話型で進むので、適宜入力していきます。

? Set up “~/path/to/your-project-root”?（セットアッププロジェクトの確認）
? Which scope should contain your project?（組織・個人などスコープの選択）
? Link to existing project?（既存のプロジェクトとリンクさせるか）
? What’s the name of your existing project?（プロジェクト名の入力）

🔗  Linked to your-scope/your-project-name (created .Vercel and added it to .gitignore)
> Downloading `development` Environment Variables for Project your-project-name
✅  Created .Vercel/.env.development.local file  [176ms]

? Set up “~/path/to/your-project-root”?（セットアッププロジェクトの確認）
- Vercel pull コマンドを実行した、ローカル環境の現在位置にプロジェクト設定を保存することを確認
? Which scope should contain your project?（組織・個人などスコープの選択）
- Vercel のアカウントについて確認される。個人アカウントしかなければ 1 つだけだし、例えば有料でチームを作成していたりすれば、どれをスコープとして使用するかを選択できる
? Link to existing project?（既存のプロジェクトとリンクさせるか）
- すでに Vercel 上にプロジェクトがある場合は、y(yes) を入力し、次でプロジェクト名を入力する
- no の場合は、新しくプロジェクトが作成される
? What’s the name of your existing project?（プロジェクト名の入力）
- リンクさせるプロジェクト名を入力

Vercel pull が完了すると、.Vercel/ ディレクトリが作成され、その中に環境変数ファイルと project.json が作成されます。

.Vercel
├── .env.xxx.local
└── project.json

ビルド

Vercel build コマンドを使用して、ローカル環境で Vercel プロジェクトをビルドします。

Vercel build コマンドは、Vercel プロジェクトをローカル環境または独自の CI 環境でビルドするために使用できます。

# プレビュー環境用ビルド
Vercel build

# 本番環境用ビルド
Vercel build --prod

ちなみにこのコマンドは、ビルドエラー時のメッセージをローカル環境で受け取れるので、普段クラウドでビルド＆デプロイしていたとしても、クラウド上でのエラーの原因調査など、Vercel プロジェクトのデバッグにも役立ちます。

ビルド成果物は、Build Output API に従って .Vercel/output ディレクトリに配置されます。

.Vercel
├── output/ # ここにビルドされたソースコードが配置される
├── .env.xxx.local
└── project.json

デプロイ

ビルドができたので、これを Vercel へデプロイします。

# プレビュー環境用デプロイ
Vercel deploy --prebuilt

# 本番環境用デプロイ
Vercel deploy --prebuilt --prod

--prebuilt オプションをつけ、ローカル環境のビルド済みソースをデプロイします。

ビルドコマンドもそうですが、--prod オプションを付けなければ、プレビュー環境用のデプロイになります。

% Vercel deploy --prebuilt

Vercel CLI 36.0.0
🔍  Inspect: https://Vercel.com/aaaa/bbbb/cccc [2m]
✅  Preview: https://xxxxxxx.Vercel.app [2m]
📝  To deploy to production (xxxxxxx.net +1), run `Vercel --prod`

デプロイ URL とプレビューの URL が表示されるので、デプロイが終わったらアクセスすると、動作確認ができます。

ここで示されるデプロイ URL とプレビューの URL は、Github プルリクエスト時に提示されるものと同じ URL です。