静的ファイルの提供

アプリケーションでは、動的リクエストを処理するほか、JavaScript、画像、CSS などの静的ファイルを提供する必要が生じることがよくあります。フレキシブル環境のアプリで静的ファイルを提供する方法には、Cloud Storage などの Google Cloud オプションを使用する、アプリから直接提供する、サードパーティのコンテンツ配信ネットワーク(CDN)を使用するという選択肢があります。

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

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

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

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

Google Cloud クライアント ライブラリは、汎用的な Java クライアントを 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 を使用して静的アセットを提供する方法の詳細については、静的ウェブサイトのホスティングをご覧ください。

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

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

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

通常、アプリからファイルを提供するのに複雑な設定は必要ありませんが、考慮すべき弱点がいくつかあります。

  • 静的ファイルのリクエストにより、動的リクエストに使用できるはずのリソースが消費される可能性があります。
  • 構成によっては、アプリからファイルを提供する際にレスポンスのレイテンシが生じることがあります。負荷を処理するために新しいインスタンスを作成する場合にも、この影響を受けることがあります。

ヒント: 本番環境では一般に、Google Cloud 内で、または外部のサードパーティ CDN を使用して、静的コンテンツをアプリとは別に提供することをおすすめします。

アプリで静的ファイルを提供する例

Java ランタイムのサーブレット コンテナはアプリのデプロイ記述子web.xml ファイル)を使用して、静的アセットを含むサーブレットに URL をマッピングします。web.xml を指定しない場合はデフォルトが使用され、デフォルト サーブレットにすべてがマッピングされます。

この例で、./src/main/webapp/index.html/stylesheets/styles.css から提供されるスタイルシートを参照します。

<!doctype html>
<html>
<head>
<title>Static Files</title>
<link rel="stylesheet" type="text/css" href="/stylesheets/styles.css">
</head>
<body>
  <p>This is a static file serving example.</p>
</body>
</html>

styles.css ファイルは ./src/main/webapp/stylesheets/styles.css にあります。

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

web.xml で静的ファイルの処理方法を明示的に構成できます。たとえば、拡張子が .jpg になっているすべてのファイルのリクエストをマッピングするには、次のように設定します。

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.jpg</url-pattern>
</servlet-mapping>

Play などのウェブ フレームワークを使用している場合は、静的アセットについてフレームワークのドキュメントを参照する必要があります。