Hero img
nextjs14 app routerをcloudflareにデプロイ

cloudflareにnextjsをデプロイしてみる。

cloudflareのnodeバージョン18が使えるようになり、さらにnextjsも簡単に使えるようになったため、試してみることにした。


目次

  • cloudflareにデプロイする
  • プロジェクト作成
  • gitのリポジトリ作成
  • cloudflareとgitを接続する。
  • ページが表示されない...
  • nodejs_compatの追加
  • リビルドして表示できた。
  • まとめ

cloudflareにデプロイする

既存のnextjsをデプロイするのは、runtimeをedgeに変更する必要もあるため。とりあえず公式ページをなぞっていきます。

プロジェクト作成

  1. 1.まずnextjsのプロジェクトを作成します。
npm create cloudflare@latest my-next-app -- --framework=next

プロジェクトについて聞かれますので次のようにしました。

cloudflare-nextjs-app-router-init-project
  1. 1-1wranglerログインされていなかったためブラウザーが開かれるのでログインをします。
cloudflare-nextjs-app-router-wrangler-error cloudflare-nextjs-app-router-logined-wrangler
  1. 2.デプロイ デプロイするかどうかを聞かれるのでデプロイしてみる。
cloudflare-nextjs-app-router-deploy-test

Error?

デプロイが失敗したみたい...
まぁc3でデプロイすることはない。gitに接続して、コミットしたら自動的にデプロイ出来ればいいのでスルー。

cloudflare-nextjs-app-router-wrangler-error

gitのリポジトリ作成

  1. 1.githubでリポジトリを作成します。
cloudflare-nextjs-app-router-create-repository cloudflare-nextjs-app-router-repository-commands
  1. 2.リポジトリに接続する。

書かれている通り実行し、ローカルのプロジェクトをgithubにアップします。

git init
git add .
git commit -m "Initial"
git branch -M main
git remote add origin git@github.com:<アカウント>/<リポジトリ名>
git push -u origin main

cloudflareとgitを接続する。

  1. 1.cloudflareのページを作成します。
cloudflare-nextjs-app-route-create-page
  1. 2.リポジトリを選択する。
    先ほど作成したリポジトリを選択します。
cloudflare-nextjs-app-router-select-repository
  1. 3.デプロイの設定
cloudflare-nextjs-app-router-deploy-setting

ページが表示されない...

デプロイが成功したのでページにアクセスしてみるとページが表示されませんでした...   エラーページを確認すると「nodejs_compatを追加してね。」ということで 追加する。

cloudflare-nextjs-app-router-page-access-error

nodejs_compatの追加

cloudflare-nextjs-app-router-openprojectsetting1 cloudflare-nextjs-app-router-openprojectsetting2 cloudflare-nextjs-app-router-openprojectsetting3

リビルドして表示できた。

プロジェクトをリビルドしてみるとようやくnextjsのページが表示されました。 cloudflare-nextjs-app-router-rebuild

cloudflare-nextjs-app-router-can-view

まとめ

cloudflareがnode 18以降のバージョンに対応したので、gatsby 5もデプロイでき、nextjs app routeもデプロイできるようになりました。
少し設定を変更する必要があるが、cloudflareでR2、D1,KVとかも使えるのでかなりの事がcloudflareだけで解決するようになっている。
cloudflare imagesについては認証とかは不要だし、やっぱりcloudinaryを使う方がいいのかな?

関連記事

コメント

コメントを書く

質問や、間違いがありましたら、お気軽にどうぞ

※お名前とコメントの内容を入力してください。
※全てこのブログ上に公表されます。
※許可なく管理者によって修正・削除する場合がございます。 詳しくはプライバシーポリシーを参照ください