在 Google App Engine 上託管靜態網站

您可使用 Google App Engine 來託管靜態網站。靜態網頁可包含 HTML、CSS 和 JavaScript 等用戶端技術。由於 App Engine 提供免費方案,因此在 App Engine 上託管靜態網站的成本,可能比使用傳統的主機供應商來得更低。

App Engine 上託管的網站是在 appspot.com 子網域進行託管,例如 [my-project-id].appspot.com。在部署網站之後,您就能將自有的網域名稱對應到在 App Engine 託管的網站。

事前準備

您必須執行下列操作,才能在 Google App Engine 上進行網站託管:

  1. 建立新的 GCP 主控台專案,或擷取現有專案的專案 ID 以進行使用:

    前往專案頁面

    提示:您可以使用 gcloud 指令列工具擷取現有專案 ID 清單。

  2. 安裝並初始化 Google Cloud SDK:

    下載 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 檔案,並將下列程式碼加入檔案中:

    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 應用程式

查看應用程式

如要啟動瀏覽器並前往 https://[YOUR_PROJECT_ID].appspot.com 查看應用程式,請執行下列指令:

gcloud app browse

後續步驟

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

本頁內容對您是否有任何幫助?請提供意見:

傳送您對下列選項的寶貴意見...

這個網頁
Python 2 適用的 App Engine 標準環境