【Nuxt.js】NuxtアプリをVercel/Netlifyにデプロイする方法

JavaScript
2022.11.24

こんにちは、かつコーチです。

ローカルで動くようになったNuxtアプリを、いよいよ世界に公開したいというタイミングだと思います。

Nuxtアプリのデプロイ先としてよく選ばれるのが、VercelとNetlifyという2つのホスティングサービスです。

どちらも無料枠でGit連携による自動デプロイができますが、細かい挙動や設定方法に違いがあります。

この記事では、両サービスへのデプロイ手順を比較しながら、環境変数の設定方法まで解説します。

デプロイとは？

デプロイとは何か

デプロイとは、手元のパソコンで作ったアプリケーションを、インターネット上の誰でもアクセスできるサーバーに配置することです。

Nuxtアプリの場合、npm run buildでビルドした成果物をサーバーに配置し、実際にリクエストを処理できる状態にする作業を指します。

VercelとNetlifyとは何か

Vercelは、Next.jsの開発元が提供するホスティングサービスです。

Netlifyは、静的サイトやJamstack構成のホスティングで古くから使われているサービスです。

どちらもNuxtのNitro（Nuxtのサーバーエンジン）に対応したプリセットを持っており、追加設定なしでデプロイできるように作られています。

基本の書き方・実装手順

手順1：GitHubリポジトリを準備する

まずはNuxtプロジェクトをGitHubにpushしておきます。

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/your-name/your-nuxt-app.git
git push -u origin main

VercelもNetlifyも、GitHubリポジトリと連携してpushのたびに自動デプロイする仕組みが基本になります。

手順2：Vercelでデプロイする

Vercelのダッシュボードから「Add New Project」を選び、対象のGitHubリポジトリをインポートします。

Nuxtプロジェクトの場合、Vercelは自動的にNuxtだと検知し、以下のビルド設定を自動入力してくれます。

# Vercelが自動設定するビルドコマンド
Build Command: nuxt build
Output Directory: .output/public

CLIから直接デプロイすることもできます。

npm install -g vercel
vercel

初回実行時にプロジェクト名や設定を対話形式で聞かれるので、基本的にはEnterキーで進めれば問題ありません。

手順3：Netlifyでデプロイする

Netlifyの場合も、ダッシュボードから「Add new site」→「Import an existing project」でGitHubリポジトリを選びます。

# Netlifyが自動設定するビルドコマンド
Build command: npm run build
Publish directory: .output/public

CLIを使う場合は以下の手順です。

npm install -g netlify-cli
netlify login
netlify deploy --prod

Netlifyはnetlify.tomlをリポジトリのルートに置くことで、ビルド設定を明示的に管理できます。

# netlify.toml
[build]

command = “npm run build” publish = “.output/public”

手順4：VercelとNetlifyの比較

どちらを選ぶか迷う場合は、以下の観点で比較すると判断しやすくなります。

比較項目VercelNetlify
Nuxt対応プリセット自動検知（追加設定ほぼ不要）プリセット自動検知（netlify.toml推奨）
サーバーサイド処理（Nitro）Vercel Functionsとして自動デプロイNetlify Functionsとして自動デプロイ
プレビューデプロイプルリクエストごとに自動生成プルリクエストごとに自動生成
無料枠の帯域100GB/月（Hobbyプラン）100GB/月（Starterプラン）
独自ドメイン設定無料無料
得意な構成フルスタック・Server Actions系静的サイト・フォーム機能連携

判断軸としては、Vue/Nuxtのフルスタック機能（server/apiなど）を積極的に使うならVercel、静的サイト中心でNetlify独自のフォーム機能なども使いたいならNetlify、という選び方が目安になります。

迷ったらどちらも無料枠でほぼ同じ体験ができるので、実際に両方デプロイして比較してみるのもおすすめです。

つまずきやすい設定・注意点

Nuxtプロジェクトのpackage.jsonに"type": "module"が設定されているか確認してください。

これが抜けていると、一部の環境でビルド時にESModule関連のエラーが出ることがあります。

よくあるつまずきポイント・エラー対処

環境変数を設定し忘れて本番だけAPI接続に失敗する

私が実際にはまったのが、この環境変数の設定漏れでした。

❌ Before：.envファイルだけに環境変数を書いてデプロイする

# .env（ローカルのみに存在）
NUXT_PUBLIC_API_BASE=https://api.example.com
NUXT_SESSION_PASSWORD=local-only-secret-key

.envファイルは.gitignoreに含めるのが基本なので、GitHubにはpushされません。

そのままVercelにデプロイしたところ、ローカルでは問題なく動いていたAPI通信が、本番環境ではFailed to fetchというエラーで軒並み失敗しました。

原因は単純で、Vercel側のダッシュボードに環境変数を一切登録していなかったため、本番ビルドではNUXT_PUBLIC_API_BASEが空文字になっていたのです。

✅ After：ホスティングサービスのダッシュボードで環境変数を登録する

Vercelの場合は「Settings」→「Environment Variables」から、Netlifyの場合は「Site configuration」→「Environment variables」から、それぞれ同じキー・値を登録します。

# Vercel / Netlify のダッシュボードに登録する値（例）
NUXT_PUBLIC_API_BASE=https://api.example.com
NUXT_SESSION_PASSWORD=production-secret-key-32chars-or-more

nuxt.config.ts側では、runtimeConfigを通して環境変数を参照する形にしておくと、ローカルと本番で同じコードのまま値だけ切り替えられます。

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    sessionPassword: process.env.NUXT_SESSION_PASSWORD,
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE,
    },
  },
})

環境変数を登録した後は、必ず「Redeploy」を実行して反映させる必要がある点も忘れがちなので注意してください。

環境変数を追加しただけでは、既存のビルドには反映されません。

応用・一歩先の使い方

プレビューデプロイでレビューを効率化する

VercelもNetlifyも、プルリクエストを作成するたびに専用のプレビューURLを自動発行してくれます。

このURLをチームメンバーに共有すれば、コードだけでなく実際の動作画面を見ながらレビューできます。

# プルリクエスト作成時にコメントで自動投稿される例
Preview: https://your-app-git-feature-branch-yourteam.vercel.app

デザイナーやディレクターなど、コードを読まないメンバーとのレビューフローが一気に楽になります。

カスタムドメインとリダイレクト設定

独自ドメインを設定した後は、wwwありなしのURLを統一するリダイレクト設定も忘れずに行いましょう。

# netlify.toml
[[redirects]]
  from = "https://www.your-domain.com/*"
  to = "https://your-domain.com/:splat"
  status = 301
  force = true

これを設定しないと、同じコンテンツが複数のURLで存在する状態になり、SEO評価が分散してしまう可能性があります。

まとめ

この記事のポイント

  • VercelもNetlifyもNuxtのNitroに対応しており、GitHub連携だけで自動デプロイできる
  • Vercelはフルスタック構成、Netlifyは静的サイト・フォーム連携に強みがある
  • 環境変数は.envではなく、各サービスのダッシュボードに個別で登録する必要がある
  • 環境変数を追加・変更した後は、必ず再デプロイして反映させる
  • プレビューデプロイやリダイレクト設定を活用すると、レビューやSEO面でも運用が楽になる

次に読むべき記事

→ 次の記事：nuxt-auth-utilsで認証機能を実装する

タグ: Nuxt.js, 初心者向け, デプロイ

タイトルとURLをコピーしました