在 App Engine 中託管靜態網站

區域 ID

REGION_ID 是 Google 根據您在建立應用程式時選取的地區所指派的簡寫代碼。雖然某些區域 ID 可能看起來與常用的國家/地區代碼相似，但此代碼並非對應國家/地區或省份。如果是 2020 年 2 月後建立的應用程式，App Engine 網址會包含 REGION_ID.r。如果是在此日期之前建立的現有應用程式，網址中則可選擇加入地區 ID。

進一步瞭解區域 ID。

您可以使用 App Engine 託管靜態網站。靜態網頁可能會採用一些用戶端技術，包括 HTML、CSS 和 JavaScript 等等。由於 App Engine 標準環境提供免費方案，因此在 App Engine 上託管靜態網站的成本，可能比使用傳統的主機供應商來得更低。

在 App Engine 上託管的網站會託管在 REGION_ID.r.appspot.com 子網域中，例如 [my-project-id].uc.r.appspot.com。部署網站之後，您就能將自有的網域名稱對應到 App Engine 託管的網站。

事前準備

您必須先完成下列步驟，才能在 App Engine 上託管網站：

  1. 建立新的 Google Cloud 控制台專案，或擷取要使用的現有專案的專案 ID：

    前往「Projects」(專案) 頁面

  2. 安裝並初始化 Google Cloud CLI：

    下載 SDK

建立要在 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 檔案：

  1. 建立與專案 ID 同名的目錄。您可在主控台中找到自己的專案 ID。
  2. 在剛剛建立的目錄中，建立名為 app.yaml 的檔案。

  3. 編輯 app.yaml 檔案，並根據網站需求新增處理常式元素。例如，您可以使用下列方式建立 Python 執行階段的 app.yaml 檔案：

    runtime: python39

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 標記以指定替代 Google Cloud 主控台專案 ID，而不使用您在 gcloud CLI 中初始化為預設值的 ID。範例：--project [YOUR_PROJECT_ID]
  • 加上 -v 標記可指定版本 ID；如未加入，將由系統自動產生。範例：-v [YOUR_VERSION_ID]

如要進一步瞭解如何透過指令列部署應用程式，請參閱「部署應用程式」一文。

查看應用程式

如要啟動瀏覽器並在 https://PROJECT_ID.REGION_ID.r.appspot.com 查看應用程式，請執行下列指令：

gcloud app browse

後續步驟

從自訂網域提供在 App Engine 託管的網站。