您可使用 Google App Engine 來託管靜態網站。靜態網頁可包含 HTML、CSS 和 JavaScript 等用戶端技術。由於 App Engine 提供免費方案,因此在 App Engine 上託管靜態網站的成本,可能比使用傳統的主機供應商來得更低。
App Engine 上託管的網站是在 appspot.com
子網域進行託管,例如 [my-project-id].appspot.com
。在部署網站之後,您就能將自有的網域名稱對應到在 App Engine 託管的網站。
事前準備
您必須執行下列操作,才能在 Google App Engine 上進行網站託管:
建立新的 GCP 主控台專案,或擷取現有專案的專案 ID 以進行使用:
提示:您可以使用 gcloud 指令列工具擷取現有專案 ID 清單。
安裝並初始化 Google Cloud SDK:
列出您的 GCP 主控台專案 ID
在指令列中執行:
gcloud projects list
建立要在 Google App Engine 上託管的網站
專案的基本結構
本指南採用下列專案結構:
app.yaml
:用於進行 App Engine 應用程式的設定。www/
:用於儲存所有靜態檔案 (例如 HTML、CSS、圖片和 JavaScript) 的目錄。css/
:用於儲存樣式表的目錄。style.css
:用於格式化網站的外觀與風格的基本樣式表。
images/
:用於儲存圖片的選用目錄。index.html
:用於顯示網站內容的 HTML 檔案。js/
:用於儲存 JavaScript 檔案的選用目錄。- 其他資產目錄。
建立 app.yaml
檔案
app.yaml
檔案是告知 App Engine 如何將網址對應到靜態檔案的設定檔。您在下列步驟中新增的處理常式,會在有人造訪網站時載入 www/index.html
,且所有靜態檔案將儲存於 www
目錄並從此處呼叫。
請在應用程式根目錄中建立 app.yaml
檔案:
- 建立與專案 ID 同名的目錄。您可在主控台中找到自己的專案 ID。
- 在剛剛建立的目錄中,建立名為
app.yaml
的檔案。 編輯
app.yaml
檔案,並將下列程式碼加入檔案中:runtime: python27 api_version: 1 threadsafe: true handlers: - url: / static_files: www/index.html upload: www/index.html - url: /(.*) static_files: www/\1 upload: www/(.*)
如需更多 app.yaml
檔案的參考資訊,請參閱 app.yaml
參考說明文件。
建立 index.html
檔案
建立 HTML 檔案,當有人前往網站的根網頁時,為其提供該檔案。請將這個檔案儲存於 www
目錄。
<html>
<head>
<title>Hello, world!</title>
<link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
<h1>Hello, world!</h1>
<p>
This is a simple static HTML file that will be served from Google App
Engine.
</p>
</body>
</html>
將應用程式部署至 App Engine
當您在部署應用程式檔案時,網站將會上傳至 App Engine。如要部署應用程式,請從 app.yaml
檔案所在的應用程式根目錄中執行下列指令:
gcloud app deploy
選用標記:
- 加上
--project
標記可指定替代 GCP 主控台專案 ID,而不使用您在gcloud
工具中初始化為預設值的 ID。範例:--project [YOUR_PROJECT_ID]
- 加上
-v
標記可指定版本 ID;如未加入,將由系統自動產生。範例:-v [YOUR_VERSION_ID]
如要進一步瞭解如何從指令列部署應用程式,請參閱部署 Python 2 應用程式。
查看應用程式
如要啟動瀏覽器並前往 https://[YOUR_PROJECT_ID].appspot.com
查看應用程式,請執行下列指令:
gcloud app browse