静的ウェブサイトの例とヒント

このページでは、バケットを使用して静的ウェブサイトをホストする場合の例とヒントについて説明します。

特殊ページ

インデックス ページ

インデックス ページ(ウェブサーバー ディレクトリ インデックスともいいます)は、訪問者が関連ファイルのない URL をリクエストしたときに返されるファイルです。MainPageSuffix プロパティを割り当てると、Cloud Storage は、訪問者からリクエストされた URL と名前の接頭辞が一致するファイルを探します。

たとえば、静的ウェブサイトの MainPageSuffixindex.html に設定したとします。また、バケット www.example.comdirectory という名前のファイルがないとします。このような状況でユーザーが URL http://www.example.com/directory をリクエストすると、Cloud Storage はファイル www.example.com/directory/index.html を提供しようとします。このファイルも存在しない場合、Cloud Storage はエラーページを返します。

MainPageSuffix は、ユーザーがトップレベルのサイトをリクエストした場合に提供されるファイルも制御します。上の例の場合、ユーザーが http://www.example.com をリクエストすると、Cloud Storage はファイル www.example.com/index.html を提供しようとします。

http://www.example.com/dir/ のように、URL の末尾にスラッシュを使用する場合は、トラブルシューティングをご覧ください。

エラーページ

エラーページは、既存のファイルに対応しない URL をリクエストした静的サイトの訪問者に返されるファイルです。MainPageSuffix を割り当てた場合、リクエストされた名前のファイルがなく、該当するインデックス ページもない場合にのみ、Cloud Storage はエラーページを返します。

エラーページを返す場合、http レスポンス コードは 404 になります。エラーページとして機能するファイルを制御するプロパティは NotFoundPage です。NotFoundPage を設定しない場合、ユーザーには一般的なエラーページが表示されます。

ウェブサイトの構成例

3 オブジェクト バケット

www.example.com というバケットが、次の設定とファイルからなるウェブサイトとして構成されているとします。

  • MainPageSuffix = "index.html"
  • NotFoundPage = "404.html"
  • バケットには一般公開で共有されている 3 つのオブジェクト "index.html"、"404.html"、"dir/index.html" が格納されている。

次の表は、特定の URL で表示されるコンテンツの一覧です。

リクエストされた URL 表示されるコンテンツ HTTP レスポンス コード
http://www.example.com
http://www.example.com/
http://www.example.com/index.html
オブジェクト "index.html"。 200
http://www.example.com/hello オブジェクト "404.html"。 404
http://www.example.com/dir/index.html オブジェクト "dir/index.html"。 200
http://www.example.com/dir オブジェクト "dir/index.html"。 301
http://www.example.com/dir/ オブジェクト "dir/index.html"(/dir/ にゼロバイト オブジェクトが存在しないと仮定した場合)。 200
ゼロバイトの空のオブジェクト(/dir/ に存在する場合)。このゼロバイト オブジェクトを削除するには、トラブルシューティングのトピックをご覧ください 301

2 オブジェクト バケット

www.example.com というバケットが、次の設定とファイルからなるウェブサイトとして構成されているとします。

  • MainPageSuffix = "main.html"
  • NotFoundPage = "404.html"
  • バケットには一般公開で共有されている 2 つのオブジェクト "main.html" と "404.html" が格納されている。

次の表は、特定の URL で表示されるコンテンツの一覧です。

リクエストされた URL 表示されるコンテンツ HTTP レスポンス コード
http://www.example.com
http://www.example.com/
オブジェクト "main.html"。 200
http://www.example.com/index.html オブジェクト "404.html"。 404

オブジェクトが一般公開で共有されている場合、次の URL でもそのオブジェクトを表示できます。

http://storage.googleapis.com/BUCKET_NAME/OBJECT_NAME

たとえば、index.html オブジェクトの URL は次のようになります。

http://storage.googleapis.com/www.example.com/index.html

一般公開されているデータの使用について詳しくは、一般公開データへのアクセスをご覧ください。

ウェブサイトとして構成したバケットを使う場合のヒント

ここでは、バケットを使用して静的なウェブサイトをホストするときのヒントについて説明します。

サブドメインの追加

www.example.com とは別のバケットを使って、test.example.com でもコンテンツを提供できます。手順は次のとおりです。

  1. test.example.com という名前の新しいバケットを作成します。ドメイン example.com は確認済みなので、追加の確認を行わずにサブドメインをサポートするバケットを作成できます。

  2. 静的ウェブサイトのホスティングのチュートリアルに従って HTTPS 経由でコンテンツを提供する場合は、Cloud Console で次のようにロードバランサを編集します。

    1. [バックエンドの構成] で、test.example.com バケットを選択して新しいバックエンド バケット test-bucket を作成します。
    2. [ホストとパスのルール] で、次のように新しいルールを追加します。
      Hosts                  Paths     Backends
      test.example.com       /*        test-bucket
      
    3. [フロントエンドの構成] で、最初の構成と同じ値で新しいフロントエンド IP とポートを追加します。ただし、次の例外があります。

      • IP アドレス - 新しい IP アドレスを作成して予約します。
      • 証明書 - test.example.com に新しい SSL 証明書を作成します。
  3. ロードバランサを更新したら、新しいフロントエンド構成の IP アドレスを使用して、新しい A レコードをドメイン登録サービスに追加します。

    NAME                  TYPE     DATA
    test                  A        IP_ADDRESS
    

キャッシュ パラメータの設定

Cache-Control メタデータを構成することで、ウェブサイトのアセットをキャッシュするかどうかや、キャッシュ方法を制御できます。通常は、すべての匿名ユーザーがアクセス可能なオブジェクトについてのみキャッシュ コントロール メタデータを設定しますが、静的ウェブサイトの一部として Cloud Storage バケットから提供されるオブジェクトについてはすべてに設定する必要があります。

キャッシュ コントロール設定を明示的に指定しない場合、Cloud Storage では、すべての匿名ユーザーがアクセス可能なオブジェクトに 3,600 秒のキャッシュ コントロール設定が適用されます。Cache-Control などのオブジェクトのメタデータの設定方法については、メタデータの表示と編集をご覧ください。

API の動作

MainPageSuffixNotFoundPage ウェブサイト構成は、CNAME エンドポイントまたは Cloud Load Balancing を通じて Cloud Storage に送信されるリクエストにのみ使用されます。たとえば、www.example.com へのリクエストではインデックス ページが表示されますが、storage.googleapis.com/www.example.com への同等のリクエストでは表示されません。

そのため、storage.googleapis.com/www.example.com など、Cloud Storage ドメインに対するリクエストの API 動作が保存されます。たとえば、www.example.com バケット内のオブジェクトを、他のバケットの場合と同じように続けてリストできます。www.example.com バケットの場合、受け取るオブジェクトのリストには 404.htmlindex.html が含まれます。

動的ウェブサイトの静的アセットをホストする

Cloud Storage を使用して、Google App EngineGoogle Compute Engine などでホストされている動的ウェブサイトの静的アセットをホストできます。画像や JavaScript ファイルなどの静的アセットをバケットでホストすると、次のような利点があります。

  • 一般公開で閲覧可能なオブジェクトはデフォルトで Cloud Storage ネットワークにキャッシュされるので、特に設定しなくても、Cloud Storage は基本的にコンテンツ配信ネットワーク(CDN)のように機能します。

  • コンテンツにアクセスするための帯域幅の料金は、通常、Cloud Storage の方が安くなります。

  • Cloud Storage から静的コンテンツを提供すると、ウェブサーバーにかかる負荷が低くなります。

また、キャッシュ コントロール リクエスト ヘッダーを使用することで、一般公開で閲覧可能な静的アセットのキャッシュ処理(キャッシュの無効化やキャッシュの有効期間の設定など)を制御することもできます。詳しくは、キャッシュ パラメータの設定をご覧ください。

動的ウェブサイトの静的アセットをホストする場合には、静的ウェブサイトの場合のように、DNS レコードを作成してバケットまたはロードバランサを参照する必要はありません。たとえば、一般公開で共有するように構成した適切なアセットを含む www_example_com_assets というバケットを用意し、そのアセットに Cloud Storage ドメインを使用してアクセスできますまた、一般公開で共有されているバケット www_example_com_assets に JavaScript ファイル library.js が含まれている場合、http://storage.googleapis.com/www_example_com_assets/library.js からアクセスできます。

料金をモニタリングする

静的なウェブサイトとして構成したバケットでアセットを提供しているか、Cloud Storage の外部でホストされている動的ウェブサイトのバケットから静的アセットを提供している場合、バケットを含むプロジェクトにかかる料金を定期的に確認することをおすすめします。コンテンツを提供することにより、コンテンツの保存、ネットワークの使用、検索操作の実行に Cloud Storage のコストが発生します。詳細については、Cloud Storage の料金ページをご覧ください。

HTTP(S) 負荷分散を使用して HTTPS を設定すると、ネットワーク料金が発生する場合もあります。詳細については、ネットワークの料金をご覧ください。

Cloud Storage の料金ページにあるシンプルな料金の例は、トラフィックの少ない静的ウェブサイトの料金を計算する際の概算として使用できます。料金計算ツールを使うと、予想使用量に基づいて費用の見積もりを出すことができます。

新しい Google Cloud ユーザーは無料トライアルをご利用いただける場合があります。

現在 Google Cloud をご利用中の場合は、[お支払い] ページからプロジェクト コストの明細をご確認いただけます。

トラブルシューティング

静的なウェブサイトのコンテンツを配信するように構成されたバケットの使用で発生する一般的な問題については、トラブルシューティングをご覧ください。

次のステップ