本教學課程說明如何設定 Cloud Storage 值區來代管您網域的靜態網站。靜態網頁可能會採用一些用戶端技術,包括 HTML、CSS 和 JavaScript 等等。且不得包含伺服器端指令碼 (如 PHP) 的動態內容。
本教學課程說明如何透過 HTTP 提供內容。如需使用 HTTPS 的教學課程,請參閱託管靜態網站。
如需靜態網頁的範例和提示,包括如何託管動態網站的靜態資產,請參閱靜態網站頁面。
目標
教學課程內容:- 使用
CNAME
記錄將網域指向 Cloud Storage。 - 建立連結至您網域的值區。
- 上傳及分享您網站的檔案。
- 測試網站。
費用
本教學課程使用 Google Cloud的下列計費元件:
- Cloud Storage
請參閱「監控儲存費用小秘訣」,進一步瞭解託管靜態網站時會產生哪些費用;如需 Cloud Storage 費用詳細資訊,請參閱「定價」頁面。
事前準備
- Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Make sure that billing is enabled for your Google Cloud project.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Make sure that billing is enabled for your Google Cloud project.
- 有一個由您擁有或管理的網域。如果您目前沒有網域,可以透過許多現有服務 (例如 Cloud Domains) 來註冊新網域。
本教學課程使用的網域為
example.com
。 - 驗證您將要使用的網域確實是由您擁有或管理;請務必驗證頂層網域 (如
example.com
),而非子網域 (如www.example.com
)。注意:如果您擁有與值區相關聯的網域,先前可能就已經執行過這個步驟。如果您是透過 Cloud Domains 購買網域,系統會自動進行驗證。
將網域連線至 Cloud Storage
如要將網域連線至 Cloud Storage,請透過網域註冊服務建立 CNAME
記錄。CNAME
記錄是一種 DNS 記錄類型,可以將從您網域要求網址的流量導向要提供的資源,在本例則是指 Cloud Storage 值區內的物件。如果是 www.example.com
,CNAME
記錄可能包含下列資訊:
NAME TYPE DATA www CNAME c.storage.googleapis.com.
如需有關 CNAME
重新導向的詳細資訊,請參閱 CNAME
別名的 URI。
將網域連線至 Cloud Storage 的方式如下:
建立指向
c.storage.googleapis.com.
的CNAME
記錄。您的網域註冊服務應該會支援您管理網域 (包括新增
CNAME
記錄)。舉例來說,如果您使用 Cloud DNS,可以在「新增、修改及刪除記錄」頁面查看新增資源記錄的操作說明。
建立值區
建立值區時,名稱應符合您為網域建立的 CNAME
。
舉例來說,如果您新增了一個 CNAME
記錄,將 example.com
的 www
子網域指向 c.storage.googleapis.com.
,則使用 Google Cloud CLI 建立名稱為 www.example.com
的值區時,指令會類似於下列範例:
gcloud storage buckets create gs://www.example.com --location=US
如需使用不同工具建立值區的完整操作說明,請參閱建立值區。
上傳網站檔案
將您想讓網站提供的檔案新增到值區內:
控制台
- 在 Google Cloud 控制台,前往「Cloud Storage bucket」頁面。
在值區清單中,按一下您建立的值區名稱。
按一下「Objects」(物件) 分頁中的 [Upload files] (上傳檔案) 按鈕。
在檔案對話方塊中,找出並選取您需要的檔案。
上傳完成後,您應該會看到檔案名稱與值區中顯示的檔案資訊。
指令列
使用 gcloud storage cp
指令將檔案複製到 bucket。
例如,假設您要從目前的位置 Desktop
複製 index.html
:
gcloud storage cp Desktop/index.html gs://www.example.com
如果成功,回應會類似以下範例:
Completed files 1/1 | 164.3kiB/164.3kiB
用戶端程式庫
C++
詳情請參閱 Cloud Storage C++ API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
C#
詳情請參閱 Cloud Storage C# API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
Go
詳情請參閱 Cloud Storage Go API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
Java
詳情請參閱 Cloud Storage Java API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
下例示範如何上傳個別物件:
下例示範如何同時上傳多個物件:
下列範例會同時上傳具有相同前置字串的所有物件:
Node.js
詳情請參閱 Cloud Storage Node.js API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
下例示範如何上傳個別物件:
下例示範如何同時上傳多個物件:
下列範例會同時上傳具有相同前置字串的所有物件:
PHP
詳情請參閱 Cloud Storage PHP API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
Python
詳情請參閱 Cloud Storage Python API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
下例示範如何上傳個別物件:
下例示範如何同時上傳多個物件:
下列範例會同時上傳具有相同前置字串的所有物件:
Ruby
詳情請參閱 Cloud Storage Ruby API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
REST API
JSON API
安裝並初始化 gcloud CLI,以便為
Authorization
標頭產生存取權杖。使用
cURL
透過POST
物件要求呼叫 JSON API。對於 www.example.com 的索引頁面:curl -X POST --data-binary @index.html \ -H "Content-Type: text/html" \ -H "Authorization: $(gcloud auth print-access-token)" \ "https://storage.googleapis.com/upload/storage/v1/b/www.example.com/o?uploadType=media&name=index.html"
XML API
共用檔案
如要將 bucket 中的所有物件設為可供公開網路中的所有使用者讀取,請按照下列步驟操作:
控制台
- 在 Google Cloud 控制台,前往「Cloud Storage bucket」頁面。
在值區清單中,找到您要設為公開的值區名稱,然後點選這個名稱。
選取靠近頁面上方的 [Permissions] (權限) 分頁標籤。
如果「公開存取權」窗格顯示「非公開」,請點選標示為「移除禁止公開存取功能」的按鈕,然後在隨即顯示的對話方塊中點選「確認」。
按一下「授予存取權」add_box按鈕。
系統隨即會顯示「新增主體」對話方塊。
在「New principals」(新增主體) 欄位中輸入
allUsers
。在「請選擇角色」下拉式選單中,選取「Cloud Storage」子選單,然後點選「Storage 物件檢視者」選項。
按一下 [儲存]。
按一下「Allow public access」(允許公開存取)。
公開共用後,「public access」(公開存取權) 欄中會出現各個物件的連結圖示。點選這個圖示即可取得物件的網址。
指令列
使用 buckets add-iam-policy-binding
指令:
gcloud storage buckets add-iam-policy-binding gs://www.example.com --member=allUsers --role=roles/storage.objectViewer
用戶端程式庫
C++
詳情請參閱 Cloud Storage C++ API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
C#
詳情請參閱 Cloud Storage C# API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
Go
詳情請參閱 Cloud Storage Go API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
Java
詳情請參閱 Cloud Storage Java API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
Node.js
詳情請參閱 Cloud Storage Node.js API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
PHP
詳情請參閱 Cloud Storage PHP API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
Python
詳情請參閱 Cloud Storage Python API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
Ruby
詳情請參閱 Cloud Storage Ruby API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
REST API
JSON API
安裝並初始化 gcloud CLI,以便為
Authorization
標頭產生存取權杖。建立包含下列資訊的 JSON 檔案:
{ "bindings":[ { "role": "roles/storage.objectViewer", "members":["allUsers"] } ] }
使用
cURL
透過PUT
Bucket 要求呼叫 JSON API:curl -X PUT --data-binary @JSON_FILE_NAME \ -H "Authorization: Bearer $(gcloud auth print-access-token)" \ -H "Content-Type: application/json" \ "https://storage.googleapis.com/storage/v1/b/BUCKET_NAME/iam"
其中:
JSON_FILE_NAME
是您在步驟 2 建立的 JSON 檔案路徑。BUCKET_NAME
是要將物件設為公開的值區名稱。例如:my-bucket
。
XML API
XML API 不支援將值區中的所有物件設為可公開讀取,請改用 Google Cloud 控制台或 gcloud storage
。
如有需要,您也可以將部分值區設為公開存取。
針對非公開或不存在的檔案要求網址時,訪客會收到 http 403
回應碼。請參閱下一節,進一步瞭解如何新增顯示使用 http 404
回應碼的錯誤網頁。
建議採用:指派專用頁面
您可以指派索引頁面的尾碼 (由 MainPageSuffix
資源控制) 及自訂錯誤網頁 (由 NotFoundPage
資源控制)。雖然不一定要指派,但如果沒有索引頁面,使用者存取您的頂層網站 (例如 http://www.example.com
) 時就不會看到任何內容。詳情請參閱網站設定範例。
在下列範例中,會將 MainPageSuffix
設定為 index.html
,而 NotFoundPage
設定為 404.html
:
控制台
- 在 Google Cloud 控制台,前往「Cloud Storage bucket」頁面。
在值區清單中,找到您建立的值區。
按一下與值區相關聯的「Bucket overflow」(值區溢位) 選單 (more_vert),然後選取「Edit website configuration」(編輯網站設定)。
在網站設定對話方塊中,指定主網頁和錯誤頁面。
按一下 [儲存]。
指令列
使用加上 --web-main-page-suffix
和 --web-error-page
旗標的 buckets update
指令:
gcloud storage buckets update gs://www.example.com --web-main-page-suffix=index.html --web-error-page=404.html
如果執行成功,指令會傳回下列內容:
Updating gs://www.example.com/... Completed 1
用戶端程式庫
C++
詳情請參閱 Cloud Storage C++ API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
C#
詳情請參閱 Cloud Storage C# API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
Go
詳情請參閱 Cloud Storage Go API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
Java
詳情請參閱 Cloud Storage Java API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
Node.js
詳情請參閱 Cloud Storage Node.js API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
PHP
詳情請參閱 Cloud Storage PHP API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
Python
詳情請參閱 Cloud Storage Python API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
Ruby
詳情請參閱 Cloud Storage Ruby API 參考說明文件。
如要驗證 Cloud Storage,請設定應用程式預設憑證。 詳情請參閱「設定用戶端程式庫的驗證機制」。
REST API
JSON API
安裝並初始化 gcloud CLI,以便為
Authorization
標頭產生存取權杖。建立 JSON 檔案,將
website
物件中的mainPageSuffix
和notFoundPage
屬性設為需要的網頁:{ "website":{ "mainPageSuffix": "index.html", "notFoundPage": "404.html" } }
使用
cURL
透過PATCH
值區要求呼叫 JSON API。以 www.example.com 為例:curl -X PATCH --data-binary @web-config.json \ -H "Authorization: $(gcloud auth print-access-token)" \ -H "Content-Type: application/json" \ "https://storage.googleapis.com/storage/v1/b/www.example.com"
XML API
安裝並初始化 gcloud CLI,以便為
Authorization
標頭產生存取權杖。建立 XML 檔案,將
WebsiteConfiguration
元素中的MainPageSuffix
和NotFoundPage
元素設為需要的網頁:<WebsiteConfiguration> <MainPageSuffix>index.html</MainPageSuffix> <NotFoundPage>404.html</NotFoundPage> </WebsiteConfiguration>
使用
cURL
透過PUT
值區要求和websiteConfig
查詢字串參數呼叫 XML API。以 www.example.com 為例:curl -X PUT --data-binary @web-config.xml \ -H "Authorization: $(gcloud auth print-access-token)" \ https://storage.googleapis.com/www.example.com?websiteConfig
測試網站
在瀏覽器中要求網域名稱,驗證內容是從值區提供。如果您已經設定 MainPageSuffix
資源,可以使用物件路徑或單用網域名稱來進行驗證。
舉例來說,若有名為 test.html
的物件儲存在命名為 www.example.com
的值區,請在瀏覽器中查看 www.example.com/test.html
,檢查是否可存取該物件。
清除所用資源
完成教學課程後,您可以清除所建立的資源,這樣資源就不會繼續使用配額,也不會產生費用。下列各節將說明如何刪除或關閉這些資源。
刪除專案
如要避免付費,最簡單的方法就是刪除您為了本教學課程所建立的專案。
如要刪除專案:
- In the Google Cloud console, go to the Manage resources page.
- In the project list, select the project that you want to delete, and then click Delete.
- In the dialog, type the project ID, and then click Shut down to delete the project.