☁️Cloudflare Pages + Next.jsの静的サイトをサクッとデプロイしてみた

2025-09-16

こんにちは。

業務でNext.jsを使った静的サイトをデプロイする必要がありました。イチからのデプロイは久し振りだったので、復習（？）も兼ねてCloudflare PagesでNext.jsで作られたサイトのデプロイまでの手順を書き残そうと思いました。

プロジェクトの作成

create-next-appしただけのプロジェクト。誰かと継続的に開発する訳でもないのにDockerfileまで作っちゃてます。

はい。いきなりGeminiに聞いて手順書を作成してもらいました。

もうググるよりAIで手順調べた方が圧倒的に速い時代ですね。仕事無くなっちゃいそう。

今回はGitHub ActionsでCloudflare Pagesにデプロイをしたいので必要な情報を用意します。

まず、プロジェクトを作成します。「作成」→「Pages」→「既存の Git リポジトリをインポートする」で「始める」。

既にGitHubと連携している前提ですが、まだしてなかったらしておきましょう。その後、今回デプロイしたいリポジトリを選択し「セットアップの開始」。デプロイしたいプロジェクトが表示されてなかったらGitHubのCloudflare Pagesのアプリに対するリポジトリアクセスを許可してあげましょう。

次にビルドとデプロイのセットアップをしていきます。使用しているプロジェクトに合わせて適宜設定してあげましょう。プロジェクト名は後で使用するのでメモしておく。入力したら「保存してデプロイする」を押下。するとデプロイが始まります。一旦プロジェクトの作成は完了です。

続いて、Cloudflare APIトークンを用意します。「プロフィール」→「APIトークン」に移動し「トークンを作成する」

カスタムトークンを作成するの「始める」を押下。

各種入力していきます。トークン名はあとから見たときに何のトークンか分かるような名前を入力しておきましょう。権限ではアカウントを選択し、項目の選択では「Cloudflare Pages」を選択。編集権限を設定します。

他にも設定箇所はありますが、今回の要件的に問題はないので未設定のまま「概要に進む」を押下。作成したトークンは後で確認ができないのでメモしておきましょう。

最後にCloudflareのアカウントIDをメモしておきます。アカウントIDはドメインを選択し、サイドバーから確認ができます。

これでデプロイに必要な情報の準備はできました。

最後にGitHub Actionsでデプロイが出来るようにしていきます。

対象のGitHubリポジトリを開き、「Settings」タブ→「Secrets and variables」→「Actions」を選択。「New repository secret」ボタンをクリックして、以下の2つのSecretを作成する。

GitHub Actions側の設定はこれで完了したので、次にデプロイを自動化するためのワークフローファイルを作成します。

それがこちら。ほぼGeminiに生成してもらったままです。ほんま仕事無くなる。 https://github.com/dOwOd/sample-nextjs-app/blob/main/.github/workflows/deploy.yml

先ほど作成したワークフローファイルをmainブランチにpushし、GitHub Actionsからデプロイされることが確認できるはず。

デプロイに成功すると.pages.devのようなURLが発行され、そちらでデプロイされたサイトを確認することができます。

カスタムドメインの設定も簡単に出来てしまうのでやってしまいます。デプロイすることだけが目的であればここまでで良いですが、カスタムドメインを使用し自身の持っているドメイン上に公開することも出来ます。

CloudflareのWorkers & Pagesにアクセスし、今回作成したプロジェクトを選択。「カスタムドメイン」タブを開き「カスタムドメインを設定」を押下。

使用したいドメインを入力し「続行」を押下。

最後に確認画面が出るので「ドメインをアクティブにする」を押下。しばらくすると設定したドメインでアクセスして今回デプロイしたサイトが見れるはずです。

こんなに簡単にサイトを公開できてしまうCloudflareも便利ですごいですが、ここまでの手順をAIでほぼ間違いなく生成出来ちゃう事が一番怖いですね。これを記事として書き残すことの意味についても懐疑的になってしまいますね。自己満ですね。