バッチャンネル

Next.jsアプリをNetlifyで自動デプロイ！完全運用ガイド

NetlifyNext.jsデプロイCI/CDWeb開発

NetlifyとGitHub Actionsを使ったNext.jsアプリの自動デプロイから継続的な運用まで、実践的な手順を詳しく解説します。

Next.js アプリを Netlify で自動デプロイ！完全運用ガイド

現代の Web 開発では、コードをプッシュするだけで自動的にデプロイされる環境が必須です。この記事では、Next.js アプリケーションを Netlify で自動デプロイし、継続的に運用するための完全ガイドをお届けします。

🚀 Netlify 自動デプロイの概要

なぜ Netlify なのか？

  • 簡単な設定: GitHub と連携するだけで自動デプロイ
  • 高速 CDN: 世界中で高速配信
  • 無料枠: 個人プロジェクトには十分
  • Next.js 対応: 専用プラグインで最適化

基本的な構成

graph LR
    A[GitHub] --> B[GitHub Actions]
    B --> C[Netlify]
    C --> D[本番サイト]

📋 初期設定手順

1. Netlify プロジェクトの作成

# Netlify CLI のインストール
npm install -g netlify-cli

# ログイン
netlify login

# プロジェクト作成
netlify sites:create --name your-project-name

2. netlify.toml の設定

[build]
  publish = ".next"
  command = "pnpm run build"

[build.environment]
  NODE_VERSION = "18"

[[plugins]]
  package = "@netlify/plugin-nextjs"

[functions]
  directory = "netlify/functions"

3. GitHub Actions ワークフロー

name: Deploy to Netlify

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "18"

      - name: Setup pnpm
        uses: pnpm/action-setup@v4
        with:
          version: 8

      - name: Install dependencies
        run: pnpm install

      - name: Build project
        run: pnpm run build

      - name: Deploy to Netlify
        run: |
          if [ "${{ github.ref }}" = "refs/heads/main" ]; then
            netlify deploy --prod --message "Production deploy"
          else
            netlify deploy --message "Preview deploy"
          fi
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

🔐 GitHub Secrets の設定

必要な Secret

  1. NETLIFY_AUTH_TOKEN

    • Netlify Dashboard → User settings → Personal access tokens
    • 新しいトークンを作成してコピー

  2. NETLIFY_SITE_ID

    • プロジェクトの Site ID を設定

設定手順

  1. GitHub リポジトリ → Settings → Secrets and variables → Actions
  2. "New repository secret" をクリック
  3. 上記の 2 つの Secret を追加

🚀 継続的デプロイ運用手順

日常的な開発フロー

# 1. 最新のmainブランチを取得
git checkout main
git pull origin main

# 2. 機能ブランチを作成
git checkout -b feature/新機能名

# 3. 開発作業
pnpm dev  # 開発サーバー起動

# 4. ローカルでビルドテスト
pnpm build  # エラーがないか確認

# 5. 変更をコミット
git add .
git commit -m "feat: 新機能の追加"

# 6. ブランチをプッシュ（プレビューデプロイが自動実行）
git push origin feature/新機能名

# 7. プルリクエストを作成
# GitHub上でプルリクエストを作成

# 8. レビュー完了後、mainにマージ（本番デプロイが自動実行）

手動デプロイ操作

本番環境への手動デプロイ

# ローカルから直接本番デプロイ
netlify deploy --prod

# ビルドも含めて実行
netlify deploy --prod --build

# デプロイメッセージ付き
netlify deploy --prod --message "v1.2.0リリース"

プレビュー環境への手動デプロイ

# プレビューデプロイ
netlify deploy

# ビルド込みプレビューデプロイ
netlify deploy --build

# 特定の機能をテストする際
netlify deploy --message "機能テスト: 新しいブログ機能"

🌍 環境別デプロイ戦略

ブランチごとのデプロイ設定

  • mainブランチ: 本番環境に自動デプロイ
  • プルリクエスト: プレビュー環境に自動デプロイ
  • その他のブランチ: 手動デプロイのみ

デプロイ URL の種類

# 本番URL
https://your-project.netlify.app

# プレビューURL（例）
https://deploy-preview-123--your-project.netlify.app

# ブランチデプロイURL（例）
https://feature-branch--your-project.netlify.app

🔧 環境変数の管理

Netlify 環境変数の設定

# 環境変数を設定
netlify env:set NODE_ENV production
netlify env:set API_URL https://api.example.com

# 環境変数を確認
netlify env:list

# 環境変数を削除
netlify env:unset VARIABLE_NAME

開発とプロダクションでの環境変数分離

  1. Netlify Dashboard での設定

    • プロジェクト設定 → Environment variables
    • コンテキスト別（Deploy preview / Branch deploy / Production）で設定可能

  2. ローカル開発用

   # .env.local ファイルを作成（.gitignoreに含める）
   NEXT_PUBLIC_API_URL=http://localhost:3001
   DATABASE_URL=your_local_database_url

📊 監視とメンテナンス

デプロイ状況の確認

# 最新のデプロイ状況
netlify status

# デプロイ履歴
netlify deploy:list

# 特定のデプロイ詳細
netlify deploy:show DEPLOY_ID

パフォーマンステスト

# Lighthouse テスト
npm install -g lighthouse
lighthouse https://your-project.netlify.app

🔄 ロールバック手順

前のバージョンへのロールバック

# デプロイ履歴を確認
netlify deploy:list

# 特定のデプロイにロールバック
netlify deploy:restore DEPLOY_ID

# 最新の安定版にロールバック
netlify deploy:restore --latest-published

緊急時の Netlify Dashboard 操作

  1. プロジェクトダッシュボードにアクセス
  2. Deploys タブを選択
  3. 復元したいデプロイの Publish deploy をクリック

🛠️ よくある問題とその解決法

問題解決法
ビルドが失敗するpnpm build でローカル確認 → エラーログを確認
デプロイが遅いキャッシュクリア: netlify build --clear-cache
環境変数が反映されないNetlify Dashboard で設定確認 → サイト再デプロイ
404 エラーnetlify.toml のリダイレクト設定確認
SSL 証明書エラーNetlify Dashboard → Domain settings → SSL 確認

📋 定期メンテナンスチェックリスト

月次チェック項目

  • 依存関係の更新チェック (pnpm outdated)
  • セキュリティ脆弱性チェック (pnpm audit)
  • サイトパフォーマンステスト
  • 404 エラーページの確認
  • バックアップデプロイの動作確認

パッケージ更新手順

# セキュリティアップデート
pnpm audit fix

# 依存関係の更新
pnpm update

# 主要パッケージの更新（慎重に）
pnpm add next@latest
pnpm add @netlify/plugin-nextjs@latest

# 更新後のテスト
pnpm build
netlify deploy  # プレビューで確認
netlify deploy --prod  # 問題なければ本番デプロイ

👥 新チームメンバーの環境構築

# 1. リポジトリをクローン
git clone https://github.com/your-username/your-project.git
cd your-project

# 2. 依存関係をインストール
pnpm install

# 3. Netlify CLI のインストールとログイン
npm install -g netlify-cli
netlify login

# 4. プロジェクトをリンク
netlify link --id your-site-id

# 5. 開発サーバー起動
pnpm dev

🎯 まとめ

Netlify を使った自動デプロイ環境を構築することで：

  • 開発効率の向上: プッシュするだけで自動デプロイ
  • 品質の向上: プレビュー環境での事前確認
  • 運用の安定化: 簡単なロールバック機能
  • チーム協力の促進: 統一された開発フロー

この環境を整えることで、より多くの時間を開発に集中できるようになります。

📚 参考リンク

この記事が皆さんの開発環境構築の参考になれば幸いです。質問やフィードバックがあれば、お気軽にお声がけください！

最後まで読んでいただきありがとうございました！てばさん（@basabasa8770）でした！

この記事をシェア

XFacebooknoteLINE