cloudflare pages + Astro 3 + tailwind, デプロイのメモ

概要

cloudflare pagesに、　Astro　デプロイ内容となります

• wranglerで、デプロイする方法になります
• TailwindCSS, Reactはオプション的に追加しました(不要な場合は、スキップ)
• 事前にcloudflareに、ログインしておきます。

環境

• cloudflare pages
• Astro
• React
• TailwindCSS

手順

• gitはYにしました(deploy で、ブランチの入力があった為)

npm create astro@latest

• project name, input

• dependencies : Y

• TypeScript: Y

• git: Y

$ npx astro add tailwind

npx astro add react

npx astro add cloudflare

• wrangler

npm install wrangler

• login します

npx wrangler login

• build

npm run build

• dev server start

npx wrangler pages dev ./dist

• http://127.0.0.1:8788/ で、astro起動を、確認しておきます

build

npx wrangler pages deploy dist

• Enter the name of your new project: [projectName] を入力
• Enter the production branch name: [branchName] をgitブランチ名入力

• deploy できました
• 初回は、３分後に、アクセスすると開けました

• 参考

https://github.com/kuc-arc-f/astro3_4cf