星期六, 5月 09, 2020

建立 AWS CloudFront CDN 源站指向 GCP GCS 小記

建立 AWS CloudFront CDN 源站指向 GCP GCS 小記

先來講一下為何會有這個測試 :)

日前 GCP 的 Cloud CDN 對於 Custom Origins 發佈 GA, Cloud CDN 正式可以指向外部資源, 所以就進行相關測試
我們 CDN 服務有啟用 Query String 的功能 
CDN在源站的設置上面, 一般會有兩種類型
  • Web Service ( 例如 nginx / apache2 )
  • Bucket ( 例如 S3 / GCS )

在 AWS CloudFront 服務上面,  不管後面接的是 Web Server 還是 S3, 都是可以使用 Query String 功能的.

但是在 GCP Cloud CDN 部分, 如果後端是接 GCS, 那 Query String 功能是不支援的

所以就嘗試看看 AWS CloudFront 的源站指向 GCP GCS, 是否可以提供服務然後啟用 Query String 功能

架構想法如下


首先來建立 GCS

登入 GCP console portal (https://console.cloud.google.com/)

點選 Storage -- > 瀏覽器 

點選 建立值區


輸入 Bucket 名稱
輸入 儲存位置
  • 這邊我是爲了節費, 使用單一 Region 然後選 asia-east-1 
  • 這邊要注意地區, 因為預設不一定是臺灣

點選 建立


接下來建立 Load Balance

點選 網路服務 -- > 負載平衡


點選 建立負載平衡器


點選 HTTP(S) 負載平衡的 啟動設定


因為不是內部的 Load Balance
所以用預設值 “從網際網路到我的 VM”
點選 繼續


接下來進行相關設定

輸入 Load Balance 名稱


進行後端設定
點選 後端設定 -- > 下拉 建立或選擇後端服務與後端值區
點選 後端 Bucket -- > 點選 建立後端 Bucket


輸入後端 Bucket 名稱
點選瀏覽 -- > 選取剛剛建立的 GCS Bucket
點選 建立


建立完成之後, 主機與路徑規則自動會進行設定
接下來進行前端設定
點選 前端設定
輸入 名稱
通訊協定按照預設 HTTP
點選完成


點選建立


點選建立好的 cf-to-gcs 負載平衡
確認 Load Balance 的 IP


補充一下, 之前碰到的奇怪狀況
之前有碰到建立 Load Balance 的時候, 不知爲何地區變成美國, 所以跟後面的 GCS Bucket 在不同的 Region 而產生錯誤, 所以也順便確認一下地區是 全域
  • 錯誤訊息會是 RegionMismatch




GCP 這邊算是準備完成

接下來在 DNS 代管服務上面設定一個 A Record 指向 GCP Load Balance IP
我這邊是使用 Gandi 的服務為例


接下來處理 AWS CloudFront

登入 AWS console

點選 服務 -- > 搜尋 CloudFront
進入 CloudFront 頁面
點選 建立分佈



點選 Web 的 入門


進行相關設定

源網域名稱: 輸入剛剛的 cdnlab.sakana.tw
  • 這個 DNS 名稱 會指向後端的 GCP Load Balance 然後指向後端的 GCS Bucket


查詢字串轉發與快取 (Query String) 部分
下拉選單, 選取轉發所有, 根據所有快取


分佈設定的部分
備用網域名稱(CNAME): 輸入自訂網域名稱

點選 建立分佈


觀察分佈的網域名稱 


建立分佈需要一點時間, 可以觀察分佈的狀態來確認


在 DNS 代管服務上面設定一個 CNAME Record 指向 AWS CloudFront 分佈網域名稱
我這邊是使用 Gandi 的服務為例



接下來進行相關測試

回到 GCP Console
點選 Storage -- > 點選 瀏覽器


點選剛剛建立的 Bucket
點選 上傳檔案

選取一張圖片進行上傳


還沒調整權限前, 可以先嘗試存取圖片

在瀏覽器輸入 

會得到 AccessDenied 的錯誤訊息


接下來調整 bucket 權限
  • 因爲應該不會想要一個一個物件設定吧 :)

在剛剛的 Bucket
點選 權限 -- > 新增成員


新增成員: 輸入 allUsers
角色: 選取 儲存空間物件檢視者
點選 儲存


會出現確定要將資源設爲公開的警告
點選 允許公開存取

然後也會注意到 Bucket name 下面會出現公開的圖示


再次測試

在瀏覽器輸入 
順便按下 F12 觀察
  • 會觀察到 X-Cache: Miss from cloudfront


第一次CDN沒有圖片, 所以會是 MISS, 會去跟源站抓

按下 F5 或是重新整理
觀察資訊
  • 這個時候會看到 Hit from cloudfront
  • 代表這張圖片是從 cloudfront 出的, 而非源站


接下來測試 Query String 功能
回到 bucket , 但是上傳不同的圖片, 但是檔案名稱保持爲 opensusetaiwan.png

再次測試

在瀏覽器輸入 
  • 這邊會觀察到還是舊的圖片, 因為之前已經被 CDN 給 Hit 了
  • 除非去清除圖片快取或是有效時間到, 不然都會是舊圖



在瀏覽器輸入 
  • 這邊更換 t=2020050902
  • 因為Query String 不一樣, 我們又有設定 Query String 功能, 所以就會看到是新的圖片
  • X-Cache: Miss from cloudfront



這樣也算是完成此次的測試
~ enjoy it


Reference

沒有留言: