この記事は個人ブログと同じ内容です
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 です。
プレビュー環境で動作確認を行った後、本番用にビルド＆デプロイを実施すれば、ローカル環境から Vercel へデプロイ完了です。
まとめ
ローカル環境から Vercel へ web アプリケーションをデプロイするには、Vercel pull, Vercel build, Vercel deploy の 3 つのコマンドを実行すればデプロイできます。
例えば、環境切り替えも含め、これらのコマンドをまとめたシェルスクリプトなどを作成しておけば、デプロイはかなり簡単になります。
冒頭にも述べた通り、基本的には、Vercel と github を連携させるだけで CD 環境が構築されるため、通常なら使用しない場合も多いと思います。
ローカル環境からデプロイする必要が生じた際には、参考にしてみてください。
