このチュートリアルでは、所有するドメインの静的ウェブサイトをホストするように Cloud Storage バケットを構成します。静的ウェブページには HTML、CSS、JavaScript などのクライアント側の技術を使用できます。PHP のようなサーバー側のスクリプトなどの動的コンテンツを含めることはできません。
このチュートリアルでは、HTTP 経由でコンテンツを提供する方法について説明します。HTTPS を使用するチュートリアルについては、静的ウェブサイトのホスティングをご覧ください。
静的ウェブページのサンプルやヒント(動的ウェブサイトの静的アセットをホストする方法など)については、静的ウェブサイトのページをご覧ください。
目標
このチュートリアルの内容は次のとおりです。CNAME
レコードを使用して、ドメインを Cloud Storage に指定する。- ドメインにリンクするバケットを作成する。
- サイトのファイルをアップロードして共有する。
- ウェブサイトをテストする。
費用
このチュートリアルでは、課金対象である次の Google Cloud コンポーネントを使用します。
- Cloud Storage
静的ウェブサイトのホスティングで発生する可能性がある料金の詳細については、ストレージ料金のモニタリングに関するヒントをご覧ください。Cloud Storage のコストの詳細については、料金ページをご覧ください。
始める前に
- Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Make sure that billing is enabled for your Google Cloud project.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Make sure that billing is enabled for your Google Cloud project.
- 自分がオーナーまたは管理者になっているドメインが必要です。既存のドメインがない場合は、Cloud Domains など、新しいドメインを登録できるサービスが多数あります。
このチュートリアルではドメイン
example.com
を使用します。 - 自分が使用するドメインのオーナーまたは管理者になっていることを確認します。
www.example.com
などのサブドメインではなく、example.com
などのトップレベル ドメインを検証していることを確認します。注: バケットに関連付けているドメインを所有している場合は、以前にこの手順をすでに実行している可能性があります。Cloud Domains でドメインを購入した場合、確認は自動的に行われます。
Cloud Storage へのドメインの接続
ドメインを Cloud Storage に接続するには、ドメイン登録サービスを使用して CNAME
レコードを作成します。CNAME
レコードは、DNS レコードの一種です。これは、ドメインからの URL をリクエストするトラフィックを、配信するリソース(この場合は Cloud Storage バケットのオブジェクト)に振り向けます。www.example.com
の場合、CNAME
レコードには次の情報が含まれている場合があります。
NAME TYPE DATA www CNAME c.storage.googleapis.com.
CNAME
リダイレクトの詳細については、CNAME
エイリアス設定の URI をご覧ください。
ドメインを Cloud Storage に接続するには、次の手順を行います。
c.storage.googleapis.com.
を指すCNAME
レコードを作成します。ドメイン登録サービスでは、
CNAME
レコードの追加など、ドメインを管理する方法が必要です。たとえば、Cloud DNS を使用する場合は、レコードの追加、変更、削除ページでリソース レコードの追加手順を確認できます。
バケットの作成
ドメインに作成した CNAME
に一致する名前のバケットを作成します。
たとえば、example.com
の www
サブドメインを指す CNAME
レコードを c.storage.googleapis.com.
に追加した場合、www.example.com
という名前のバケットを作成する Google Cloud CLI コマンドは次のようになります。
gcloud storage buckets create gs://www.example.com --location=US
さまざまなツールでバケットを作成する詳しい手順については、バケットを作成するをご覧ください。
サイトのファイルのアップロード
ウェブサイトで配信するファイルをバケットに追加するには:
コンソール
- Google Cloud コンソールで、Cloud Storage の [バケット] ページに移動します。
バケットのリストで、作成したバケットをクリックします。
[オブジェクト] タブの [ファイルをアップロード] ボタンをクリックします。
ファイル ダイアログで、目的のファイルを参照して選択します。
アップロードが完了すると、ファイル名とファイル情報がバケットに表示されます。
コマンドライン
ファイルをバケットにコピーするには、gcloud storage cp
コマンドを使用します。たとえば、現在のロケーション Desktop
からファイル index.html
をコピーします。
gcloud storage cp Desktop/index.html gs://www.example.com
成功した場合は、次の例のようなレスポンスになります。
Completed files 1/1 | 164.3kiB/164.3kiB
クライアント ライブラリ
C++
詳細については、Cloud Storage C++ API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
C#
詳細については、Cloud Storage C# API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
Go
詳細については、Cloud Storage Go API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
Java
詳細については、Cloud Storage Java API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
次のサンプルでは、単独のオブジェクトをアップロードします。
次のサンプルでは、複数のオブジェクトを同時にアップロードします。
次のサンプルでは、共通の接頭辞を持つすべてのオブジェクトを同時にアップロードします。
Node.js
詳細については、Cloud Storage Node.js API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
次のサンプルでは、単独のオブジェクトをアップロードします。
次のサンプルでは、複数のオブジェクトを同時にアップロードします。
次のサンプルでは、共通の接頭辞を持つすべてのオブジェクトを同時にアップロードします。
PHP
詳細については、Cloud Storage PHP API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
Python
詳細については、Cloud Storage Python API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
次のサンプルでは、単独のオブジェクトをアップロードします。
次のサンプルでは、複数のオブジェクトを同時にアップロードします。
次のサンプルでは、共通の接頭辞を持つすべてのオブジェクトを同時にアップロードします。
Ruby
詳細については、Cloud Storage Ruby API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
REST API
JSON API
gcloud CLI のインストールと初期化を行います。これにより、
Authorization
ヘッダーのアクセス トークンを生成できます。cURL
を使用して、POST
Object リクエストで JSON API を呼び出します。www.example.com のインデックス ページの場合:curl -X POST --data-binary @index.html \ -H "Content-Type: text/html" \ -H "Authorization: $(gcloud auth print-access-token)" \ "https://storage.googleapis.com/upload/storage/v1/b/www.example.com/o?uploadType=media&name=index.html"
XML API
gcloud CLI のインストールと初期化を行います。これにより、
Authorization
ヘッダーのアクセス トークンを生成できます。cURL
を使用して、PUT
Object リクエストで XML API を呼び出します。www.example.com のインデックス ページの場合:curl -X PUT --data-binary @index.html \ -H "Authorization: $(gcloud auth print-access-token)" \ -H "Content-Type: text/html" \ "https://storage.googleapis.com/www.example.com/index.html"
ファイルの共有
公共のインターネット上で誰もがバケット内のすべてのオブジェクトを閲覧できるようにするには:
コンソール
- Google Cloud コンソールで、Cloud Storage の [バケット] ページに移動します。
バケットのリストで、公開するバケットの名前をクリックします。
ページ上部にある [権限] タブを選択します。
[公開アクセス] ペインで [非公開] と表示された場合は、[公開アクセス防止を削除] ボタンをクリックし、表示されたダイアログで [確認] をクリックします。
[add_box アクセス権を付与] ボタンをクリックします。
[プリンシパルの追加] ダイアログ ボックスが表示されます。
[新しいプリンシパル] フィールドに「
allUsers
」と入力します。[ロールを選択] プルダウンで [Cloud Storage] サブメニューを選択し、[ストレージ オブジェクト閲覧者] オプションをクリックします。
[保存] をクリックします。
[一般公開アクセスを許可] をクリックします。
公開の状態で共有されると、[公開アクセス] 列に各オブジェクトのリンクアイコンが表示されます。このアイコンをクリックすると、オブジェクトの URL を取得できます。
コマンドライン
buckets add-iam-policy-binding
コマンドを使用します。
gcloud storage buckets add-iam-policy-binding gs://www.example.com --member=allUsers --role=roles/storage.objectViewer
クライアント ライブラリ
C++
詳細については、Cloud Storage C++ API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
C#
詳細については、Cloud Storage C# API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
Go
詳細については、Cloud Storage Go API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
Java
詳細については、Cloud Storage Java API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
Node.js
詳細については、Cloud Storage Node.js API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
PHP
詳細については、Cloud Storage PHP API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
Python
詳細については、Cloud Storage Python API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
Ruby
詳細については、Cloud Storage Ruby API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
REST API
JSON API
gcloud CLI のインストールと初期化を行います。これにより、
Authorization
ヘッダーのアクセス トークンを生成できます。次の情報が含まれる JSON ファイルを作成します。
{ "bindings":[ { "role": "roles/storage.objectViewer", "members":["allUsers"] } ] }
cURL
を使用して、PUT
Bucket リクエストで JSON API を呼び出します。curl -X PUT --data-binary @JSON_FILE_NAME \ -H "Authorization: Bearer $(gcloud auth print-access-token)" \ -H "Content-Type: application/json" \ "https://storage.googleapis.com/storage/v1/b/BUCKET_NAME/iam"
ここで
JSON_FILE_NAME
は、手順 2 で作成した JSON ファイルのパスです。BUCKET_NAME
は、オブジェクトを公開するバケットの名前です。例:my-bucket
XML API
XML API では、バケット内のすべてのオブジェクトを公開して読み取り可能にすることはできません。代わりに Google Cloud コンソールまたは gcloud storage
を使用します。
必要に応じて、バケットの一部を公開することもできます。
非公開または存在しないファイルの URL をリクエストすると、サイト訪問者は http 403
レスポンス コードを受け取ります。http 404
レスポンス コードを使用するエラーページを追加する方法については、次のセクションをご覧ください。
推奨: 特殊ページの割り当て
インデックス ページの接尾辞やカスタム エラーページを割り当てることができます。インデックス ページの接尾辞は MainPageSuffix
プロパティで、カスタム エラーページは NotFoundPage
プロパティで制御します。どちらの割り当ても任意ですが、インデックス ページがないと、ユーザーがトップレベル サイトにアクセスしたときに何も表示されません(例: http://www.example.com
)。詳しくは、ウェブサイトの構成例をご覧ください。
次のサンプルでは、MainPageSuffix
を index.html
に設定し、NotFoundPage
を 404.html
に設定します。
コンソール
- Google Cloud コンソールで、Cloud Storage の [バケット] ページに移動します。
バケットのリストで、作成したバケットを見つけます。
バケットに関連付けられたバケット オーバーフロー メニュー(more_vert)をクリックし、[ウェブサイトの構成を編集] を選択します。
ウェブサイト構成ダイアログで、メインページとエラーページを指定します。
[保存] をクリックします。
コマンドライン
--web-main-page-suffix
フラグと --web-error-page
フラグを指定して、buckets update
コマンドを使用します。
gcloud storage buckets update gs://www.example.com --web-main-page-suffix=index.html --web-error-page=404.html
成功した場合、次の内容が返されます。
Updating gs://www.example.com/... Completed 1
クライアント ライブラリ
C++
詳細については、Cloud Storage C++ API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
C#
詳細については、Cloud Storage C# API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
Go
詳細については、Cloud Storage Go API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
Java
詳細については、Cloud Storage Java API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
Node.js
詳細については、Cloud Storage Node.js API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
PHP
詳細については、Cloud Storage PHP API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
Python
詳細については、Cloud Storage Python API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
Ruby
詳細については、Cloud Storage Ruby API のリファレンス ドキュメントをご覧ください。
Cloud Storage に対する認証を行うには、アプリケーションのデフォルト認証情報を設定します。詳細については、ローカル開発環境の認証の設定をご覧ください。
REST API
JSON API
gcloud CLI のインストールと初期化を行います。これにより、
Authorization
ヘッダーのアクセス トークンを生成できます。JSON ファイルを作成して、
website
オブジェクトのmainPageSuffix
プロパティとnotFoundPage
プロパティを目的のページに設定します。{ "website":{ "mainPageSuffix": "index.html", "notFoundPage": "404.html" } }
cURL
を使用して、PATCH
Bucket リクエストで JSON API を呼び出します。www.example.com の場合は次のとおりです。curl -X PATCH --data-binary @web-config.json \ -H "Authorization: $(gcloud auth print-access-token)" \ -H "Content-Type: application/json" \ "https://storage.googleapis.com/storage/v1/b/www.example.com"
XML API
gcloud CLI のインストールと初期化を行います。これにより、
Authorization
ヘッダーのアクセス トークンを生成できます。XML ファイルを作成し、
WebsiteConfiguration
要素に含まれるMainPageSuffix
要素とNotFoundPage
要素を目的のページに設定します。<WebsiteConfiguration> <MainPageSuffix>index.html</MainPageSuffix> <NotFoundPage>404.html</NotFoundPage> </WebsiteConfiguration>
cURL
を使用して、PUT
Bucket リクエストで XML API を呼び出し、websiteConfig
クエリ文字列パラメータを渡します。www.example.com の場合は次のとおりです。curl -X PUT --data-binary @web-config.xml \ -H "Authorization: $(gcloud auth print-access-token)" \ https://storage.googleapis.com/www.example.com?websiteConfig
ウェブサイトのテスト
ブラウザでドメイン名をリクエストして、コンテンツがバケットから配信されていることを確認します。確認するときに、オブジェクトのパスを指定します。MainPageSuffix
プロパティを設定している場合は、ドメイン名だけで実行できます。
たとえば、www.example.com
という名前のバケットに test.html
という名前のオブジェクトを保存している場合、ブラウザで www.example.com/test.html
にアクセスしてアクセス可能かどうかを確認します。
クリーンアップ
チュートリアルが終了したら、作成したリソースをクリーンアップして、割り当ての使用を停止し、課金されないようにできます。次のセクションで、リソースを削除または無効にする方法を説明します。
プロジェクトの削除
課金されないようにする最も簡単な方法は、チュートリアル用に作成したプロジェクトを削除することです。
プロジェクトを削除するには:
- In the Google Cloud console, go to the Manage resources page.
- In the project list, select the project that you want to delete, and then click Delete.
- In the dialog, type the project ID, and then click Shut down to delete the project.