Cloudflare Pages
簡単にgithubと連携して、静的なwebサイトを作れる。cloudflare workersも使える
Reactの静的サイトを作るチュートリアル 参考
1. bunでcreate-cloudflareをインストール
$ bun install create-cloudflare
※create-cloudflareはWrangler CLIとCloudflare Pagesアダプタを含む依存関係をインストールし、セットアップの質問をします。
2. create-cloudflareでreactアプリの雛形を作成
$ bun create cloudflare@latest my-react-app -- --framework=react
╭ Create an application with Cloudflare Step 1 of 3
├ In which directory do you want to create your application?
│ dir ./my-react-app
├ What type of application do you want to create?
│ type Website or web app
├ Which development framework do you want to use?
│ framework React
この質問の中で、deployをするか？をyesとしたら、自身のCloudflareアカウントにpagesを作成してくれる。
3. インストールできたらlocalhostでサーバーを起動
$ cd my-react-app
$ npm start
4. githubと連携する
repo.newで新規リポジトリ作成
例：https://github.com/KazuhiroIto0127/cloudflare-pages-lesson
先程作ったmy-react-appをこのリポジトリに含めてpush
5. Cloudflareのダッシュボードから、4で作ったリポジトリを関連づける
フレームワークプリセットには、create-react-appを選択してデプロイ。
例）https://cloudflare-pages-lesson.pages.dev/
が表示される。
main以外のブランチを作るとプレビューとしてデプロイできる。
developブランチでpushしたら
例）https://develop.cloudflare-pages-lesson.pages.dev/
workers functionを使う 参考
1. rootディレクトリにfunctionsディレクトリを作り、下記hello.tsを格納。
code:hello.ts
export function onRequest(context) {
return new Response("Hello world!");
}
$ npm run pages:dev
を実行してwrangler pages devが実行される。
http://0.0.0.0:8788/hello にアクセスするとhello worldが返ってくる。