提供靜態檔案

除了處理動態要求外,應用程式也經常需要提供額外的靜態檔案,像是 JavaScript、圖片和 CSS 等。標準環境可讓您決定如何提供應用程式的靜態內容。您可以從應用程式直接提供靜態內容、將靜態內容託管在 Cloud Storage 等 GCP 選項上,或是使用第三方內容傳遞聯播網 (CDN) 提供。

從 App Engine 提供檔案

從應用程式提供檔案通常是最簡便的做法,但是您應該考慮下列幾項缺點:

  • 靜態檔案的要求使用的資源可能也會用於動態要求。
  • 視您的設定而異,從應用程式提供檔案可能會造成回應延遲,進而影響到為了處理負載而建立新執行個體的時機。

提示:在實際工作環境中,最佳做法通常是在 GCP 或外部使用第三方 CDN,將靜態內容從應用程式單獨提供。

透過應用程式提供靜態檔案的範例

大多數的網路架構支援提供靜態檔案。在本範例中,應用程式會使用 express.static 中介軟體,從 ./public 目錄提供檔案給 /static 網址。

'use strict';

const express = require('express');
const app = express();

app.set('view engine', 'pug');

// Use the built-in express middleware for serving static files from './public'
app.use('/static', express.static('public'));

app.get('/', (req, res) => {
  res.render('index');
});

// Start the server
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.log(`App listening on port ${PORT}`);
  console.log('Press Ctrl+C to quit.');
});

此視圖參照 /static/main.css

doctype html
html(lang="en")
  head
    title Static Files
    meta(charset='utf-8')
    link(rel="stylesheet", href="/static/main.css")
  body
    p This is a static file serving example.

樣式表本身位於 ./public/css,並且從 /static/main.css 提供。

body {
  font-family: Verdana, Helvetica, sans-serif;
  background-color: #CCCCFF;
}

其他像是 HapiKoaSails 等 Node.js 架構通常可支援從應用程式直接提供靜態檔案。如要進一步瞭解設定及使用靜態內容的方式,請參閱各自的說明文件。

從 GCP 提供檔案

您也可以選擇使用 Cloud CDNCloud Storage 等其他 GCP 儲存空間服務。

從 Cloud Storage 提供檔案

Cloud Storage 可讓您託管動態網路應用程式的靜態資產。改用 Cloud Storage (而非直接從應用程式提供) 可以帶來以下優點:

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

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

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

這個簡易範例會使用 Cloud SDK 建立 Cloud Storage 值區並上傳靜態資產:

  1. 建立值區。通常會使用專案 ID 為值區命名,但也可以自選名稱。全域中的值區名稱不得重複。

    gsutil mb gs://<your-bucket-name>
    
  2. 設定 ACL,針對值區中的項目授予讀取存取權。

    gsutil defacl set public-read gs://<your-bucket-name>
    
  3. 將項目上傳至值區。上傳及更新資產的最快、最簡單方式通常是使用 rsync 指令。您也可以使用 cp

    gsutil -m rsync -r ./static gs://<your-bucket-name>/static
    

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

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

如需進一步瞭解如何使用 Cloud Storage API 從應用程式內動態上傳、下載及操作檔案,請參閱使用 Cloud Storage

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

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

您應該使用支援 CDN Interconnect 的第三方 CDN,才能獲得更好的效能。

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

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

這個網頁
Node.js 適用的 App Engine 彈性環境文件