1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【超初心者】Cloudflareでのデプロイの基本

1
Posted at

基本的なデプロイを行ってみて,今後自分の開発したものを公開する手段を1つ獲得する.
https://developers.cloudflare.com/workers/framework-guides/web-apps/nextjs/ に従えばだいたいデプロイまでできる.

1. プロジェクトの作成

npm create cloudflare@latest -- my-next-app --framework=next

でプロジェクトを作成.

Initialize a new git repository? (Y/n)

gitで管理する場合はyes.

Would you like to deploy your project now? (Y/n)

作成したプロジェクトを即座にデプロイしたい場合はyes.

2. プロジェクトの編集

作成したプロジェクトを編集する.

npm run dev

により,ローカル環境で開発状況を確認しながら開発できる.

3. デプロイ

デプロイの前に

npm run preview

でより本番に近い環境でプレビューし,問題なければ,

npm run deploy

でデプロイする.

開発環境

  • OS: Windows 11(WSL2 / Ubuntu)
  • Node.js: v22.8.0
  • npm: v10.8.2
  • Framework: Next.js 16.1.5
  • Library: React 19.1.5 / React DOM 19.1.5
  • Hosting: Cloudflare Pages + Workers
  • Build Tool: @opennextjs/cloudflare v1.17.1
  • CLI: wrangler 4.69.0
  • CSS: Tailwind CSS v4
  • Language: TypeScript 5.7.4
  • Editor: VS Code
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?