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

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

ウェブサイトの構成例

ここでは、さまざまな URL を使ってアクセスするときに利用できるオブジェクトについて、事例を挙げて説明します。

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. サブドメイン用に新しい CNAME レコードを追加します。

    NAME                  TYPE     DATA
    test                  CNAME    c.storage.googleapis.com.
    

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

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 は基本的に Content Delivery Network(CDN)のように機能します。

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

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

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

動的ウェブサイトの静的アセットをホストする場合には、静的ウェブサイトのときのように、CNAME レコードを作成してバケットと同じ名前を指定する必要はありません。たとえば、一般公開で共有するように構成した適切なアセットを含む 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 の料金ページをご覧ください。

料金ページのシンプルな料金例は、低トラフィックの静的ウェブサイトを使用した場合の概算値としてご覧ください。料金計算ツールを使うと、予想使用量に基づいて費用の見積もりを出すことができます。

Cloud Platform を初めて使用する方は、無料トライアルをご利用いただけます。

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

トラブルシューティング

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

次のステップ

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

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

ご不明な点がありましたら、Google のサポートページをご覧ください。