儲存及提供靜態檔案

除了處理動態要求以外,應用程式通常需要提供 JavaScript、圖片和 CSS 等靜態檔案。標準環境中的應用程式可以透過 Cloud Storage 等 Google Cloud 選項提供靜態檔案,也可以直接提供檔案,或是使用第三方內容傳遞聯播網 (CDN)。

Google Cloud 提供免費方案,因此您在 Google Cloud 中託管靜態網站的費用可能會比使用傳統的主機供應商來得更低。

從 Cloud Storage 提供檔案

您可以將動態網頁應用程式的靜態資產託管於 Cloud Storage。使用 Cloud Storage (而不直接從應用程式提供檔案) 的優點如下:

  • Cloud Storage 在本質上就是當成內容傳遞聯播網使用。根據預設,凡是可公開讀取的物件在全域 Cloud Storage 網路中都能夠快取,因此不需要特別進行設定。
  • 無須向 Cloud Storage 提供靜態資產,因此可減輕應用程式的負載。這種做法可能有助大幅降低應用程式的執行成本,實際情況視您擁有的靜態資產數量以及存取的頻率而定。
  • 如果使用 Cloud Storage 存取內容,頻寬費用通常較低。

您可以使用 Google Cloud CLICloud Storage API 將資產上傳至 Cloud Storage。

Google Cloud 用戶端程式庫提供慣用的 Cloud Storage 用戶端,讓您使用 App Engine 應用程式中的 Cloud Storage 儲存及擷取資料。

從 Cloud Storage 值區提供資產的範例

本範例會使用 gcloud CLI 建立 Cloud Storage bucket 並上傳靜態資產:

  1. 建立值區。用專案 ID 來當做值區的名稱是很常見的做法,但您不一定採用這種命名方式。值區名稱不得重複。

    gcloud storage buckets create gs://<var>your-bucket-name</var>
    
  2. 設定 IAM 政策,將讀取存取權授予值區中的項目。

    gcloud storage buckets add-iam-policy-binding gs://<var>your-bucket-name</var> --member=allUsers --role=roles/storage.objectViewer
    
  3. 將項目上傳到值區。使用 rsync 指令通常可以最快速且最輕鬆地上傳及更新資產。您也可以使用 cp

    gcloud storage rsync ./static gs://<var>your-bucket-name</var>/static --recursive
    

您現在可以透過 https://storage.googleapis.com/your-bucket-name/static/... 來存取靜態資產。

如要進一步瞭解如何使用 Cloud Storage 來提供靜態資產,包括從自訂網域名稱提供資產的方式,請參閱如何託管靜態網站

透過其他 Google Cloud 服務提供檔案

您也可以選擇使用 Cloud CDN 或其他 Google Cloud 儲存空間服務。

直接透過應用程式提供檔案

如要在標準環境中提供靜態檔案,請使用 static_dirstatic_files 元素,在 app.yaml 檔案中定義處理常式。

靜態檔案或靜態目錄中的內容不會受到 app.yaml 檔案中的縮放設定影響。對靜態檔案或靜態目錄的要求會直接由 App Engine 基礎架構處理,不會傳送至應用程式的語言執行階段。

設定靜態檔案處理常式

如要將應用程式設為從 /static 網址提供 ./public 目錄,請在 app.yaml 檔案中定義處理常式。

以下示範如何提供範例應用程式 ./public 目錄中的靜態檔案。這個應用程式的 index.html 頁面範本會指示瀏覽器載入 main.css 檔案,例如:

<link type="text/css" rel="stylesheet" href="/static/css/main.css">

./public 目錄是在專案 app.yaml 檔案的 static_dir 元素中定義:

handlers:
  - url: /favicon\.ico
    static_files: favicon.ico
    upload: favicon\.ico

  - url: /static
    static_dir: public

  - url: /.*
    secure: always
    redirect_http_response_code: 301
    script: auto

上述範例中的 handlers 部分會處理三個網址模式:

  • /favicon.ico 處理常式會將專門針對 /favicon.ico 的要求,對應至應用程式根目錄中名為 favicon.ico 的檔案。

  • /static 處理程序會將開頭為 /static 的網址要求對應至 當 App Engine 收到以 /static 開頭的網址要求時,會將路徑的其餘部分對應至 ./public 目錄中的檔案。如果在目錄中找到適當的檔案,系統會將該檔案的內容傳回給用戶端。

  • /.* 處理程序會比對所有其他網址,並將這些網址導向至您的應用程式。

系統會依照模式在 app.yaml 中的出現順序進行測試,因此應先定義靜態檔案的模式,再定義 /.* 模式。詳情請參閱 app.yaml 參考資料

從第三方內容傳遞聯播網提供

您可以使用任何外部第三方 CDN 來提供靜態檔案以及快取動態要求,但應用程式的延遲時間和成本可能會隨之增加。

建議您使用支援 CDN 互連網路的第三方 CDN,以獲得更好的效能。