783 字
4 分鐘
[Day21] Pages — 30 天入門 Cloudflare
2023-05-20
無標籤

Cloudflare Pages 是一個靜態網站構建和部署平台,允許使用者使用現代框架 (如React、Vue 和 Angular) 或 JAMstack 建立靜態網站,並將其部署到Cloudflare 全球免費 CDN 上,類似於 Github Pages、Gitlab Pages。使用者可以利用 Cloudflare Pages 的功能快速建立和部署網站,而不必擔心網站的可用性和安全性。

Cloudflare Pages 支援 GitHub、GitLab 版本控制平台,不支援其 Git 服務,使用者可以輕鬆地將代碼庫連接到 Cloudflare Pages 上。此外,Cloudflare Pages 還提供了一個簡單易用的網站構建工具,以便使用者可以使用預設範本或完全自定義網站外觀和功能。


綁定 Git Repo#

到 Cloudflare Dashboard 帳號下找到 Pages,選擇建立專案,可以選擇上傳靜態 HTML,或是連線至 Git,這邊以 Github 為例。

選擇要連結的 Git Repo。

接著選擇 Git 分支、與前端框架,若是已經編譯後的前端資源框架,可以選擇 None。支援的框架可以參考官方文件,就算不在支援清單中也沒關係,可以自行撰寫編譯腳本,並在組建命令呼叫。

當Pages監測到Git更新後,就會自動到Git下載程式碼進行打包與部署,可以在網頁上查看打包與部署的進度、log。

部署完成後,會看到 Pages 給你一個網址,這樣就可以查看網頁了。Cloudflare 提供的網址會是 .pages.dev 結尾,每次部署都會幫你保留下來一個網址可以造訪。


綁定網域#

在 Pages 設定中選擇「自訂網域」就可以綁定網域。


環境變數#

我們在 Github 或是 Gitlab 編譯的時候,常常會用到環境變數功能,用來儲存設定或機敏資料,在 Pages 設定中也有環境變數可以設定。


Cloudflare Pages Build 取代 Github Actions#

過去我們如果要做打包程式,往往會寫在 Github Actions 或是 Gitlab CI 上,但這就受時數所苦,因為 Actions 每個月只有免費 2,000 分鐘,常常不夠用,Pages Build 本身與 Github Actions 相同,也是個 Ubuntu 環境,理論上可以將語法都搬到 Pages Build 上執行。

Pages 有個缺點是沒有排程觸發,我目前想到的解決辦法是用 Github Actions 排程 git push 一個空 summit,讓 Pages 可以觸發部署。

可以參考以下Actions語法:

name: update
on:
push:
branches: ["main"]
pull_request:
branches: ["main"]
schedule:
- cron: "*/60 * * * *"
workflow_dispatch:
jobs:
update:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
with:
token: ${{ secrets.GITHUB_TOKEN }}
- name: Push commit
run: |
set -xe
date > .github/update
git config user.name "github-actions[bot]"
git config user.email "github-actions[bot]@users.noreply.github.com"
git add . && git commit -m "Crontab" && git push

結語#

總的來說,Cloudflare Pages 是一個強大的靜態網站構建和部署平台,提供了簡單易用的工具和功能,以幫助使用者快速建立和部署高性能、安全的網站,將網站靜態化也能降低後端伺服器的壓力,打造更高可用的架構。

▶ 閱讀更多本系列文:30 天入門 Cloudflare

▶ 下一篇:[Day22] Web Analytics — 30 天入門 Cloudflare