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

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

特殊ページ

インデックス ページ

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

たとえば、静的ウェブサイトの MainPageSuffix を index.html に設定したとします。また、バケット www.example.com に directory という名前のファイルがないとします。このような状況でユーザーが 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. 追加のコンテンツを提供するため、新しいバケットを作成します。

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

    1. [バックエンドの構成] で、作成した新しいバケットを選択して、新しいバックエンド バケット 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

API の動作

MainPageSuffix と NotFoundPage のウェブサイト構成は、CNAME または A リダイレクトを介して 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.html と index.html が含まれます。

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

Cloud Storage を使用して、Google App Engine や Google 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 からアクセスできます。

キャッシュ パラメータを設定する

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

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

また、Cloud CDN を使用して、ユーザーに近い外部 HTTP(S) 負荷分散されたコンテンツをキャッシュに保存すると、多くの場合サービスコストが削減されます。詳細については、キャッシュをご覧ください。

料金をモニタリングする

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

また、外部アプリケーション ロードバランサを使用して HTTPS を設定すると、ネットワーク料金が発生する場合があります。詳細については、ネットワークの料金をご覧ください。

料金ページのシンプルな料金例は、低トラフィックの静的ウェブサイトを使用した場合の概算値としてご覧ください。ただし、この例では外部アプリケーション ロードバランサに関連する料金が考慮されていないことに注意してください。この料金は通常、静的ウェブサイト ホスティングの最大料金になります。料金計算ツールを使うと、予想使用量に基づいて費用の見積もりを出すことができます。

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

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

トラブルシューティング

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

次のステップ

使ってみる

Google Cloud を初めて使用する場合は、アカウントを作成して、実際のシナリオでの Cloud Storage のパフォーマンスを評価してください。新規のお客様には、ワークロードの実行、テスト、デプロイができる無料クレジット $300 分を差し上げます。

Cloud Storage を無料で試す