静的な Web サイトの例とヒント

このページでは、次の例とヒントを示します。バケットを使用して静的 Web サイトをホストします。 ## 専門ページ索引ページインデックスページ (Web サーバーディレクトリインデックスとも呼ばれます) 訪問者が URL をリクエストしたときに提供されるファイルです。関連ファイル。を割り当てると、 MainPageSuffix プロパティ、 Cloud Storage は、接頭辞が訪問者が要求した URL たとえば、静的 Web サイトの MainPageSuffix を index.html。さらに、名前の付いたファイルがないとしますあなたのディレクトリバケツ www.example.com。この状況で、ユーザーが URL を要求すると、 httpwww.example.com/directory、Cloud Storage はファイルの提供を試みます www.example.com/directory/index.html。そのファイルも存在しない場合は、 Cloud Storage がエラーページを返すの MainPageSuffix は、ユーザーがトップページを要求したときに提供されるファイルも制御します。レベルサイト。上記の例を続けると、ユーザーが要求した場合 httpwww.example.com、Cloud Storage はファイルの提供を試みます www.example.com/index.html のように末尾にスラッシュがある URL にアクセスしようとすると、 httpwww.example.com/dir/、トラブルシューティングを参照エラーページエラーページは、静的サイトの訪問者に返されるファイルです。既存のファイルに対応しない URL を要求します。あなたが持っている場合割り当てられた MainPageSuffix の場合、Cloud Storage は次の場合にのみエラーページを返します。要求された名前のファイルも適切なインデックスページもありませんエラーページを返すときのhttpレスポンスコードは 404. エラーページとして機能するファイルを制御します NotFoundPage。そうしないと設定 NotFoundPage、ユーザーは一般的なエラーページを受け取ります ## ウェブサイトの構成例 3 オブジェクトバケットという名前のバケットがあるとします。 www.example.com が Web サイトとして構成されました次の設定とファイルを使用します。 - MainPageSuffix= "index.html"NotFoundPage = "404.html"- バケットには、「index.html」、「404.html」、「dir/index.html」の 3 つの共有オブジェクトが含まれています。次の表は、選択した URL で提供されるコンテンツを示しています。 |要求された URL ||提供されるコンテンツ ||HTTP 応答コード | | |httpwww.example.com | | httpwww.example.com/ httpwww.example.com/index.html |オブジェクト "index.htmln||200 | | |httpwww.example.com/hello ||オブジェクト "404.htmln||404 | | |httpwww.example.com/dir/index.html ||オブジェクト "dir/index.htmln||200 | | |httpwww.example.com/dir ||オブジェクト "dir/index.htmln||301 | | |httpwww.example.com/dir/ ||オブジェクト "dir/index.html"(/dir/ にゼロバイトのオブジェクトが存在しないと仮定) ||200 | | |/dir/ に存在する場合は、0 バイトの空のオブジェクト。このゼロバイトオブジェクトの削除については、トラブルシューティングのトピックを参照してください。 ||301 | | 2 オブジェクトバケットという名前のバケットがあるとします。 www.example.com が Web サイトとして構成されました次の設定とファイルを使用します。 - MainPageSuffix= "main.html"NotFoundPage = "404.html"- バケットには、「main.html」と「404.html」の 2 つの共有オブジェクトが含まれています。次の表は、選択した URL で提供されるコンテンツを示しています。 |要求された URL ||提供されるコンテンツ ||HTTP 応答コード | | |httpwww.example.com | | httpwww.example.com/ |オブジェクト "main.htmln||200 | | |httpwww.example.com/index.html ||オブジェクト "404.htmln||404 | | オブジェクトが共有されている場合は、次のこともできます次の URL でそのオブジェクトを表示します。 httpstorage.googleapis.com/ BUCKET_NAME/ OBJECT_NAME たとえば、 index.html オブジェクトは次のようになります。 httpstorage.googleapis.com/www.example.com/index.html アクセス可能なデータの操作の詳細については、次を参照してください。公開データへのアクセス。 ## ウェブサイトとして構成されたバケットを操作するためのヒントを使用する際に留意すべきいくつかのヒントを次に示します。静的 Web サイトをホストするためのバケット。サブドメインを追加するでコンテンツを提供したいとします。別の test.example.com からコンテンツを提供するバケットよりも www.example.com。そうするために： - 追加のコンテンツを提供する新しいバケットを作成します。静的 Web サイトのホスティングのチュートリアルに従って、 HTTPS 経由のコンテンツ、でロードバランサーを編集します。クラウドコンソールは次のとおりです。 - - ためにバックエンド構成、新しいバックエンドバケットの作成テストバケット作成した新しいバケットを選択します。 - ためにホストとパスのルールは、次のように新しいルールを追加します。ホストパスバックエンド test.example.com /* テストバケットためにフロントエンド構成、新しいフロントエンド IP とポートを追加します。次の例外を除いて、最初の構成と同じ値: - - ために IP アドレス、新しい IP アドレスを作成して予約します。 - ために証明書、新しい SSL 証明書を作成します test.example.com. - ために - ためにロードバランサーを更新したら、新しいあなたのドメインへのArecord 新しいフロントエンド構成の IP アドレスを使用した登録サービス: 名前タイプデータテストA IPアドレス API の動作の MainPageSuffix と NotFoundPage Web サイト構成のみが使用されます経由で Cloud Storage に送信されるリクエストの場合 CNAME またはリダイレクト。たとえば、 www.example.com インデックスページを表示しますが、同等のリクエストを storage.googleapis.com/www.example.com はありませんしたがって、次のような Cloud Storage ドメインへのリクエストに対する API の動作 storage.googleapis.com/www.example.com は保持されます。たとえば、あなたはのオブジェクトをリストし続けることができます www.example.com バケット他のバケットの場合。の場合、 www.example.com バケット、オブジェクトあなたが受け取るリストは含まれています 404.html と index.html 動的 Web サイトの静的アセットをホストする Cloud Storage を使用して、動的ウェブサイトの静的アセットをホストできます。たとえば、Google App Engine または Google コンピューティングエンジン。静的アセットをホストする利点画像や JavaScript ファイルなど、バケットには以下が含まれます。 - Cloud Storage はコンテンツ配信のように動作します読み取り可能なオブジェクトがキャッシュされるため、ネットワーク (CDN) デフォルトでは Cloud Storage ネットワーク。通常、コンテンツにアクセスするための帯域幅料金は、Cloud Storage の方が安くなります。から静的コンテンツを提供する場合、Web サーバーの負荷が軽減されます。クラウドストレージ。動的 Web サイトの静的アセットをホストする場合、作成する必要はありません DNS レコードを作成し、バケットまたはロードバランサーをポイントします。静的ウェブサイト。たとえば、次の名前のバケットを作成できます。適切なアセットが共有として設定された www_example_com_assets 公開し、Cloud Storage ドメインを使用してそれらのアセットにアクセスします。たとえば、JavaScript ファイルがあるとします。バケット内の library.js www_example_com_assets が共有されている場合は、次のようにアクセスできます httpstorage.googleapis.com/www_example_com_assets/library.js キャッシュパラメータの設定を構成することで、Web サイトのアセットをキャッシュする方法またはキャッシュするかどうかを制御できます。キャッシュ制御メタデータ。通常、キャッシュ制御メタデータのみを設定します要件である、すべての匿名ユーザーがアクセスできるオブジェクトの場合静的オブジェクトの一部として Cloud Storage バケットから提供されるオブジェクト Webサイト Cloud Storage は、3600 秒のキャッシュ制御設定をオブジェクトに適用します。明示的なキャッシュ制御を指定しない限り、すべての匿名ユーザーがアクセス可能設定。設定手順については、メタデータの表示と編集を参照してください。などのオブジェクトメタデータキャッシュ制御 Cloud CDN を使用して、外部 HTTP(S) 負荷分散コンテンツをキャッシュすることもできます多くの場合、配信コストが削減されます。詳細については、次を参照してください。キャッシング。請求を監視する静的 Web サイトとして構成されたバケットからアセットを提供している場合、または外部でホストされている動的 Web サイトのバケットから静的アセットを提供する Cloud Storage を使用している場合、以下を含むプロジェクトへの請求を監視する必要がありますバケツ。コンテンツを提供すると、コンテンツを保存するための Cloud Storage コストが発生します。コンテンツ、ネットワークの使用、検索操作の実行。詳細については、 Cloud Storage の料金ページをご覧ください。 HTTP(S) 負荷分散を使用してセットアップする場合、ネットワーク料金も発生する可能性があります。 HTTPS。詳細については、ネットワーク料金を参照してください。料金例ページの簡単な料金例は、トラフィックの少ない静的な Web サイトのユースケースの概算として使用できます。ただし、この例では、 HTTP(S) ロードバランシング。多くの場合、静的 Web サイトの最大料金となる可能性がありますホスティング。料金表をご利用いただけます予測される使用量に基づいてコストの見積もりを生成するための計算ツール。現在 Google Cloud を使用している場合は、請求ページでのプロジェクトの費用。トラブルシューティングバケットの使用に関連する一般的な問題については、トラブルシューティングを参照してください静的な Web サイトコンテンツを提供するように構成されています。＃＃次は何ですか - - Google Cloud のその他のウェブサービスオプションについて学びます。 - Cloud Storage を使用する他の Google Cloud チュートリアルを試す。 ## 自分で試してみてください Google Cloud を初めて使用する場合は、アカウントを作成して方法を評価してください Cloud Storage は実世界で機能しますシナリオ。新規のお客様は、実行、テスト、およびワークロードをデプロイします。 Cloud Storage を無料で試す