NEW

วิธีการ Deploy Astro บน Cloudflare Worker

Astro Basic

วิธีการ Deploy Astro บน Cloudflare Worker ในตัวอย่าง Video นี้ จะสร้างตัวอย่าง 3 วิธีด้วยกัน คือ

  1. ผ่าน Cloudflare Dashboard
  2. สร้างโปรเจ็คด้วย create-cloudflare
  3. Clone จาก starter template

วิธีที่ 1 : ผ่าน Cloudflare Dashboard

เข้าไปหน้า Cloudflare -> เลือก Compute -> Workers & Pages -> Create application

สามารถสร้างได้หลายแบบ

  • จาก git repo ที่มีอยู่แล้ว
  • starter template
  • hello world
  • หรือจะอัพโหลด static files

ตัวอย่าง เราเลือก Astro Framework Starter template จากนั้น ตัว Cloudflare จะทำการสร้าง git repo และก็ build & deploy ให้เราอัตโนมัติ

Workflow การทำงาน คือ ถ้า git repo มี feature branch อัพเดท ตัว Cloudflare worker จะทำการ build preview URL ให้เรา และถ้า มี main branch อัพเดท จะทำการ build production URL ให้เรา อัตโนมัติเช่นกัน

วิธีที่ 2 : Clone จาก starter template

GitHub - trevortylerlee/astro-micro: Blog theme for Astro with search and comments built-in. Zero frameworks.
Blog theme for Astro with search and comments built-in. Zero frameworks. - trevortylerlee/astro-microgithub.com
Blog theme for Astro with search and comments built-in. Zero frameworks. - trevortylerlee/astro-micro
Terminal window
npm create astro@latest -- --template <github-username>/<github-repo>

วิธีที่ 3 : create-cloudflare

ผมเพิ่มไปนอกเหนือจาก Video คือ เราสามารถ init ด้วยคำสั่ง create-cloudflare ได้เช่นกัน และเลือก เป็น astro (หรือ template อื่นที่เราต้องการก็ได้) มีความคล้ายกับ ทำผ่าน Dashboard แต่อันนี้ทำผ่าน CLI

Terminal window
npm create-cloudflare@latest

Command ที่ใช้

Terminal window
# Login ครั้งแรก
npx wrangler login

Deploy project

Terminal window
npx wrangler deploy

ดู log tail

Terminal window
npx wrangler tail

References

Astro
Create an Astro application and deploy it to Cloudflare Workers with Workers Assets.developers.cloudflare.com
@astrojs/cloudflare
Learn how to use the @astrojs/cloudflare adapter to deploy your Astro project.docs.astro.build