靜態網站範例和技巧

您可以在 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，使用者會收到一般錯誤網頁。

網站設定範例

三個物件的值區

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

• MainPageSuffix = "index.html"
• NotFoundPage = "404.html"
• 這個值區含有三個公開共用的物件：「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	主體空白的回應，以及指向「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. 在「Backend configuration」(後端設定) 中，選取您建立的新 bucket，藉此建立新的後端 bucket test-bucket。
   2. 在「Host and path rules」(主機與路徑規則) 中，按照下列步驟新增規則：

      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 重新導向，在沒有負載平衡器的情況下提供服務，值區名稱必須與子網域 test.example.com 相符。在這種情況下，由於您已驗證網域 example.com，所以不用再次驗證，即可建立值區來支援子網域。建立新值區後，請為子網域新增 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 記錄並指向值區或負載平衡器，這與靜態網站的情況不同。舉例來說，您可以將名為 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 使用者，可在「帳單」頁面取得專案費用的明細。

疑難排解

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

後續步驟

• 試用使用 Cloud Storage 的快速入門解決方案 Google Cloud 。
• 瞭解 Google Cloud上的其他網路服務選項。

歡迎試用

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

免費試用 Cloud Storage