静的ファイルの提供

動的リクエストを処理するだけでなく、アプリケーションが JavaScript、画像、CSS などの追加の静的ファイルを提供しなければならないことはよくあります。スタンダード環境では、アプリケーションで静的コンテンツを提供する方法をユーザーが決定できます。アプリケーションから静的コンテンツを直接提供する、Cloud Storage などの GCP オプションでホストする、サードパーティのコンテンツ配信ネットワーク(CDN)を使用するといった選択肢があります。

App Engine では無料枠が用意されているため、App Engine で静的サイトをホストすると、従来のホスティング プロバイダを利用する場合よりもコストを削減できます。

App Engine からファイルを提供する

スタンダード環境で Node.js の静的ファイルを提供するには、app.yaml ファイル内で static_dir 要素または static_files 要素を使用してハンドラを定義します。

静的ファイル ハンドラを構成する

./public ディレクトリを /static URL から提供するようにアプリを構成するには、app.yaml ファイル内でハンドラを定義します。

次の例は、サンプルアプリの ./public ディレクトリに格納されている静的ファイルを提供する方法を示しています。このアプリの index.html ページのテンプレートは、ブラウザに main.css ファイルを読み込むよう指示します。次に例を示します。

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

./public ディレクトリは、プロジェクトの static_dir ファイル内の app.yaml 要素で定義されています。

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

  - url: /static
    static_dir: public

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

上記の例の handlers セクションには、URL の 2 つのハンドラが含まれています。App Engine は /static で始まる URL に対するリクエストを受信すると、ファイルパスの残りの部分を ./public ディレクトリ内のファイルにマッピングします。このディレクトリ内に該当するファイルがある場合、そのファイルのコンテンツがクライアントに返されます。他のすべての URL は /.* パターンと一致し、アプリによって処理されます。

URL パスパターンは app.yaml 内での出現順でテストされます。したがって、静的ファイルのパターンは /.* パターンの前に定義する必要があります。詳しくは、app.yaml リファレンスをご覧ください。

ローカルでの開発用のファイルを提供する

ほとんどのウェブ フレームワークには、静的ファイルを提供するためのサポートが含まれるので、開発中はそのサポートを利用してファイルをローカルで提供できます。

次の例では、アプリが express.static ミドルウェアを使用して ./public ディレクトリ内のファイルを /static URL に提供しています。特にこのサンプルアプリでは、./public/css にあるスタイルシートを URL /static/main.css から提供しています。

'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.

通常、HapiKoaSails などの他の Node.js フレームワークでは静的ファイルをアプリから直接提供できます。静的コンテンツを構成して使用する方法の詳細については、各フレームワークのドキュメントをご覧ください。

GCP からファイルを提供する

Cloud CDN を使用したり、Cloud Storage などの他の GCP ストレージ サービスを使用したりすることもできます。

Cloud Storage からファイルを提供する

動的ウェブアプリの静的アセットをホストするために Cloud Storage を使用できます。アプリから直接提供する代わりに Cloud Storage を使用すると、次のメリットがあります。

  • Cloud Storage は基本的に、コンテンツ配信ネットワークとして機能します。デフォルトでは、一般公開されているすべてのオブジェクトがグローバル Cloud Storage ネットワークにキャッシュされるため、特別な構成は必要ありません。
  • 静的アセットの提供を Cloud Storage にオフロードすることで、アプリの負荷が軽減されます。静的アセットの数とアクセスの頻度によっては、アプリの実行コストを大幅に削減できる可能性があります。
  • コンテンツにアクセスするための帯域幅の料金は、多くの場合、Cloud Storage を利用することにより安くなります。

アセットは、Cloud SDK または Cloud Storage API を使用して Cloud Storage にアップロードできます。

Cloud Storage バケットから提供する例

Cloud Storage バケットを作成し、Cloud SDK を使用して静的なアセットをアップロードする簡単な例を示します。

  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 スタンダード環境に関するドキュメント