跳到主要內容

透過Google Cloud Storage建置您的靜態網站

大家知道靜態網站的服務越來越先進,透過Github Page或是S3都可以快速的建置好可以提供服務的靜態網站,這次要介紹的是Google Cloud Storage上建置靜態網站的功能...

首先我們先準備一個美美的靜態網站,不少人可能想到用PC的網頁編輯器,我這邊是使用Jetstrap的雲端服務來拉出基本的版型:



左上方的是提供下載專案的地方,下載之後可以解壓縮後看到裡面的html跟css相關檔案



接下來就是透過Google Cloud Storage來把這個些檔案變成一個網站囖,設定相當簡單...

Step 1 : 在Google Cloud Storage建置您的domain bucket,並把相關檔案上傳到這個bucket裡面

這邊需要先有Cloud Platform Project,並且開通好Cloud Storage的服務,這邊不贅述這些設定... 我在這邊建立的是gsweb.micloud.tw這個網站,因此bucket用這個命名(這邊必須注意,Google會針對domain name進行認證,如果domain name非自己所屬,或被別人註冊了,將無法使用該domain name來建立bucket),並且將檔案上傳,主頁修改為index.html。


這邊完成後,仍需要在最右邊的"SHARED PUBLICLY"的地方勾選發佈,讓全世界的人可以看到您的網站...

Step 2 : 透過gcutil將bucket變成一個網站

下面指令可以讓您設定一個bucket成為靜態網站,並且指定一個主頁,以及錯誤頁面,相關的help可以透過gsutil help setwebcfg來檢視...

$ gsutil web set -m index.html -e 404.html gs://gsweb.micloud.tw



Step 3 : 設定Domain name CNAME對應

接下來您需要到您的DNS server上指定一筆CNAME記錄,將yourdomain.com對應到c.storage.googleapis.com,指定完成後,在nslookup的查詢會類似這樣:



這也表示您的網站應該已經生效了:






留言

  1. 請問
    當我創建新專案時 並無法使用 www.aaa.com
    只能改為 www-aaa-com
    這樣要如何讓自己的網域對應到GCS呢?

    回覆刪除
  2. 由於website bucket是需要比較嚴謹的認證
    因此Google會需要先通過domain的身份確認後才可以讓使用者來開立
    詳細說明可以參考:

    https://cloud.google.com/storage/docs/bucket-naming?hl=en_US&&&&&&&&&&_ga=1.111877196.953939222.1422701068#verification

    回覆刪除
  3. 這個方案對只租網域,但是沒有DNS的可行嗎?

    回覆刪除
  4. 沒有dns server的嗎?cloudflare本身有提供dns server哦 :)

    回覆刪除

張貼留言

這個網誌中的熱門文章

透過Google Apps Script結合Google Form做即時郵件通知

體驗過Google Apps Script的功能後,也發現他結合GmailApps的模組 GmailApps的應用可以用在表單填寫完成後,做發信的通知 例如您開立了一個訂購的表單,為了要在第一時間通知商家有訂單進入 就可以直接呼叫Gmail做發信的通知,讓手持Smart Phone的我們可以很快的知道生意上門了! 下面規劃三個function,其中: onCommit():為form commit時候觸發的function,需要掛載於form commit trigger上 jsonArrToTable():目的將json array解析成為一個Table getLastRowTable():目的將整個table的回傳過濾為剩下第一筆(表頭,含有Form的欄位說明)與最後一筆(原則上就是剛剛送出的那一筆表單) 完整程式碼如下: function onCommit(){   var sheet = SpreadsheetApp.getActiveSheet();   var rows = sheet.getDataRange();   var numRows = rows.getNumRows();   var values = rows.getValues();   var content = getLastRowTable(values);   var htmlBody = "Hi Admin: <br/><br/>有訂單拉,檢查一下吧! <br/><br/>" + content + '<br/><br/>Send by Google Apps';   GmailApp.sendEmail(     " your-email-address@gmail.com ",      "Order Confirm Notice",      htmlBody,      {from: ' from-email-...

Share a chrome plugin for manage google cloud platform

好玩意兒報報.... 同事的新作,把Google Project List在Chrome Plugin中! 對一次管理多個專案的人來說,真得超方便的拉! 下載: https://chrome.google.com/webstore/detail/gdclauncher/bicgkglnnilldakpenngnblekooejnpg 使用說明: 1. Use browser url bar to quick search: Type "gdcl" in browser Press "TAB" to start search Type the project id key word then select the search result... 2. Using quick launch bar... You can search by keyword or click project name to go to the project or gae link to go to gae or go to billing page....

Cloud Monitor嚐鮮

GCP上,我們非常想要的一個功能,終於問世.... Cloud Monitor來了!