Nuxt 3 サイトを Vercel にデプロイする方法
Nuxt 3 では、様々なホスティングサービスへのデプロイを最小限の設定で行えるよう、あらかじめいくつかの選択肢が用意されています。
今回は、その中から Vercel を利用してサイトを公開する方法と、そのメリットをご紹介したいと思います。
Vercel とは
Vercel は Next.js の開発元でもある Vercel社が提供している、フロントエンド開発者向けの高機能ホスティングサービスです。
当然ながら最も親和性が高いのは Next.js との組み合わせですが、Vercel自体はNuxt・Svelte・Angularなど主要なJSフレームワークを一通りサポートしており、Nuxtでの開発体験も非常に優れたものとなっています。
Vercelを選ぶ利点は？
上述の Deployment Presets に入っているサービスリストの中でも、Nuxt 3 のサーバーエンジン Nitro のページで Zero-Config Provider として指定されているものがあり、Vercelはその1つです。（他には azure、netlify、stormkit）
Nuxt 3のデフォルト動作であるSSRモードは、サーバーサイドでの処理を必要とするため、本来であれば環境構築のための設定や準備が必要なのですが、これらのZero-Configなサービスを使えば、細かい設定なしですぐにサイトをデプロイすることができます。
Presetに入っているサービスであればドキュメントが用意されているので、どれであっても比較的簡単に進められますが、Zero-Config のサービスは圧倒的に設定が楽です。
Vercel へのデプロイ
Nuxt 3 リポジトリの作成
Nuxt 3のサイト構築そのものについてはこの記事では取り扱わないので、初期化のみ行います。
npx nuxi init nuxt-app
code nuxt-app
yarn install
なんと Nuxt 側で行う設定は何もありません。本当に Zero-Config ですね。
デプロイ先によっては環境変数で NITRO_PRESET を明示的に指定する必要があるのですが、Vercelにデプロイする場合はそれも自動で検出してくれるようです。
Vercelへのデプロイは GitHub 上のコードを通して行うので、GitHubにリポジトリを作成し、プッシュ＆コミットしておきましょう。（Private Repositoryでも構いません）
Vercel側の設定
Vercelのダッシュボードページを開き、New Project をクリックします。（Vercelアカウントがない方は作成してください）
Import Git Repository で、今回作成した Nuxt 3 のリポジトリを選択します。
一覧にない場合は Adjust GitHub App Permissions → リンクをクリックし、リポジトリのRead権限をVercelに渡すと選択できるようになります。
あとは特に設定を変更せずに「Deploy」を押します。
以上で作業は完了です！ 1分ほどでデプロイが反映されるはずです。
それ以外のドメイン設定や利用できる機能などはNuxt3に限らないものなので割愛します。
Nuxt3のデプロイ先にVercelを選ぶメリット
記事を読めばわかると思いますが、とにかく設定が簡単です。
私自身はこれまでに Firebase Hosting や Netlify へのデプロイも試したことがありますが、サイトの公開まで最も迷うことなく進めたのが Vercel でした。特に Push時の再デプロイなどを自動で設定してくれるのが心強く、GitHubの使い方がわかっていれば詰まるポイントはほとんどないはずです。
また、Vercel社がNuxtのMVPスポンサーという繋がりもあることから、Next.jsほどではないにしても、Nuxt3の今後の新機能について比較的早い段階からサポートを受けられる可能性は高いのではないかと感じています。
特に、Nuxt3上でのISRの将来的なサポートを公言しているというのは魅力です。他のホスティングサービスがISRにどこまで対応するかは未知数な部分があり、ISRを将来的に使いたいのであればVercelの優先度は高そうです。
無料プランの商用利用が許可されていないという懸念はありますが、後から別の環境に移行するのもそんなに難しくありません。気軽にNuxt3を試してみたい・サイトを公開してみたいという場合、まずは Vercel を使ってみると良いのではないでしょうか。
この記事がNuxt3でのサイト構築・公開を行おうとしている方の参考になれば幸いです！
参考
これまでに書いたNuxt3関連記事
Discussion