[GCP] 運用Cloud Storage Bucket產品，10步內完成架設靜態網站 (非vm方式)

 緣起：

公司內部沒有對外伺服器可以架站，但又有網站需要對外的需求怎麼辦???

想到現在雲端GCP/Azure/AWS都有提供免費的試用額度，剛好可以學習增加經驗。

環境：

選用雲端：GCP (Google Cloud Plaform)

需求說明：將一個靜態網站發布至GCP上的Bucket產品

(坊間也有很多開VM架靜態網站的方式，我還沒搞懂VM/Bucket架站的差異，改天再研究細節)

All steps：

1. 先申辦Google帳號→https://accounts.google.com/signup
2. 接著先確認Domain Name的控制權→https://search.google.com/search-console/about
3. 再到GCP登錄使用權限→ https://cloud.google.com/gcp
4. 建立新專案
5. 建立Bucket值區(建立時會驗證Domain Name的所有權，所以到這裡再做第二步也行)
6. 上傳網頁內容
7. 設定瀏覽權限
8. 設定對外網頁
9. 設定CNAME指向Google server，並等待其生效
10. 大功告成~

***詳細步驟***

Step.1  先申辦Google帳號

這一步應該不用說，GO→https://accounts.google.com/signup

Step.2 接著先確認Domain Name的控制權

→https://search.google.com/search-console/about

Step.3 再到GCP登錄使用權限

→ https://cloud.google.com/gcp 點擊右上角，申請免費試用

Step.4 建立新專案

Step.5 建立Bucket值區

選擇目標專案，並在這個專案內新增一個Cloud Storage內的Buckets

(若找不到Cloud Storage，可以點一下View all products，再把bar往下拉，應該就會看到了，icon則像是兩個1U的server)

這一步，所創立的bucket name就是一個可以在網路上搜尋的到的subname + domain name，

因此才需要先至Google Search Console驗證對於這個domain name的所有權。

若輸入xxx.google.com，勢必無法驗證所有權，屆時就會跳出紅字提醒未有網域控制權。

附帶一提，bucket name都是唯一的，

如：subname: blog.s7an.com已經建立在其他值區，則這個blog.s7an.com便無法再用來創立新的bucket。

這一步則是挑選一個離你最近的『regions』即可。

這一步則選擇『標準』即可。

這一步，則是是否要『公開』此bucket，可以先不勾選，待bucket完整設定後，再來公開也行，後面會提到如何公開。

這一步則是選擇保護資料的方式，我僅選擇採預設選項無變動。

接著就可以點擊『CREATE』建立此專案的bucket了！

現在專案內，已經建立好一個Bucket，中文翻譯為：值區，

我的理解是值區可以視為是一個IIS內的網站站點。

Step.6 上傳網頁內容

GCP web介面上的上傳檔案、上傳資料夾按鈕，可將網站檔案上傳。

這邊直接丟進去就好，不用額外開一個資料夾當root裝檔案。

Step.7 設定瀏覽權限

由於網站預期要放在網路上公開供瀏覽，選擇『PERMISSIONS』，在右側功能列新增『PRINCIPALS』中文譯為『主體』。

輸入『allUsers』

allUsers →一般網際網路瀏覽者

allAuthenticatedUsers →註冊過Google帳號並驗證過的瀏覽者

並賦予allUsers為『Storage Object Viewer』的角色。

意即，所有一般瀏覽者可以檢視此儲存空間內的物件，

白話就是，這個網站大家都只能用看的。

還有很多詳細的權限設定，尚未有需求也未研究，有空真的得好好探訪。

Step.8 設定對外網頁

回到bucket頁面，點選bucket的選項如下圖，並選擇『Edit websiet configuration』

接著輸入網站的首頁檔名，若有準備404的頁面，也可以順便輸入，再儲存。

好了~到這邊幾乎已經完成網站端的所有準備與設定，

接下來就是將CNAME網站指向這個GCP的bucket哩！

但是該怎麼做呢..?

Step.9 設定CNAME指向Google server，並等待其生效

取得bucket內，首頁的公開連結

https://storage.googleapis.com/shopping.xxxxxx.com/index.html

上列可以看到

所建立的shopping.xxxxxx.com前面有storage.googleapis.com/

意即這個storage.googleapis.com網站底下，有一個資料夾shopping.xxxxxx.com，首頁為index.html

這時候要怎麼將subdomain指向GCP的專案的bucket呢?

簡單，新增一筆CNAME指到storage.googleapis.com這個位置即可。

CNAME/shopping/storage.googleapis.com

至於為什麼指過去Google的server，subname跟bucket能串起來?

還記得前面新增的一筆txt並驗證domain所有權嗎?

這概念跟Bloggere的DNS設定是同方式，

可參考『https://blog.s7an.com/2022/10/solved-bloggercloudflaressl-how-to-use.html』

Step.10 大功告成~

接著就是等著DNS生效哩!

然後就可以看到網站上線囉~~

由於初次使用GCP，過程誤刪了bucket的權限，用了兩天研究GCP文件及參考網路分享文章，

最後以開新專案並交查叉比對與測試結果，終於取得誤刪的bucket權限了 T____T

大概理出一個概念，詳細解決方式整理先~

敬請期待。

Ref:

https://www.minwt.com/website/server/21580.html

https://jerrynest.io/gcp-server/

https://ikala.cloud/cloud-storage-application-website/