靜態網站範例和技巧

您可以在 Cloud Storage bucket 中託管靜態網站。使用 bucket 提供 HTML、CSS、JavaScript 和圖片等素材資源。您也可以設定自訂索引和錯誤頁面，以及管理網站的子網域。本頁提供設定範例和提示，說明如何在 Cloud Storage 託管靜態網站。

如要開始使用，請參閱「託管靜態網站」。

專業頁面

設定值區來託管靜態網站時，您可以指定特殊頁面，例如索引頁面和錯誤頁面。以下各節將說明這些頁面。

索引頁面

索引頁面 (又稱為網路伺服器目錄索引) 是指訪客要求的網址不具任何相關檔案時，您要提供給訪客瀏覽的檔案內容。指派 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，使用者會收到一般錯誤網頁。

網站設定範例

三物件 bucket

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

• MainPageSuffix = "index.html"
• NotFoundPage = "404.html"
• 這個 bucket 包含三個公開共用的物件：「index.html」、「404.html」和「dir/index.html」。

注意：http://www.example.com/dir/ 處可能存在空物件。如果存在空物件，則會傳回該物件，而不是目錄的 index.html 檔案。如果嘗試存取 http://www.example.com/dir/ 時收到 301 HTTP 回應，請參閱疑難排解主題。

下表列出所選網址提供的內容：

要求的網址	提供的內容	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	回應的主體空白，且 Location 標頭指向「dir/index.html」。	301
http://www.example.com/dir/	「dir/index.html」物件，並假設 /dir/ 中沒有存在任何零位元組物件	200
	零位元組的空白物件 (如果存在於 /dir/)。要瞭解如何移除這個零位元組物件，請參閱疑難排解主題。	301

雙物件 bucket

假設名稱為 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

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

使用設為網站的 bucket 時，請留意以下事項

使用 bucket 代管靜態網站時，請注意下列事項。

新增子網域

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

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

2. 如果您按照「代管靜態網站」教學課程的說明，透過 HTTPS 提供內容，請在 Google Cloud 控制台中編輯負載平衡器，如下所示：

   1. 在「Backend configuration」(後端設定) 中，選取您建立的新 bucket，建立新的後端 bucket test-bucket。
   2. 在「主機與路徑規則」部分，新增規則：

      Hosts                  Paths     Backends
      test.example.com       /*        test-bucket
      

   3. 在「Frontend configuration」(前端設定) 部分，新增前端 IP 和通訊埠，並使用與第一項設定相同的值，但有下列例外狀況：

      • 在「IP address」(IP 位址) 部分，建立並保留新的 IP 位址。
      • 在「Certificate」(憑證) 部分，為 test.example.com 建立新的 SSL 憑證。

3. 更新負載平衡器後，請使用新前端設定的 IP 位址，在網域註冊服務中新增 A 記錄：

   NAME                  TYPE     DATA
   test                  A        IP_ADDRESS
   

注意： 如果您使用 CNAME 重新導向，在不使用負載平衡器的情況下提供服務，則 bucket 名稱必須與子網域 test.example.com 相符。在這種情況下，由於您已驗證網域 example.com，因此可以建立 bucket 來支援子網域，不需額外驗證。建立新的 bucket 後，請為子網域新增 CNAME 記錄：

NAME                  TYPE     DATA
test                  CNAME    c.storage.googleapis.com.

API 行為

MainPageSuffix 和 NotFoundPage 網站設定僅適用於透過 CNAME 或 A 重新導向傳送至 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.html 和 index.html。

託管動態網站的靜態資產

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

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

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

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

為動態網站代管靜態資產時，不需要建立 DNS 記錄，也不需要像靜態網站一樣指向 bucket 或負載平衡器。舉例來說，您可以建立名為 www_example_com_assets 的 bucket，並將適當的資產設為公開共用，然後使用 Cloud Storage 網域存取這些資產。舉例來說，假設您在公開共用的 bucket www_example_com_assets 中有 JavaScript 檔案 library.js，則可以透過 http://storage.googleapis.com/www_example_com_assets/library.js 存取該檔案。

設定快取參數

您可以設定 Cache-Control 中繼資料來控制網站資產的快取方式以及是否啟用快取。一般來說，只有在所有匿名使用者都能存取物件時，才需要設定快取控制中繼資料。如果物件是從 Cloud Storage bucket 提供，且屬於靜態網站的一部分，就必須符合這項條件。

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

您也可以使用 Cloud CDN，在靠近使用者的位置快取外部 HTTP(S) 負載平衡內容，這通常可以降低放送費用。詳情請參閱「快取」。

監控費用

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

如果您使用外部應用程式負載平衡器設定 HTTPS，可能也需要支付網路費用。詳情請參閱網路定價。

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

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

如果您目前是 Google Cloud 使用者，可以在帳單頁面查看專案費用的詳細明細。

疑難排解

如要瞭解使用 bucket 提供靜態網站內容時的常見問題，請參閱「疑難排解」。

後續步驟

• 試用 Google Cloud 使用 Cloud Storage 的快速部署解決方案。
• 瞭解其他網頁供應選項。 Google Cloud

歡迎試用

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

免費試用 Cloud Storage