NetlifyサイトをCloudflare Pagesに移行する手順

背景・状況

Netlifyにデプロイされていたサイト（サブドメイン: tax.eurekapu.com）
Netlifyアカウントは他人のもので、自分はメンバーとして招待されているだけ
GitHubリポジトリも他人のアカウントで管理されている
お名前.comからCloudflareへのドメイン移管時に、DNSレコードが自動スキャンで取りこぼされてアクセス不可に
元のアカウント所有者に連絡せず、完全に独立した環境を構築したい

目的

GitHubリポジトリを自分のアカウントにコピー
Cloudflare Pagesにデプロイ
カスタムドメイン tax.eurekapu.com を設定
元のNetlifyプロジェクトから完全に独立

手順1: GitHubリポジトリを自分のアカウントにコピー

1-1. 元のリポジトリをクローン

# 元のリポジトリをローカルにクローン
git clone <元のリポジトリURL>
cd <プロジェクトディレクトリ名>

例:

git clone https://github.com/other-user/tax-app.git
cd tax-app

1-2. 自分のGitHubアカウントに新規リポジトリを作成

GitHubにログイン
右上の「+」→「New repository」をクリック
リポジトリ名を入力（例: tax-app）
「Public」または「Private」を選択
「README」や「.gitignore」は追加しない（既存コードがあるため）
「Create repository」をクリック

1-3. リモートURLを自分のリポジトリに変更

# 現在のリモートを確認
git remote -v

# 元のリモートを削除
git remote remove origin

# 自分の新しいリポジトリをリモートに追加
git remote add origin https://github.com/<あなたのユーザー名>/<新しいリポジトリ名>.git

# 確認
git remote -v

例:

git remote remove origin
git remote add origin https://github.com/your-username/tax-app.git

1-4. 自分のリポジトリにプッシュ

# メインブランチをプッシュ（ブランチ名がmasterの場合はmasterに変更）
git push -u origin main

# すべてのブランチをプッシュしたい場合
git push --all origin

成功すると: 自分のGitHubアカウントにコードがコピーされます。

手順2: Cloudflare Pagesにデプロイ

2-1. Cloudflare PagesでGitHubと接続

Cloudflareダッシュボードにログイン
左サイドバーから「Workers & Pages」を選択
「作成」ボタンをクリック
「Pages」タブを選択
「Gitに接続」をクリック

Cloudflare Pages作成画面

2-2. GitHubアカウントを認証

初回のみ、GitHubとの連携認証が必要です：

「GitHubに接続」をクリック
GitHubのOAuth認証画面が開く
「Authorize Cloudflare Pages」をクリック
リポジトリへのアクセス権限を付与

2-3. デプロイするリポジトリを選択

「リポジトリを選択」で先ほど作成した自分のリポジトリを選択
「セットアップの開始」をクリック

リポジトリ選択画面

2-4. ビルド設定

プロジェクトのフレームワークに応じて設定します：

一般的な設定例:

Next.js の場合

フレームワークプリセット: Next.js
ビルドコマンド: npm run build または pnpm build
ビルド出力ディレクトリ: .next または out（設定による）
ルートディレクトリ: /（デフォルト）

Nuxt.js の場合

フレームワークプリセット: Nuxt.js
ビルドコマンド: npm run generate または pnpm generate
ビルド出力ディレクトリ: dist
ルートディレクトリ: /

React (Vite/CRA) の場合

フレームワークプリセット: React
ビルドコマンド: npm run build または pnpm build
ビルド出力ディレクトリ: dist または build
ルートディレクトリ: /

静的サイト（HTML/CSS/JS）の場合

フレームワークプリセット: なし
ビルドコマンド: （空欄）
ビルド出力ディレクトリ: /（HTMLファイルがある場所）
ルートディレクトリ: /

環境変数の設定（必要な場合）:

「環境変数」セクションで、APIキーやその他の環境変数を追加します。

2-5. デプロイ開始

設定を確認
「保存してデプロイ」をクリック
デプロイログが表示されます

デプロイ時間: 通常1〜5分程度

成功すると: https://<プロジェクト名>.pages.dev の形式のURLが発行されます。

手順3: カスタムドメイン `tax.eurekapu.com` を設定

3-1. カスタムドメインの追加

デプロイ完了後、プロジェクトのダッシュボードを開く
「カスタムドメイン」タブを選択
「カスタムドメインを設定」ボタンをクリック
tax.eurekapu.com と入力
「ドメインを追加」をクリック

カスタムドメイン設定画面

3-2. DNS レコードの自動設定

重要: eurekapu.com ドメインがCloudflareで管理されている場合、DNSレコードは自動的に追加されます。

Cloudflareが以下のいずれかを自動追加します：

CNAMEレコード: tax → <プロジェクト名>.pages.dev
または Aレコード: tax → Cloudflare PagesのIPアドレス

確認方法:

Cloudflareダッシュボードで eurekapu.com ドメインを選択
「DNS」→「レコード」を開く
tax のレコードが自動追加されていることを確認

DNS自動追加の確認

3-3. SSL証明書の自動発行

Cloudflareは自動的にSSL証明書を発行します：

発行時間: 通常数分〜最大24時間
証明書タイプ: Cloudflare Universal SSL（無料）
対応プロトコル: HTTPS自動リダイレクト

確認方法:

プロジェクトの「カスタムドメイン」タブを開く
tax.eurekapu.com のステータスが「アクティブ」になっているか確認

3-4. 動作確認

ブラウザで https://tax.eurekapu.com にアクセスして、サイトが表示されることを確認してください。

手順4: 自動デプロイの設定確認

Cloudflare Pagesは、GitHubのプッシュを検知して自動的に再デプロイします。

デフォルトの動作

本番環境: main（またはmaster）ブランチへのプッシュで自動デプロイ
プレビュー環境: その他のブランチへのプッシュで自動プレビュー作成

設定の確認・変更

プロジェクトダッシュボード → 「設定」タブ
「ビルドとデプロイ」セクション
「本番ブランチ」で対象ブランチを確認・変更可能

トラブルシューティング

ビルドが失敗する

原因:

ビルドコマンドが間違っている
環境変数が設定されていない
Node.jsのバージョンが合わない

解決策:

デプロイログを確認してエラーメッセージを読む
「設定」→「環境変数」で必要な変数を追加
「設定」→「ビルド設定」でNode.jsバージョンを指定（例: 18.x）

カスタムドメインがアクティブにならない

原因:

DNS設定が反映されていない
SSL証明書の発行待ち

解決策:

最大24時間待つ
DNS設定を手動で確認（tax のCNAMEまたはAレコードが存在するか）
Cloudflareサポートに問い合わせ

サイトが404エラーになる

原因:

ビルド出力ディレクトリの設定が間違っている

解決策:

「設定」→「ビルドとデプロイ」でビルド出力ディレクトリを確認
正しいディレクトリ（dist, build, .next など）を設定
再デプロイ

まとめ

この手順で、Netlifyから完全に独立したCloudflare Pages環境を構築できます：

✅ GitHubリポジトリを自分のアカウントにコピー
✅ Cloudflare Pagesにデプロイ
✅ カスタムドメイン tax.eurekapu.com を設定
✅ 自動デプロイの設定

メリット:

完全に自分の管理下に置ける
Cloudflare PagesとDNSの統合で設定が簡単
無料プランでも高速配信（Cloudflare CDN）
自動SSL証明書
GitHubプッシュで自動デプロイ

参考リンク

最終更新: 2025-11-27