Cloudflare 的 cloudflare-create CLI（簡稱 C3）提供了許多前端框架的 templates 讓開發者們可以快速建立前端專案，包含 Next.js, Nuxt, React, Vue, Angular, SvelteKit 等等，可以參考官方文件，裡面有所有支援的框架。

1. 用 C3 初始化專案

執行以下指令：

$ pnpm create cloudflare@latest

c3 就會開始引導你如何建立新專案，這篇文章會以 React 搭配 TypeScript + SWC 為例：

Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./cloudflare-c3-with-react
│
├ What would you like to start with?
│ category Framework Starter
│
├ Which development framework do you want to use?
│ framework React
│
├ Select a variant:
│ variant TypeScript + SWC
│
├ Continue with React via `pnpm dlx [email protected] cloudflare-c3-with-react --template react-swc-ts`
│

初始化專案後，cd 到專案裡面可以看到，連 npm install 都幫你執行好了。

2. 部署專案到 Cloudflare Pages

Cloudflare Pages 是建立在 cloudflare workers 的部署平台，部署到 Cloudflare Pages 有什麼好處呢？光是免費方案就已經有以下規格：

Unlimited sitesUnlimited requestsUnlimited bandwidth

基本上看到這三點就覺得超誇張了，每次看到 Cloudflare 推出新產品都會想：他們到底要靠什麼賺錢…

目前有幾種方式可以部署到 Cloudflare Pages：

2.1 Direct Upload

Direct upload - 你可以直接將 build 好的靜態檔案透過以下方式部署到 Cloudflare Pages：

注意：Direct Upload 之後就不能和 git 做整合，如果要和 git 做整合就只能再開一個新的專案。

有兩種方式可以 direct upload: wrangler 以及在 Cloudflare Pages 的 dashboard 上做上傳。

1. 使用 wrangler

打開 package.json 的話，可以觀察到

"scripts": {
  "deploy": "pnpm run build && wrangler pages deploy ./dist"
},

deploy 的指令除了會執行 vite build 之外，後面還多了 wrangler pages deploy ./dist。

wrangler 是用來執行 cloudflare workers 相關的 CLI 工具，而 pages 則是建立在 cloudflare workers 的部署平台，因此這行指令的意思是，把 build 好的靜態檔案（./dist 裡面的所有檔案）透過 wrangler，deploy 到 Cloudflare Pages 上。

執行以下指令：

$ pnpm run deploy

接著 wrangler 會引導你在 cloudflare 上建立新的 Cloudflare Pages 專案，建立完專案後會直接把 ./dist 裡面的所有檔案上傳到新建立的 Cloudflare Pages 專案。

進到 Cloudflare 的 dashboard 後，點擊 sidebar 的 Compute (Workers)，就會看到剛剛透過 wrangler 建立的 Cloudflare Pages 專案。

2. 直接上傳檔案到 Cloudflare Pages 的 Dashboard 上

進到 Cloudflare 的 dashboard 後，點擊 sidebar 的 Compute (Workers) 後，點擊 Pages 後，再點擊 Upload assets，之後輸入這個 Cloudflare Pages 的專案名稱，再將 build 好的靜態檔案上傳上去就可以了。

2.2 整合 git

如果希望和 git 的專案做整合的話，就不能選擇 direct upload 的方法。

如果要和 git 的專案整合，首先需要將剛剛在 local 建立的專案 push 到 remote 建立的專案上，這邊以 github 為例。

延伸閱讀：如何用git 將資料夾加入到版本控管中？

首先進到剛剛 Create an application 的頁面，然後點擊 Connect to Git

接著選擇你要整合的 repo（如果是第一次進來應該還會有 github 授權相關的流程，這裡可以選擇只授權即將整合的專案）

接著輸入這個 Project 在 Cloudflare Pages 上的名稱以及 Production branch，之後只要有 commit push 到這個 branch，Cloudflare Pages 就會自動幫你 deploy（之後也可以在 dashboard 把這個 automatic deployments 關掉）

然後要選擇目前專案的框架以及 build command，通常選了框架後就會自動帶入預設的 command 和 build 好的檔案會放到哪個 directory，如果要客製化的話再輸入自定義的 command 和位置就好。

按下 Save and Deploy 後，Cloudflare Pages 就會自動幫你 build 並且 deploy 這個專案。

Deploy 後會出現成功的畫面，點擊 preview 的 url 就可以看到 build 好的 app 了！

3. Custom Domain

Cloudflare Pages 還可以設定 custom domain，進到專案的頁面後點擊 Custom domains 的 tab 後，輸入自己擁有的某個 domain，再設定 DNS，之後就可以把 domain 綁到目前建立的 Cloudflare Pages 專案上囉！

4. 結論

最近很多前端架構的服務都建立在 Cloudflare 相關的服務上，一方面完全免費，另一方面是提供了很多其他 cloud service 沒有的 solution，而這篇介紹的 solution 是我目前覺得最方便也最快速可以從頭建立前端專案的 solution，如果沒意外的話之後自己的小專案應該都會用 cloudflare 來處理，希望這篇文章有幫助到想建立前端專案的開發者們 🥳

5. Reference

Create projects with C3 CLI
C3 & Wrangler - Learning Paths
Cloudflare Pages
Workers & Pages Pricing