Google

[教學] 使用 Google Cloud Storage 建立靜態網站

你在尋找免費的架站空間嗎?覺得租用伺服器太貴嗎?我們總以為架網站是件困難的事,需要搞定伺服器、網域、內容管理系統、要設計版型,還要花時間維護,算來算去都是時間與金錢呀,有沒有更簡單又免錢的方法呢?

別貪心,天下沒有白吃的午餐,該付的錢還是要付。只是在動工之前,要先弄清楚你的需求,是要架設動態網站,還是靜態網站

有時候架設網頁只是想提供研討會資訊、個人簡歷或是簡單的成果展示,用不到複雜的功能,建立靜態網頁就行啦。為此花錢租用伺服器,真的是殺雞焉用牛刀,浪費錢之外,網站速度搞不好還比較慢。

這篇文章要來談談靜態網站架設,告訴你如何充分利用 Google Cloud Platform 的免費方案。

根據 Google Cloud Storage 的計費方式,它提供 5 GB 免費空間,每月 1 GB 流量 ,可以綁網域名稱並採用 SSL (需要點技巧),再加上 Google Cloud 的網路速度快,使用這個方式架站,算是經濟實惠呀,文末也會說明我的使用狀況。


Google Cloud Storage 的收費方式

在開始之前,我們先來看 Google Cloud Storage 的訂價策略,該怎麼利用免費額度呢?

請支持《傑瑞窩在這》原創文章。原文標題:[教學] 使用 Google Cloud Storage 建立靜態網站,原文網址:https://jerrynest.io/cloud-storage-static-web/
cloud storage price0 - [教學] 使用 Google Cloud Storage 建立靜態網站

以省錢的角度來說,我們會把資料放在  us-west1、us-central1 或 us-east1 區域的 Regional Storage 中。

雖然享有 5 GB 空間,每月 1 GB 流量,但要注意 A 級、 B 級作業用量限制,請參照 Cloud Storage 價目表。以小型的靜態網頁來說,應該是不會超過每月配額,就算超過了,收費也很低廉。

cloud storage price2 - [教學] 使用 Google Cloud Storage 建立靜態網站

將網頁上傳至 Bucket

首先,我們要創建放置網頁的空間,在 Cloud Storage 中稱之為 Bucket 容器。請從側邊欄進入「Storage」類別中,點選「建立 Bucket」。

cloud storage1 - [教學] 使用 Google Cloud Storage 建立靜態網站

這裡的 Bucket 名稱請輸入欲綁定的網域名稱,而為了免費額度,儲存空間要選「Reginal」,位置則是從剛那三個地區中挑選,比如「us-central1」。

如果妳的網域沒有在 Google WebMaster 認證過,是無法建立 Bucket 的唷,請先登入 Google Search Console 進行認證。

cloud storage2 - [教學] 使用 Google Cloud Storage 建立靜態網站

成功建立 Bucket 後,透過「上傳檔案」與「上傳資料夾」來上傳網頁檔案。比如我傳了首頁「index.html」,並把後方的「公開連結」打勾。

cloud storage3 - [教學] 使用 Google Cloud Storage 建立靜態網站
2020/06 補充:目前已經不能直接公開連結,必須要透過權限設定的方式完成。

應該是因為安全性與控管的問題,Google Cloud 把「公開連結」的勾選框拿掉了,取而代之的是「公開存取權」欄位。我們必須點選右邊的「」符號,接者點選「編輯權限」來進行修改。

gs public1 - [教學] 使用 Google Cloud Storage 建立靜態網站

在權限設定頁面加入一個「AllUsers」,並將它設定為「讀取者」,這麼一來,所有人都可以讀取這份文件,也就代表這個連結公開拉。

gs public2 - [教學] 使用 Google Cloud Storage 建立靜態網站

設定完成後,看到公開存取權欄位出現「在網際網路上公開」就代表完成囉。可以點擊旁邊的連結圖示打開網頁,看看內容是否正常顯示。

gs public3 - [教學] 使用 Google Cloud Storage 建立靜態網站

沒問題的話,網頁就是正常顯示拉!

cloud storage3 1 - [教學] 使用 Google Cloud Storage 建立靜態網站
任何人都可以看到這個網頁

透過指令批次修改權限

那麼你肯定有個疑問,假如一次上傳很多檔案,是不是要手動把所有框框勾起來哩?

我剛開始就是這樣,累死人了,其實不用那麼麻煩,透過指令批次處理就行了。請在上傳檔案前,點擊網頁右上方的終端機圖示,打開「Cloud Shell」,透過終端機輸入以下指令。在「gs://」後方輸入你的網域名稱。

gsutil defacl set public-read gs://test.jerrynest.io
cloud storage4 - [教學] 使用 Google Cloud Storage 建立靜態網站

自訂網域名稱與 SSL

預設的網域名稱是 storage.googleapis.com,假如要更換的話,請在你的網域設定加入 CNAME。例如我是用 Gandi 管理網域,就在區域檔中加入下方資訊。

名稱類型
testCNAMEc.storage.googleapis.com.
gandi cloud storage - [教學] 使用 Google Cloud Storage 建立靜態網站

原本的網址是

https://storage.googleapis.com/test.jerrynest.io/index.html

設定完後,能省掉 googleapis 那串直接訪問囉。

http://test.jerrynest.io/index.html

可是還差一步呀,http 沒有 s 耶。想要設定 SSL 憑證,透過 Cloud Load Balancer 就能搞定,如果你沒錢購買,那就用免費的 CDN 服務 Cloudflare 吧,詳情請參考這篇文章:

How to Setup a SSL for Google Cloud Storage hosted Site?

設定首頁與 404 頁面

因為 Google Cloud Storage 並不是 Apache 那種聰明伺服器,不會自動地把 index.html 視為首頁,當頁面找不到的時候,也不會轉跳到 404 頁面 ,所以我們要加個規則。透過以下指令完成設定:

gsutil web set -m index.html -e 404.html gs://test.jerrynest.io

樂團網站搬家

講那麼多,我有沒有拿來架站呢?當然有阿,不然就不會研究了哈。目前還在測試會不會被扣錢,但依我的用量,應該是微乎其微拉。

我把大學寫的網站做個整理(那時手刻 PHP 做出來的 CMS 網站,超陽春阿),套個免費 HTML5 版型,讓樂團網站從新上線囉。歡迎各位來參觀以前的音樂創作,真的是時代的眼淚呀,嗚嗚嗚 …

因為沒錢買 Sub-domain 憑證,只好跟綠色小鎖頭說掰掰 …

http://zjbt.jerrynest.io/ (已關閉)
zjbt - [教學] 使用 Google Cloud Storage 建立靜態網站

更多 GCP 加值服務歡迎隨時聯繫 GCP 專門家,也可以至 GCP 技術部落格 查看更多 GCP 最新消息與技術內容!


延伸閱讀

Hosting a Static Website – Google Cloud Platform

樂於分享的軟體工程師,曾在新創與大型科技公司實習,獲得黑客松競賽冠軍,擔任資安研討會講者。長期熱衷於資訊安全、雲端服務、網路行銷等領域,希望將科技知識分享給更多人。內容轉載請來信:jlee58tw@gmail.com

10 Comments

  1. 發現現在創建完伺服器上傳檔案後無法修改為公開連結耶

    • Jerry

      Hello fang,
      因為 Google Cloud 後來有調整 Cloud Storage 的使用方式,原先的方法已經不能用囉
      剛才我有更新文章,你可以參考使用新方法~

  2. Yoshi Liao Reply

    你好,發現一個狀況,在建立Bucket時,顯示:已有其他值區使用「…….」這個名稱。Cloud Storage中所有專案的值區名稱都不得重複。請選擇其他名稱,然後再試一次。
    請問碰到這種狀況,應該怎麼處理?

    • Jerry

      Hello Yoshi,

      GCP 上面的 Bucket 名稱必須是唯一的唷
      如果你的名稱重複,就要換另外一個名字了

    • Jerry

      您好,請問您的指令是不是下錯了呢? set public-read 後面應該是接你的 bucket

    • Jerry

      您好~ 可以直接留言或私訊詢問唷

  3. 張庭瑋 Reply

    話說,用 github page 應該也是能達到同樣效果

    • Hi 庭瑋,

      謝謝你的回覆, 我這篇主要是試玩 cloud storage
      比較之下還是 github page 好用~

李桑 發表迴響 取消回覆