靜態網站範例和技巧

本頁提供使用值區託管靜態網站的範例和提示。

專業頁面

索引頁面

索引頁面 (又稱為網路伺服器目錄索引) 是指訪客要求的網址不具任何相關檔案時,您要提供給訪客瀏覽的檔案內容。您指派 MainPageSuffix 屬性時,Cloud Storage 會尋找名稱前置詞與訪客要求的網址相符的檔案。

例如,假設您將靜態網站的 MainPageSuffix 設定為 index.html。此外,假設您的值區 www.example.com 中沒有任何名稱為directory 的檔案。在這種情況下,如果使用者要求網址 http://www.example.com/directory,Cloud Storage 會嘗試提供檔案 www.example.com/directory/index.html。但要是這個檔案不存在,Cloud Storage 就會傳回錯誤網頁。

使用者要求頂層網站時,MainPageSuffix 也能控制要提供哪個檔案。我們繼續使用上面這個例子;假如使用者要求 http://www.example.com,Cloud Storage 就會嘗試提供 www.example.com/index.html 檔案。

嘗試存取結尾有斜線的網址 (例如 http://www.example.com/dir/) 時,請參閱「疑難排解」。

錯誤網頁

錯誤網頁是指靜態網站訪客要求的網址沒有相符的現有檔案時,您要傳回的檔案。如已指派 MainPageSuffix,Cloud Storage 只會在沒有要求名稱的檔案或適用的索引頁面時傳回錯誤頁面。

系統傳回錯誤網頁時,顯示的 http 回應碼是 404。如要控制用哪個檔案來當做錯誤網頁,可以使用 NotFoundPage 資源;如果您未設定 NotFoundPage,使用者會收到一般錯誤網頁。

網站設定範例

三個物件的值區

假設名稱為 www.example.com 的值區已設定為網站,且使用以下設定和檔案:

  • MainPageSuffix = "index.html"
  • NotFoundPage = "404.html"
  • 這個值區含有三個公開共用的物件:「index.html」、「404.html」和「dir/index.html」。

下表顯示針對所選網址提供的內容:

要求的網址 提供的內容 HTTP 回應碼
http://www.example.com
http://www.example.com/
http://www.example.com/index.html
「index.html」物件。 200
http://www.example.com/hello 「404.html」物件。 404
http://www.example.com/dir/index.html 「dir/index.html」物件。 200
http://www.example.com/dir 回應包含空白主體和指向「dir/index.html」的 Location 標頭。 301
http://www.example.com/dir/ 「dir/index.html」物件,並假設 /dir/ 中沒有存在任何零位元組物件 200
零位元組的空白物件 (如果存在於 /dir/)。要瞭解如何移除這個零位元組物件,請參閱疑難排解主題 301

兩個物件的值區

假設名稱為 www.example.com 的值區已設定為網站,且使用以下設定和檔案:

  • MainPageSuffix = "main.html"
  • NotFoundPage = "404.html"
  • 這個值區含有兩個公開共用的物件:「main.html」和「404.html」。

下表顯示針對所選網址提供的內容:

要求的網址 提供的內容 HTTP 回應碼
http://www.example.com
http://www.example.com/
「main.html」物件。 200
http://www.example.com/index.html 「404.html」物件。 404

如果物件已公開共用,您也可以透過以下網址查看這個物件:

http://storage.googleapis.com/BUCKET_NAME/OBJECT_NAME

例如,index.html 物件的網址會是:

http://storage.googleapis.com/www.example.com/index.html

如要進一步瞭解如何使用可公開存取的資料,請參閱存取公開資料一文。

已設定為網站的值區使用提示

使用值區託管靜態網站時,請注意下列事項。

新增子網域

假設除了從在 www.example.com 提供內容的值區之外,您也想從不同的值區在 test.example.com 提供內容。方法如下:

  1. 建立新 bucket,用於提供額外內容。

  2. 如果您按照「代管靜態網站」教學課程的步驟,透過 HTTPS 提供內容,請在Google Cloud 控制台中編輯負載平衡器,方法如下:

    1. 在「後端設定」中,選取您建立的新 bucket,即可建立新的後端 bucket test-bucket
    2. 如要新增主機和路徑規則,請按照下列步驟操作:
      Hosts                  Paths     Backends
      test.example.com       /*        test-bucket
      
    3. 針對「前端設定」,新增前端 IP 和通訊埠,並使用與第一個設定相同的值,但有以下例外狀況:

      • 建立並預約新的 IP 位址。
      • 在「憑證」部分,為 test.example.com 建立新的 SSL 憑證。
  3. 更新負載平衡器後,請使用新前端設定的 IP 位址,將新的 A 記錄新增至網域註冊服務:

    NAME                  TYPE     DATA
    test                  A        IP_ADDRESS
    

API 行為

MainPageSuffixNotFoundPage 網站設定僅適用於透過 CNAMEA 重新導向傳至 Cloud Storage 的要求。舉例來說,www.example.com 的要求會顯示索引頁面,但同等的 storage.googleapis.com/www.example.com 要求則不會。

因此,向 Cloud Storage 網域 (如 storage.googleapis.com/www.example.com) 發出的要求,會保留 API 行為。舉例來說,您可以繼續列出 www.example.com 值區中的物件,就像其他值區一樣。以 www.example.com 值區為例,您所收到的物件清單項目會包含 404.htmlindex.html

為動態網站託管靜態資產

您可以使用 Cloud Storage 為託管於 Google App EngineGoogle Compute Engine 等服務中的動態網站託管靜態資產。在值區中託管靜態資產 (如圖片或 JavaScript 檔案等) 的一些好處如下:

  • Cloud Storage 的運作方式類似內容傳遞聯播網 (CDN),因為在 Cloud Storage 網路中,預設會快取可公開讀取的物件。

  • 一般來說,透過 Cloud Storage 存取內容的頻寬費用較低。

  • 從 Cloud Storage 提供靜態內容時,可減輕網路伺服器的負載。

為動態網站託管靜態資產時,您不需要建立 DNS 記錄並指向值區或負載平衡器,這與靜態網站的情況不同。舉例來說,您可以將名為 www_example_com_assets 且具有適當資產的值區設為公開共用,然後透過 Cloud Storage 網域存取這些資產。例如,假設 JavaScript 檔案 library.js 位在公開共用的值區 www_example_com_assets 中,您便可以透過 http://storage.googleapis.com/www_example_com_assets/library.js 存取這個檔案。

設定快取參數

您可以設定 Cache-Control 中繼資料來控制網站資產的快取方式以及是否啟用快取。一般來說,只需為所有匿名使用者皆可存取的物件設定快取控制中繼資料。靜態網站從 Cloud Storage 值區提供的任何物件皆必須如此。

Cloud Storage 會將 3600 秒的快取設定套用至所有匿名使用者可存取的物件,除非您指定明確的快取控制設定。如需設定 Cache-Control 這類物件中繼資料的操作說明,請參閱查看及編輯中繼資料一文。

您也可以使用 Cloud CDN,將外部 HTTP(S) 負載平衡內容快取至較靠近使用者的位置,這通常會降低服務成本。詳情請參閱「快取」。

監控費用

如果您從已設定為靜態網站的值區提供資產,或從值區為在 Cloud Storage 之外託管的動態網站提供靜態資產,則應監控包含此值區之專案所產生的費用。提供內容會產生儲存內容、使用網路及執行擷取作業的 Cloud Storage 費用。詳情請參閱 Cloud Storage 定價頁面

如果您使用外部應用程式負載平衡器設定 HTTPS,可能還會產生網路費用。詳情請參閱「網路定價」。

定價範例頁面上的簡易計費範例可用於粗略估算低流量靜態網站應用實例的費用。但請注意,這個範例並未計入與外部應用程式負載平衡器相關的費用,這通常是靜態網站代管服務的最大費用。您可以使用 Pricing Calculator,根據預測使用量來產生預估費用。

初次使用 Google Cloud 的使用者可能符合免費試用資格。

如果您目前是 Google Cloud 使用者,可在「帳單」頁面取得專案費用的明細。

疑難排解

如要瞭解有關使用設定為提供靜態網站內容的值區的常見問題,請參閱疑難排解頁面。

後續步驟

歡迎試用

如果您未曾使用過 Google Cloud,歡迎建立帳戶,親自體驗實際使用 Cloud Storage 的成效。新客戶可以獲得價值 $300 美元的免費抵免額,可用於執行、測試及部署工作負載。

免費試用 Cloud Storage