静的ファイルの保存と提供

多くの場合、アプリケーションでは動的リクエストの処理に加え、JavaScript、画像、CSS などの静的ファイルを提供する必要があります。スタンダード環境のアプリでは、静的ファイルを Cloud Storage などの Google Cloud Platform オプションを使用して提供できます。また、アプリから直接提供することも、サードパーティのコンテンツ配信ネットワーク(CDN)を使用して提供することもできます。

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

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

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

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

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

Google Cloud クライアント ライブラリは、汎用的な Node.js クライアントを Cloud Storage に提供します。これにより、App Engine アプリで 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 を使用して静的アセットを提供する方法の詳細については、静的ウェブサイトをホストする方法をご覧ください。

他の GCP サービスからファイルを提供する

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

アプリからファイルを直接提供する

スタンダード環境で 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 リファレンスをご覧ください。

サードパーティのコンテンツ配信ネットワークから提供する

外部のサードパーティ CDN を使用して静的ファイルを提供し、動的リクエストをキャッシュに保存することはできますが、その場合、アプリのレイテンシとコストが増える可能性があります。

パフォーマンスを向上させるには、CDN Interconnect をサポートしているサードパーティ CDN を使用してください。

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

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

次の例では、アプリが 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 フレームワークでは、静的ファイルをアプリから直接提供できます。静的コンテンツを構成して使用する方法の詳細については、各フレームワークのドキュメントをご覧ください。

このページは役立ちましたか?評価をお願いいたします。

フィードバックを送信...

Node.js 用 App Engine スタンダード環境に関するドキュメント