Vercel CLIを使用して、ローカル環境からVercelプロジェクトのビルドとデプロイを行う方法を解説。認証、設定取得、ビルド、デプロイの手順を詳しく紹介。

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

<h2 id="contents">contents</h2>
<ol>
<li><a href="#vercel">Vercel</a></li>
<li><a href="#vercel-cli">Vercel CLI</a></li>
<li><a href="#%E8%AA%8D%E8%A8%BC">認証</a></li>
<li><a href="#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E8%A8%AD%E5%AE%9A%E3%81%AE%E5%8F%96%E5%BE%97">プロジェクト設定の取得</a></li>
<li><a href="#%E3%83%93%E3%83%AB%E3%83%89">ビルド</a></li>
<li><a href="#%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4">デプロイ</a></li>
</ol>
<h2 id="vercel">Vercel</h2>
<p><a href="https://Vercel.com/" target="_blank" rel="noopener">Vercel</a> は、モダンなウェブアプリケーションの開発、デプロイ、ホスティングを簡単かつ効率的に行うためのクラウドプラットフォームです。AWS Amplify, Firebase Hosting, Netlify, Heroku あたりと同じ位置づけのイメージ。</p>
<p>基本的には、Vercel と Github を連携させるだけで、開発ブランチプッシュやプルリクエスト作成時にプレビュー環境を構築してくれたり、デフォルトブランチにマージしたら本番環境へデプロイしてくれたりなど、簡単に運用が行える点が魅力です。</p>
<p>そんな中、今回は、ローカル環境から WEB アプリを Build し、Vercel へのデプロイを実施してみます。</p>
<h2 id="vercel-cli">Vercel CLI</h2>
<p>ローカル環境からビルドやデプロイを行うときは、<a href="https://vercel.com/docs/cli" target="_blank" rel="noopener">Vercel CLI</a> を用います。まずは Vercel CLI をインストールします。</p>
<p>Vercel CLI インストール</p>
<pre><code class="hljs language-shell">pnpm i -g Vercel
</code></pre>
<p>バージョン確認</p>
<pre><code class="hljs language-shell">Vercel --version
</code></pre>
<h2 id="認証">認証</h2>
<p>Vercel CLIでは、リソースにアクセスしたり管理タスクを実行したりする前に、ログインして認証する必要があります。ターミナル環境では、手動入力が必要な Vercel login を使用できます。</p>
<p>ちなみに、手動入力が不可能な CI/CD 環境の場合は、トークンページでトークンを作成し、--token オプションを使用して認証することができます。</p>
<pre><code class="hljs language-shell">Vercel login
</code></pre>
<p>以下の選択肢が表示されるので、自身がいつもログインしている方法を選択します。</p>
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/265/01.png" width="600" height="202" alt="ターミナル画面"></div>
<pre><code class="hljs language-shell">? Log in to Vercel
Continue with GitHub
Continue with GitLab
Continue with Bitbucket
Continue with Email
Continue with SAML Single Sign-On
─────────────────────────────────
Cancel
</code></pre>
<p>選択するとブラウザが開くのでログインすれば認証が完了します。</p>
<h2 id="プロジェクト設定の取得">プロジェクト設定の取得</h2>
<p>ローカル環境でビルドを実行するために、予めプロジェクトの設定を取得しておく必要があります。<a href="https://Vercel.com/docs/cli/pull" target="_blank" rel="noopener">Vercel pull コマンド</a>で、プロジェクト設定をローカルに作成します。</p>
<p>プロジェクトをすでに作成済みであればこのとき、環境変数も作成されます。プレビュー環境や本番環境で設定している環境変数が別々の場合も多々ありますが、<code>--environment</code> オプションをつけることで、指定した環境のプロジェクト設定を作成できます。</p>
<pre><code class="hljs language-shell">Vercel pull --environment=preview

Vercel pull --environment=production
</code></pre>
<p><strong>Vercel pull</strong> コマンドを実行すると、以下のように対話型で進むので、適宜入力していきます。</p>
<pre><code class="hljs language-shell">? 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)
<span class="hljs-meta prompt_">> </span><span class="bash">Downloading `development` Environment Variables <span class="hljs-keyword">for</span> Project your-project-name</span>
✅  Created .Vercel/.env.development.local file  [176ms]
</code></pre>
<ul>
<li>? Set up “~/path/to/your-project-root”?（セットアッププロジェクトの確認）
<ul>
<li><strong>Vercel pull</strong> コマンドを実行した、ローカル環境の現在位置にプロジェクト設定を保存することを確認</li>
</ul>
</li>
<li>? Which scope should contain your project?（組織・個人などスコープの選択）
<ul>
<li>Vercel のアカウントについて確認される。個人アカウントしかなければ 1 つだけだし、例えば有料でチームを作成していたりすれば、どれをスコープとして使用するかを選択できる</li>
</ul>
</li>
<li>? Link to existing project?（既存のプロジェクトとリンクさせるか）
<ul>
<li>すでに Vercel 上にプロジェクトがある場合は、y(yes) を入力し、次でプロジェクト名を入力する</li>
<li>no の場合は、新しくプロジェクトが作成される</li>
</ul>
</li>
<li>? What’s the name of your existing project?（プロジェクト名の入力）
<ul>
<li>リンクさせるプロジェクト名を入力</li>
</ul>
</li>
</ul>
<p><strong>Vercel pull</strong> が完了すると、<strong>.Vercel/</strong> ディレクトリが作成され、その中に環境変数ファイルと project.json が作成されます。</p>
<pre><code class="hljs language-shell">.Vercel
├── .env.xxx.local
└── project.json
</code></pre>
<h2 id="ビルド">ビルド</h2>
<p><a href="https://Vercel.com/docs/cli/build" target="_blank" rel="noopener">Vercel build コマンド</a>を使用して、ローカル環境で Vercel プロジェクトをビルドします。</p>
<p>Vercel build コマンドは、Vercel プロジェクトをローカル環境または独自の CI 環境でビルドするために使用できます。</p>
<pre><code class="hljs language-shell"><span class="hljs-meta prompt_"># </span><span class="bash">プレビュー環境用ビルド</span>
Vercel build
<span class="hljs-meta prompt_">
# </span><span class="bash">本番環境用ビルド</span>
Vercel build --prod
</code></pre>
<p>ちなみにこのコマンドは、ビルドエラー時のメッセージをローカル環境で受け取れるので、普段クラウドでビルド＆デプロイしていたとしても、クラウド上でのエラーの原因調査など、Vercel プロジェクトのデバッグにも役立ちます。</p>
<p>ビルド成果物は、Build Output API に従って .Vercel/output ディレクトリに配置されます。</p>
<pre><code class="hljs language-shell">.Vercel
├── output/ # ここにビルドされたソースコードが配置される
├── .env.xxx.local
└── project.json
</code></pre>
<h2 id="デプロイ">デプロイ</h2>
<p>ビルドができたので、これを Vercel へデプロイします。</p>
<pre><code class="hljs language-shell"><span class="hljs-meta prompt_"># </span><span class="bash">プレビュー環境用デプロイ</span>
Vercel deploy --prebuilt
<span class="hljs-meta prompt_">
# </span><span class="bash">本番環境用デプロイ</span>
Vercel deploy --prebuilt --prod
</code></pre>
<p><strong>--prebuilt</strong> オプションをつけ、ローカル環境のビルド済みソースをデプロイします。</p>
<p>ビルドコマンドもそうですが、<strong>--prod</strong> オプションを付けなければ、プレビュー環境用のデプロイになります。</p>
<pre><code class="hljs language-shell"><span class="hljs-meta prompt_">% </span><span class="bash">Vercel deploy --prebuilt</span>

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`
</code></pre>
<p>デプロイ URL とプレビューの URL が表示されるので、デプロイが終わったらアクセスすると、動作確認ができます。</p>
<p>ここで示される デプロイ URL とプレビューの URL は、Github プルリクエスト時に提示されるものと同じ URL です。</p>
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/265/02.png" width="842" height="203" alt="Github"></div>
<p>プレビュー環境で動作確認を行った後、本番用にビルド＆デプロイを実施すれば、ローカル環境から Vercel へデプロイ完了です。</p>
<h2 id="まとめ">まとめ</h2>
<p>ローカル環境から Vercel へ web アプリケーションをデプロイするには、Vercel pull, Vercel build, Vercel deploy の 3 つのコマンドを実行すればデプロイできます。</p>
<p>例えば、環境切り替えも含め、これらのコマンドをまとめたシェルスクリプトなどを作成しておけば、デプロイはかなり簡単になります。</p>
<p>冒頭にも述べた通り、基本的には、Vercel と github を連携させるだけで CD 環境が構築されるため、通常なら使用しない場合も多いと思います。</p>
<p>ローカル環境からデプロイする必要が生じた際には、参考にしてみてください。</p>

<h2 id="contents">contents</h2>
<ol>
<li><a href="#vercel">Vercel</a></li>
<li><a href="#vercel-cli">Vercel CLI</a></li>
<li><a href="#%E8%AA%8D%E8%A8%BC">認証</a></li>
<li><a href="#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E8%A8%AD%E5%AE%9A%E3%81%AE%E5%8F%96%E5%BE%97">プロジェクト設定の取得</a></li>
<li><a href="#%E3%83%93%E3%83%AB%E3%83%89">ビルド</a></li>
<li><a href="#%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4">デプロイ</a></li>
</ol>
<h2 id="vercel">Vercel</h2>
<p><a href="https://Vercel.com/" target="_blank" rel="noopener">Vercel</a> は、モダンなウェブアプリケーションの開発、デプロイ、ホスティングを簡単かつ効率的に行うためのクラウドプラットフォームです。AWS Amplify, Firebase Hosting, Netlify, Heroku あたりと同じ位置づけのイメージ。</p>
<p>基本的には、Vercel と Github を連携させるだけで、開発ブランチプッシュやプルリクエスト作成時にプレビュー環境を構築してくれたり、デフォルトブランチにマージしたら本番環境へデプロイしてくれたりなど、簡単に運用が行える点が魅力です。</p>
<p>そんな中、今回は、ローカル環境から WEB アプリを Build し、Vercel へのデプロイを実施してみます。</p>
<h2 id="vercel-cli">Vercel CLI</h2>
<p>ローカル環境からビルドやデプロイを行うときは、<a href="https://vercel.com/docs/cli" target="_blank" rel="noopener">Vercel CLI</a> を用います。まずは Vercel CLI をインストールします。</p>
<p>Vercel CLI インストール</p>
<pre><code class="hljs language-shell">pnpm i -g Vercel
</code></pre>
<p>バージョン確認</p>
<pre><code class="hljs language-shell">Vercel --version
</code></pre>
<h2 id="認証">認証</h2>
<p>Vercel CLIでは、リソースにアクセスしたり管理タスクを実行したりする前に、ログインして認証する必要があります。ターミナル環境では、手動入力が必要な Vercel login を使用できます。</p>
<p>ちなみに、手動入力が不可能な CI/CD 環境の場合は、トークンページでトークンを作成し、--token オプションを使用して認証することができます。</p>
<pre><code class="hljs language-shell">Vercel login
</code></pre>
<p>以下の選択肢が表示されるので、自身がいつもログインしている方法を選択します。</p>
<div class="img_wrap"><img src="/images/posts/265/01.png" width="600" height="202" alt="ターミナル画面"></div>
<pre><code class="hljs language-shell">? Log in to Vercel
Continue with GitHub
Continue with GitLab
Continue with Bitbucket
Continue with Email
Continue with SAML Single Sign-On
─────────────────────────────────
Cancel
</code></pre>
<p>選択するとブラウザが開くのでログインすれば認証が完了します。</p>
<h2 id="プロジェクト設定の取得">プロジェクト設定の取得</h2>
<p>ローカル環境でビルドを実行するために、予めプロジェクトの設定を取得しておく必要があります。<a href="https://Vercel.com/docs/cli/pull" target="_blank" rel="noopener">Vercel pull コマンド</a>で、プロジェクト設定をローカルに作成します。</p>
<p>プロジェクトをすでに作成済みであればこのとき、環境変数も作成されます。プレビュー環境や本番環境で設定している環境変数が別々の場合も多々ありますが、<code>--environment</code> オプションをつけることで、指定した環境のプロジェクト設定を作成できます。</p>
<pre><code class="hljs language-shell">Vercel pull --environment=preview

Vercel pull --environment=production
</code></pre>
<p><strong>Vercel pull</strong> コマンドを実行すると、以下のように対話型で進むので、適宜入力していきます。</p>
<pre><code class="hljs language-shell">? 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)
<span class="hljs-meta prompt_">> </span><span class="bash">Downloading `development` Environment Variables <span class="hljs-keyword">for</span> Project your-project-name</span>
✅  Created .Vercel/.env.development.local file  [176ms]
</code></pre>
<ul>
<li>? Set up “~/path/to/your-project-root”?（セットアッププロジェクトの確認）
<ul>
<li><strong>Vercel pull</strong> コマンドを実行した、ローカル環境の現在位置にプロジェクト設定を保存することを確認</li>
</ul>
</li>
<li>? Which scope should contain your project?（組織・個人などスコープの選択）
<ul>
<li>Vercel のアカウントについて確認される。個人アカウントしかなければ 1 つだけだし、例えば有料でチームを作成していたりすれば、どれをスコープとして使用するかを選択できる</li>
</ul>
</li>
<li>? Link to existing project?（既存のプロジェクトとリンクさせるか）
<ul>
<li>すでに Vercel 上にプロジェクトがある場合は、y(yes) を入力し、次でプロジェクト名を入力する</li>
<li>no の場合は、新しくプロジェクトが作成される</li>
</ul>
</li>
<li>? What’s the name of your existing project?（プロジェクト名の入力）
<ul>
<li>リンクさせるプロジェクト名を入力</li>
</ul>
</li>
</ul>
<p><strong>Vercel pull</strong> が完了すると、<strong>.Vercel/</strong> ディレクトリが作成され、その中に環境変数ファイルと project.json が作成されます。</p>
<pre><code class="hljs language-shell">.Vercel
├── .env.xxx.local
└── project.json
</code></pre>
<h2 id="ビルド">ビルド</h2>
<p><a href="https://Vercel.com/docs/cli/build" target="_blank" rel="noopener">Vercel build コマンド</a>を使用して、ローカル環境で Vercel プロジェクトをビルドします。</p>
<p>Vercel build コマンドは、Vercel プロジェクトをローカル環境または独自の CI 環境でビルドするために使用できます。</p>
<pre><code class="hljs language-shell"><span class="hljs-meta prompt_"># </span><span class="bash">プレビュー環境用ビルド</span>
Vercel build
<span class="hljs-meta prompt_">
# </span><span class="bash">本番環境用ビルド</span>
Vercel build --prod
</code></pre>
<p>ちなみにこのコマンドは、ビルドエラー時のメッセージをローカル環境で受け取れるので、普段クラウドでビルド＆デプロイしていたとしても、クラウド上でのエラーの原因調査など、Vercel プロジェクトのデバッグにも役立ちます。</p>
<p>ビルド成果物は、Build Output API に従って .Vercel/output ディレクトリに配置されます。</p>
<pre><code class="hljs language-shell">.Vercel
├── output/ # ここにビルドされたソースコードが配置される
├── .env.xxx.local
└── project.json
</code></pre>
<h2 id="デプロイ">デプロイ</h2>
<p>ビルドができたので、これを Vercel へデプロイします。</p>
<pre><code class="hljs language-shell"><span class="hljs-meta prompt_"># </span><span class="bash">プレビュー環境用デプロイ</span>
Vercel deploy --prebuilt
<span class="hljs-meta prompt_">
# </span><span class="bash">本番環境用デプロイ</span>
Vercel deploy --prebuilt --prod
</code></pre>
<p><strong>--prebuilt</strong> オプションをつけ、ローカル環境のビルド済みソースをデプロイします。</p>
<p>ビルドコマンドもそうですが、<strong>--prod</strong> オプションを付けなければ、プレビュー環境用のデプロイになります。</p>
<pre><code class="hljs language-shell"><span class="hljs-meta prompt_">% </span><span class="bash">Vercel deploy --prebuilt</span>

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`
</code></pre>
<p>デプロイ URL とプレビューの URL が表示されるので、デプロイが終わったらアクセスすると、動作確認ができます。</p>
<p>ここで示される デプロイ URL とプレビューの URL は、Github プルリクエスト時に提示されるものと同じ URL です。</p>
<div class="img_wrap"><img src="/images/posts/265/02.png" width="842" height="203" alt="Github"></div>
<p>プレビュー環境で動作確認を行った後、本番用にビルド＆デプロイを実施すれば、ローカル環境から Vercel へデプロイ完了です。</p>
<h2 id="まとめ">まとめ</h2>
<p>ローカル環境から Vercel へ web アプリケーションをデプロイするには、Vercel pull, Vercel build, Vercel deploy の 3 つのコマンドを実行すればデプロイできます。</p>
<p>例えば、環境切り替えも含め、これらのコマンドをまとめたシェルスクリプトなどを作成しておけば、デプロイはかなり簡単になります。</p>
<p>冒頭にも述べた通り、基本的には、Vercel と github を連携させるだけで CD 環境が構築されるため、通常なら使用しない場合も多いと思います。</p>
<p>ローカル環境からデプロイする必要が生じた際には、参考にしてみてください。</p>

Author