このチュートリアルでは、所有するドメインの静的ウェブサイトをホストするように Cloud Storage バケットを構成します。静的ウェブページには HTML、CSS、JavaScript などのクライアント側の技術を使用できます。PHP のようなサーバー側のスクリプトなどの動的コンテンツを含めることはできません。
Cloud Storage 自体では HTTPS を使用するカスタム ドメインをサポートしていません。このチュートリアルでは、Cloud Storage と HTTP(S) 負荷分散を使用して HTTPS を介してカスタム ドメインのコンテンツを提供します。カスタム ドメインのコンテンツを HTTPS 経由で提供する別の方法については、関連するトラブルシューティングのトピックをご覧ください。また、Cloud Storage を使用して HTTP 経由でカスタム ドメインのコンテンツを提供することもできます。この場合、ロードバランサは必要ありません。
静的ウェブページのサンプルやヒント(動的ウェブサイトの静的アセットをホストする方法など)については、静的ウェブサイトのページをご覧ください。
目標
このチュートリアルでは、次の方法について説明します。- バケットを作成する。
- サイトのファイルをアップロードして共有する。
- ロードバランサと SSL 証明書を設定する。
- ロードバランサをバケットに接続する。
A
レコードを使用して、ドメインをロードバランサに指定する。- ウェブサイトをテストする。
料金
このチュートリアルでは、課金対象である次の Google Cloud コンポーネントを使用します。
- Cloud Storage
- Cloud Load Balancing
静的ウェブサイトのホスティングで発生する可能性がある料金の詳細については、料金のモニタリングに関するヒントをご覧ください。Cloud Storage のコストの詳細については、料金ページをご覧ください。
始める前に
- Google アカウントにログインします。
Google アカウントをまだお持ちでない場合は、新しいアカウントを登録します。
-
Google Cloud Console の [プロジェクト セレクタ] ページで、Google Cloud プロジェクトを選択または作成します。
-
Cloud プロジェクトに対して課金が有効になっていることを確認します。プロジェクトに対して課金が有効になっていることを確認する方法を学習する。
- 自分がオーナーまたは管理者になっているドメインが必要です。既存のドメインがない場合は、Google Domains など、新しいドメインを登録できるサービスが多数あります。
このチュートリアルではドメイン
example.com
を使用します。 - 自分が使用するドメインのオーナーまたは管理者になっていることを確認します。
www.example.com
などのサブドメインではなく、example.com
などのトップレベル ドメインを検証していることを確認します。注: バケットに関連付けているドメインを所有している場合は、以前にこの手順をすでに実行している可能性があります。Google Domains でドメインを購入した場合、確認は自動的に行われます。
- 提供するウェブサイトのファイルをいくつか用意します。このチュートリアルは、少なくともインデックス ページ(
index.html
)と 404 ページ(404.html
)がある場合に最適です。 - ストレージ オブジェクト管理者とネットワーク管理者の Identity and Access Management ロールが付与されている必要があります。
バケットの作成
www.example.com
という名前のバケットを作成するには:
Console
- Google Cloud Console で Cloud Storage ブラウザを開きます。
Cloud Storage ブラウザを開く [バケットを作成] をクリックして、バケット作成フォームを開きます。
バケット情報を入力し、[続行] をクリックして各手順を完了します。
[作成] をクリックします。
成功すると、バケットの詳細ページが開き、「このバケットには有効なオブジェクトがありません」というテキストが表示されます。
Cloud Storage ブラウザで失敗したオペレーションに関する詳細なエラー情報を確認する方法については、トラブルシューティングをご覧ください。
gsutil
gsutil mb
コマンドを使用します。
gsutil mb -b on gs://www.example.com
成功した場合、次の内容が返されます。
Creating gs://www.example.com/...
コードサンプル
C++
詳細については、Cloud Storage C++ API のリファレンス ドキュメントをご覧ください。
C#
詳細については、Cloud Storage C# API のリファレンス ドキュメントをご覧ください。
Go
詳細については、Cloud Storage Go API のリファレンス ドキュメントをご覧ください。
Java
詳細については、Cloud Storage Java API のリファレンス ドキュメントをご覧ください。
Node.js
詳細については、Cloud Storage Node.js API のリファレンス ドキュメントをご覧ください。
PHP
詳細については、Cloud Storage PHP API のリファレンス ドキュメントをご覧ください。
Python
詳細については、Cloud Storage Python API のリファレンス ドキュメントをご覧ください。
Ruby
詳細については、Cloud Storage Ruby API のリファレンス ドキュメントをご覧ください。
REST API
JSON API
- OAuth 2.0 Playground から承認アクセス トークンを取得します。固有の OAuth 認証情報を使用するように Playground を構成します。
ウェブサイトの名前を
name
プロパティに割り当てる.json
ファイルを作成します。{ "name": "www.example.com" }
cURL
を使用して JSON API を呼び出します。www.example.com の場合は次のとおりです。curl -X POST --data-binary @website-bucket-name.json \ -H "Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg" \ -H "Content-Type: application/json" \ "https://storage.googleapis.com/storage/v1/b?project=my-static-website"
XML API
- OAuth 2.0 Playground から認証アクセス トークンを取得します。固有の OAuth 認証情報を使用するように Playground を構成します。
cURL
を使用して XML API を呼び出し、ウェブサイトと同名のバケットを作成します。www.example.com の場合は次のとおりです。curl -X PUT \ -H "Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg" \ -H "x-goog-project-id: my-static-website" \ "https://storage.googleapis.com/www.example.com"
サイトのファイルのアップロード
ウェブサイトから配信するファイルをバケットに追加します。
Console
- Google Cloud Console で Cloud Storage ブラウザを開きます。
Cloud Storage ブラウザを開く バケットのリストで、作成したバケットをクリックします。
[バケットの詳細] ページが開き、[オブジェクト] タブが選択されています。
[ファイルをアップロード] ボタンをクリックします。
ファイル ダイアログで、目的のファイルを参照して選択します。
アップロードが完了すると、ファイル名とファイル情報がバケットに表示されます。
Cloud Storage ブラウザで失敗したオペレーションに関する詳細なエラー情報を確認する方法については、トラブルシューティングをご覧ください。
gsutil
ファイルをバケットにコピーするには、gsutil cp
コマンドを使用します。たとえば、現在のロケーション Desktop
からファイル index.html
をコピーします。
gsutil cp Desktop/index.html gs://www.example.com
成功した場合、次の内容が返されます。
Copying file://Desktop/index.html [Content-Type=text/html]... Uploading gs://www.example.com/index.html: 0 B/2.58 KiB Uploading gs://www.example.com/index.html: 2.58 KiB/2.58 KiB
コードサンプル
C++
詳細については、Cloud Storage C++ API のリファレンス ドキュメントをご覧ください。
C#
詳細については、Cloud Storage C# API のリファレンス ドキュメントをご覧ください。
Go
詳細については、Cloud Storage Go API のリファレンス ドキュメントをご覧ください。
Java
詳細については、Cloud Storage Java API のリファレンス ドキュメントをご覧ください。
Node.js
詳細については、Cloud Storage Node.js API のリファレンス ドキュメントをご覧ください。
PHP
詳細については、Cloud Storage PHP API のリファレンス ドキュメントをご覧ください。
Python
詳細については、Cloud Storage Python API のリファレンス ドキュメントをご覧ください。
オブジェクトをアップロードするには、Blob.upload_from_file()、Blob.upload_from_filename()、Blob.upload_from_string() のいずれかのメソッドを使用します。Ruby
詳細については、Cloud Storage Ruby API のリファレンス ドキュメントをご覧ください。
REST API
JSON API
- OAuth 2.0 Playground から承認アクセス トークンを取得します。固有の OAuth 認証情報を使用するように Playground を構成します。
cURL
を使用して、POST
Object リクエストで JSON API を呼び出します。www.example.com のインデックス ページの場合:curl -X POST --data-binary @index.html \ -H "Content-Type: text/html" \ -H "Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg" \ "https://storage.googleapis.com/upload/storage/v1/b/www.example.com/o?uploadType=media&name=index.html"
XML API
- OAuth 2.0 Playground から認証アクセス トークンを取得します。固有の OAuth 認証情報を使用するように Playground を構成します。
cURL
を使用して、PUT
Object リクエストで XML API を呼び出します。www.example.com のインデックス ページの場合:curl -X PUT --data-binary @index.html \ -H "Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg" \ -H "Content-Type: text/html" \ "https://storage.googleapis.com/www.example.com/index.html"
ファイルの共有
公共のインターネット上で誰もがバケット内のすべてのオブジェクトを閲覧できるようにするには:
Console
- Google Cloud Console で Cloud Storage ブラウザを開きます。
Cloud Storage ブラウザを開く バケットのリストで、公開するバケットの名前をクリックします。
ページ上部にある [権限] タブを選択します。
[メンバーを追加] ボタンをクリックします。
[メンバーを追加] ダイアログ ボックスが表示されます。
[新しいメンバー] フィールドに「
allUsers
」と入力します。[役割を選択] プルダウンで [Cloud Storage] サブメニューを選択し、[ストレージ オブジェクト閲覧者] オプションをクリックします。
[保存] をクリックします。
[一般公開アクセスを許可] をクリックします。
公開の状態で共有されると、[公開アクセス] 列に各オブジェクトのリンクアイコンが表示されます。このアイコンをクリックすると、オブジェクトの URL を取得できます。
Cloud Storage ブラウザで失敗したオペレーションに関する詳細なエラー情報を確認する方法については、トラブルシューティングをご覧ください。
gsutil
gsutil iam ch
コマンドを使用します。
gsutil iam ch allUsers:objectViewer gs://www.example.com
コードサンプル
C++
詳細については、Cloud Storage C++ API のリファレンス ドキュメントをご覧ください。
C#
詳細については、Cloud Storage C# API のリファレンス ドキュメントをご覧ください。
Java
詳細については、Cloud Storage Java API のリファレンス ドキュメントをご覧ください。
Python
詳細については、Cloud Storage Python API のリファレンス ドキュメントをご覧ください。
REST API
JSON API
- OAuth 2.0 Playground から承認アクセス トークンを取得します。固有の OAuth 認証情報を使用するように Playground を構成します。
次の情報が含まれる .json ファイルを作成します。
{ "bindings":[ { "role": "roles/storage.objectViewer", "members":["allUsers"] } ] }
cURL
を使用して JSON API を呼び出し、PUT
Bucket リクエストを行います。curl -X PUT --data-binary @JSON_FILE_NAME.json \ -H "Authorization: Bearer OAUTH2_TOKEN" \ -H "Content-Type: application/json" \ "https://storage.googleapis.com/storage/v1/b/BUCKET_NAME/iam"
ここで
JSON_FILE_NAME
は、手順 2 で作成したファイルの名前です。OAUTH2_TOKEN
は、手順 1 で作成したアクセス トークンです。BUCKET_NAME
は、オブジェクトを公開するバケットの名前です。例:my-bucket
XML API
XML API では、バケット内のすべてのオブジェクトを公開して読み取り可能にすることはできません。その場合は、gsutil または JSON API を使用するか、個々のオブジェクトに ACL を設定します。
バケット内の個々のオブジェクトを公開するには、バケットのアクセス制御モードをきめ細かい管理に切り替える必要があります。一般に、バケット内のすべてのファイルを一般公開するほう簡単で迅速です。
非公開または存在しないファイルの URL をリクエストすると、サイト訪問者は http 403
レスポンス コードを受け取ります。http 404
レスポンス コードを使用するエラーページを追加する方法については、次のセクションをご覧ください。
推奨: 特殊ページの割り当て
インデックス ページの接尾辞やカスタム エラーページを割り当てることができます。インデックス ページの接尾辞は MainPageSuffix
プロパティで、カスタム エラーページは NotFoundPage
プロパティで制御します。どちらの割り当ても任意ですが、インデックス ページがないと、ユーザーがトップレベル サイトにアクセスしたときに何も表示されません(例: https://www.example.com
)。MainPageSuffix
プロパティと NotFoundPage
プロパティの詳細については、特殊ページをご覧ください。
次のサンプルでは、MainPageSuffix
を index.html
に設定し、NotFoundPage
を 404.html
に設定します。
Console
- Google Cloud Console で Cloud Storage ブラウザを開きます。
Cloud Storage ブラウザを開く バケットのリストで、作成したバケットを見つけます。
バケットに関連付けられた [バケット オーバーフロー] メニュー(
)をクリックし、[ウェブサイトの構成を編集] を選択します。
ウェブサイト構成ダイアログで、メインページとエラーページを指定します。
[保存] をクリックします。
Cloud Storage ブラウザで失敗したオペレーションに関する詳細なエラー情報を確認する方法については、トラブルシューティングをご覧ください。
gsutil
gsutil web set
コマンドを使用して MainPageSuffix
プロパティを -m
フラグ、NotFoundPage
プロパティを -e
フラグで設定します。
gsutil web set -m index.html -e 404.html gs://www.example.com
成功した場合、次の内容が返されます。
Setting website config on gs://www.example.com/...
コードサンプル
C++
詳細については、Cloud Storage C++ API のリファレンス ドキュメントをご覧ください。
Java
詳細については、Cloud Storage Java API のリファレンス ドキュメントをご覧ください。
Python
詳細については、Cloud Storage Python API のリファレンス ドキュメントをご覧ください。
REST API
JSON API
- OAuth 2.0 Playground から承認アクセス トークンを取得します。固有の OAuth 認証情報を使用するように Playground を構成します。
.json
ファイルを作成して、website
オブジェクトのmainPageSuffix
プロパティとnotFoundPage
プロパティを目的のページに設定します。{ "website":{ "mainPageSuffix": "index.html", "notFoundPage": "404.html" } }
cURL
を使用して JSON API を呼び出し、PATCH
Bucket リクエストを行います。www.example.com の場合は次のとおりです。curl -X PATCH --data-binary @web-config.json \ -H "Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg" \ -H "Content-Type: application/json" \ "https://storage.googleapis.com/storage/v1/b/www.example.com"
XML API
- OAuth 2.0 Playground から認証アクセス トークンを取得します。固有の OAuth 認証情報を使用するように Playground を構成します。
.xml
ファイルを作成して、WebsiteConfiguration
要素のMainPageSuffix
要素とNotFoundPage
要素を目的のページに設定します。<WebsiteConfiguration> <MainPageSuffix>index.html</MainPageSuffix> <NotFoundPage>404.html</NotFoundPage> </WebsiteConfiguration>
cURL
を使用して、PUT
Bucket リクエストとwebsiteConfig
クエリ文字列パラメータを含めた XML API を呼び出します。www.example.com の場合は次のとおりです。curl -X PUT --data-binary @web-config.xml \ -H "Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg" \ https://storage.googleapis.com/www.example.com?websiteConfig
ロードバランサと SSL 証明書を設定する
Cloud Storage 自体では HTTPS を使用するカスタム ドメインをサポートしていません。HTTPS 経由でウェブサイトを提供するには、HTTPS ロードバランサに関連付けられた SSL 証明書を設定する必要があります。このセクションでは、ロードバランサのバックエンドにバケットを追加する方法と、ロードバランサのフロントエンドに新しい Google マネージド SSL 証明書を追加する方法について説明します。
- Google Cloud Console の [負荷分散] ページに移動します。
[負荷分散] ページに移動 - [HTTP(S) 負荷分散] で [構成を開始] をクリックします。
- [インターネットから自分の VM へ] をオンにし、[続行] をクリックします。
- ロードバランサに名前を付けます(たとえば、
example-lb
)。
バックエンドを構成する
- [バックエンドの構成] をクリックします。
- [バックエンド サービスとバックエンド バケットの作成または選択] プルダウンで、[バックエンド バケット] サブメニューに移動し、[バックエンド バケットを作成] オプションをクリックします。
- バックエンド バケットの名前を選択します(たとえば、
example-bucket
)。 - [Cloud Storage バケット] で [参照] をクリックします。
www.example.com
バケットを選択し、[選択] をクリックします。- [作成] をクリックします。
ホストルールとパスマッチャーを構成する
ホストルールとパスマッチャーは、外部 HTTP(S) ロードバランサの URL マップの構成要素です。
- [ホストとパスのルール] をクリックします。
- 前の手順で作成したバックエンド バケット
example-bucket
のモードは、デフォルトの単純なホストとパスのルールのままにします。
フロントエンドを構成する
このセクションでは、HTTPS プロトコルを構成し、SSL 証明書を作成する方法について説明します。既存の証明書を選択することも、セルフマネージド SSL 証明書をアップロードすることもできます。
- [フロントエンドの構成] をクリックします。
次のフィールドの値を構成します。
- プロトコル: HTTPS
- ネットワーク サービス階層: プレミアム
- IP バージョン: IPv4。IPv6 を使用する場合は、IPv6 終端をご覧ください。
[IP アドレス] フィールドで次の操作を行います。
- プルダウンで [IP アドレスを作成] をクリックします。
- [新しい静的 IP アドレスの予約] ポップアップで、IP アドレスの名前として「
example-ip
」を入力します。 - [予約] をクリックします。
[ポート] で [443] を選択します。
[証明書] フィールドで [新しい証明書を作成] を選択します。パネルに証明書作成フォームが表示されます。以下の構成を行います。
- 名前:
example-ssl
- 作成モード: Google マネージドの証明書を作成する
- ドメイン:
www.example.com
。ルートドメインexample.com
など、追加ドメイン経由でコンテンツを配信する場合は、Enter キーを押して追加行にドメインを追加します。各証明書の上限は 100 ドメインです。
- 名前:
[作成] をクリックします。
[完了] をクリックします。
構成の確認
- [確認と完了] をクリックします。
- バックエンドの構成、ホストとパスのルール、フロントエンドの構成を確認します。
- [作成] をクリックします。
ロードバランサの作成に数分かかることがあります。
ドメインをロードバランサに接続する
ロードバランサが作成されたら、ロードバランサの名前(example-lb
)をクリックします。ロードバランサに関連付けられた IP アドレスをメモします(例: 30.90.80.100
)。ドメインをロードバランサに指定するには、ドメイン登録サービスを使用して A
レコードを作成します。SSL 証明書に複数のドメインを追加した場合は、ロードバランサの IP アドレスを参照する A レコードをドメインごとに追加する必要があります。たとえば、www.example.com
と example.com
に A
レコードを作成するには、次のようにします。
NAME TYPE DATA www A 30.90.80.100 @ A 30.90.80.100
Google Domains を使用している場合は、A
または CNAME
レコードを作成するをご覧ください。
推奨: SSL 証明書のステータスのモニタリング
Google Cloud が証明書をプロビジョニングし、ロードバランサ経由でサイトが利用可能になるまでに最大で 60~90 分かかることがあります。証明書のステータスをモニタリングするには:
Console
- Google Cloud Console の [負荷分散] ページに移動します。
[負荷分散] ページに移動 - ロードバランサの名前(
example-lb
)をクリックします。 - ロードバランサに関連付けられている SSL 証明書の名前(
example-ssl
)をクリックします。 - [ステータス] 行と [ドメイン ステータス] 行に証明書のステータスが表示されます。ウェブサイトで証明書を有効にするには、両方が有効である必要があります。
gcloud
証明書のステータスを確認するには、次のコマンドを実行します。
gcloud beta compute ssl-certificates describe certificate-name \ --global \ --format="get(name,managed.status)"
ドメインのステータスを確認するには、次のコマンドを実行します。
gcloud beta compute ssl-certificates describe certificate-name \ --global \ --format="get(managed.domainStatus)"
証明書のステータスの詳細については、SSL 証明書のトラブルシューティングをご覧ください。
ウェブサイトのテスト
SSL 証明書が有効になったら、https://www.example.com/test.html
に移動して、コンテンツがバケットから提供されていることを確認します。test.html
は、www.example.com
という名前のバケットに格納されているオブジェクトです。MainPageSuffix
プロパティを設定すると、https://www.example.com
が index.html
に移動します。
クリーンアップ
静的ウェブサイトのホスティングのチュートリアルが終了したら、Google Cloud で作成したリソースをクリーンアップして、今後料金が発生しないようにします。次のセクションで、リソースを削除または無効にする方法を説明します。
プロジェクトの削除
課金をなくす最も簡単な方法は、チュートリアル用に作成したプロジェクトを削除することです。
プロジェクトを削除するには:
- Cloud Console で [リソースの管理] ページに移動します。
- プロジェクト リストで、削除するプロジェクトを選択し、[削除] をクリックします。
- ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。
ロードバランサとバケットの削除
プロジェクト全体を削除しない場合は、このチュートリアル用に作成したロードバランサとバケットを削除します。
- Google Cloud Console の [負荷分散] ページに移動します。
[負荷分散] ページに移動 example-lb
の横のチェックボックスをオンにします。- [削除] をクリックします。
- (省略可)
www.example.com
バケットやexample-ssl
SSL 証明書など、ロードバランサと一緒に削除するリソースのチェックボックスをオンにします。 - [ロードバランサを削除] または [ロードバランサと選択したリソースを削除] をクリックします。
次のステップ
- HTTP 経由で静的ウェブサイトを提供する方法を学習する。
- バケットを使用して静的ウェブサイトをホストする場合の設定例とヒントを確認する。
- 静的ウェブサイトをホストするためのトラブルシューティング セクションにアクセスする。
- 動的ウェブサイトの静的アセットのホストについて学習する。
- 他の Google Cloud ウェブ配信ソリューションについて学習する。
- Cloud Storage を使用するその他の Google Cloud チュートリアルを試す。
使ってみる
Google Cloud を初めて使用される方は、アカウントを作成して、実際のシナリオでの Cloud Storage のパフォーマンスを評価してください。新規のお客様には、ワークロードの実行、テスト、デプロイができる無料クレジット $300 分を差し上げます。
Cloud Storage の無料トライアル