自動化建置靜態網站基礎設施之二

在自動化建置靜態網站基礎設施之一中，我們介紹了如何全面使用 Google 來打造靜態網站的基礎設施，但以一個單純作為靜態網站來說，起初的用戶量與使用情節必然是不太複雜，但全面使用 GCP 的解決方案也就代表了採用負載均衡與 CDN 等相關服務元件，而採用這些元件由於服務水準匹配的原因，也很難降低相關元件(e.g. 負載均衡)的等級，因此，即便流量再小，也必須支付一個月約莫 2x 美元的費用。因此，本文章將介紹利用 Cloudflare 來取代 GCP 的負載均衡與 CDN 相關服務，由於 Cloudflare 有提供免費級別的用量，這對於單純的初期靜態網站來說，應該十分夠用了！接下來，我們就來看看如何用 GCP + Cloudflare，並且基於 Pulumi 打造一個零元的靜態網站基礎設施吧！

在開始之前

擁有一個 GCP 的帳號，更重要的是，它必須設定好如何付 $$
建立一個具有合適權限的服務帳號
安裝 Google Cloud SDK，並且確認已經設定好 application-default
Python 為 3.x <== 這非常重要!!
準備一個 Cloudflare 的帳號，並且帳號設定中取得 API Token
將你的域名主機轉至 Cloudflare.更多資訊

架構說明

由於前端改用 Cloudflare 來服務網路請求，因此在 GCP 平台部分也就只剩下 bucket 元件，並且在所有靜態網頁都透過 Github 之類的版本管理工具進行保存，也設定好相關的自動化部署前提下，採用 REGIONAL 且位於 us-west1、us-central1、或 us-east1 任一區域即可。

開始著手實作 Pulumi 程式

1. 配置 Bucket

第一步仍然是建立 Bucket，但有別於全採用 GCP 的方案，此步驟需要多注意一個地方，那就是 Bucket 的名稱：

首頁與404
main_page_suffix : 預設的網站首頁
not_found_page : 當查找的網頁不存在時的預設網頁
Bucket檔案存取權
由於靜態網頁為公眾存取的內容，因此必須將 bucket 的檔案存取權設定為允許所有人都可以取讀的狀態。
⚠️Bucket 名稱:
務必將名稱設為預提供服務的域名，比方說 www.yourdomain.com。


#step 1. create the website bucket
web_bucket=storage.Bucket("official-web"
    ,name=DOMAIN_NAME #務必設為服務域名
    ,website=storage.BucketWebsiteArgs(main_page_suffix=MAIN_SUFFIX,not_found_page=ERR_SUFFIX)
    ,location="us-central1" #選了這個具有免費額度的區域
    ,project=TARGET_PROJECT
    ,storage_class="REGIONAL")

access_ctl=storage.DefaultObjectAccessControl("official-web-read"
    ,bucket=web_bucket.name
    ,role="READER"
    ,entity="allUsers")

2. 在 Cloudflare 上的目標網站，設定 CNAME

將你想提供的服務域名導向 GCP 的 Bucket (透過 c.storage.googleapis.com)，由於本篇文章希望將 yourdomain.com 與 www.yourdomain.com 進行綁定，並且提供相同服務與頁面，因此設定了兩個 CNAME。

💡 www 的部分你可以置換成其他想使用的子域名。


#step 2. add RECORD to DNS
www=cloudflare.Record("www-sub"
    ,zone_id=ZONE_ID
    ,name="www"
    ,value="c.storage.googleapis.com"
    ,type="CNAME"
    ,proxied=1
    ,ttl=1)
root=cloudflare.Record("root"
    ,zone_id=ZONE_ID
    ,name="cpht.pro"
    ,value="c.storage.googleapis.com"
    ,type="CNAME"
    ,proxied=True
    ,ttl=1)

3. 在 Cloudflare上，設置頁面轉導的規則

下面規則將把所有來自 yourdomain.com 的請求全部轉到 www.yourdomain。

#step 3. add a page rule
always_root_rule=cloudflare.PageRule("root2www"
    ,zone_id=ZONE_ID
    ,target=RULE_TARGET
    ,priority=1
    ,actions=cloudflare.PageRuleActionsArgs(
        forwarding_url=cloudflare.PageRuleActionsForwardingUrlArgs(status_code=301
            ,url=FORWARD_TARGET
        )
))

讓一切生效!

當上述實作都完成後，僅僅只需要以下的指令，便能將整個基礎設施建置完成!

pulumi up -y

關於 zone-id

zone-id 就在目標網站內的概覽分頁，卷軸往下滾的右側邊條上！如下圖所示：

後記

基礎網站建置完後，接著就是將靜態網站資源往 Bucket 上拋，另外，最重要的是為你任何的實作添上自動部署流水線，這樣可以加速當網站躺平或者是錯誤修改後，回滾與修正的能力！之後有機會再陸續分享在 Github 上，添加 Pulumi 的佈署流水線囉！

自動化建置靜態網站基礎設施之二