静的ウェブサイトをホストする

このチュートリアルでは、所有するドメインの静的ウェブサイトをホストするように Cloud Storage バケットを構成します。静的ウェブページには HTML、CSS、JavaScript などのクライアント側の技術を使用できます。PHP のようなサーバー側のスクリプトなどの動的コンテンツを含めることはできません。

Cloud Storage 自体では HTTPS を使用するカスタムドメインをサポートしていません。このチュートリアルでは、Cloud Storage と HTTP(S) ロードバランシングを使用して HTTPS を介してカスタムドメインのコンテンツを提供します。カスタムドメインのコンテンツを HTTPS 経由で提供する別の方法については、HTTPS によるサービス提供のトラブルシューティングをご覧ください。また、Cloud Storage を使用して HTTP 経由でカスタムドメインのコンテンツを提供することもできます。この場合、ロードバランサは必要ありません。

静的ウェブページのサンプルやヒント（動的ウェブサイトの静的アセットをホストする方法など）については、静的ウェブサイトのページをご覧ください。

目標

このチュートリアルでは、次の方法について説明します。

バケットを作成する。
サイトのファイルをアップロードして共有する。
ロードバランサと SSL 証明書を設定する。
ロードバランサをバケットに接続する。
A レコードを使用して、ドメインをロードバランサに指定する。
ウェブサイトをテストする。

料金

このチュートリアルでは、課金対象である次の Google Cloud コンポーネントを使用します。

静的ウェブサイトのホスティングで発生する可能性がある料金の詳細については、料金をモニタリングするのヒントをご覧ください。

始める前に

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

Google Cloud Console の [プロジェクトセレクタ] ページで、Google Cloud プロジェクトを選択または作成します。

プロジェクトセレクタに移動

Cloud プロジェクトに対して課金が有効になっていることを確認します。詳しくは、プロジェクトで課金が有効になっているかどうかを確認する方法をご覧ください。

Google Cloud Console の [プロジェクトセレクタ] ページで、Google Cloud プロジェクトを選択または作成します。

プロジェクトセレクタに移動

プロジェクトで Compute Engine API を有効にします。
ストレージオブジェクト管理者とネットワーク管理者の Identity and Access Management ロールが付与されている必要があります。
自分がオーナーまたは管理者になっているドメインが必要です。既存のドメインがない場合、Google Domains や Cloud Domains など、新しいドメインを登録できるサービスは多数あります。
このチュートリアルではドメイン example.com を使用します。
提供するウェブサイトのファイルをいくつか用意します。このチュートリアルは、少なくともインデックスページ（index.html）と 404 ページ（404.html）がある場合に最適です。
（省略可）Cloud Storage バケットにドメインと同じ名前を使用する場合は、使用するドメインを所有または管理していることを確認する必要があります。www.example.com などのサブドメインではなく、example.com などのトップレベルドメインを検証していることを確認します。Google Domains でドメインを購入した場合、確認は自動的に行われます。

バケットの作成

バケットを作成するには:

コンソール

Google Cloud コンソールで、Cloud Storage の [バケット] ページに移動します。
[バケット] に移動
[バケットを作成] をクリックします。
[バケットの作成] ページで、ユーザーのバケット情報を入力します。次のステップに進むには、[続行] をクリックします。
- [バケットに名前を付ける] で、バケット名の要件を満たす名前を入力します。
- [データの保存場所の選択] で、バケットデータを永続的に保存するロケーションタイプとロケーションを選択します。
- [データのストレージクラスを選択する] で、バケットのデフォルトのストレージクラスを選択するか、バケットのデータの自動ストレージクラス管理について Autoclass を選択します。
  注: 右側の [毎月の費用の見積もり] パネルでは、選択したストレージクラスとロケーション、予想されるデータサイズとオペレーションに基づいてバケットの毎月のコストを見積もります。
- [オブジェクトへのアクセスを制御する方法を選択する] で、バケットで公開アクセスの防止を適用するかどうかを選択して、バケットのオブジェクトのアクセス制御モデルを選択します。
  注: プロジェクトの組織のポリシーによって公開アクセスの防止がすでに適用されている場合、[公開アクセスの防止] の切り替えはロックされています。
- [オブジェクトデータを保護する方法を選択] で、必要に応じて [保護ツール] を構成し、データ暗号化メソッドを選択します。
[作成] をクリックします。

失敗した Cloud Storage オペレーションの詳細なエラー情報を Google Cloud コンソールで確認する方法については、トラブルシューティングをご覧ください。

コマンドライン

gcloud

gcloud storage buckets create コマンドを使用します。

gcloud storage buckets create gs://BUCKET_NAME

ここで

BUCKET_NAME は、バケットに付ける名前で、命名要件の対象となります。例: my-bucket

リクエストが成功すると、コマンドから次のメッセージが返されます。

Creating gs://BUCKET_NAME/...

次のオプションフラグを設定すると、バケットの作成をより詳細に管理できます。

--project: バケットが関連付けられるプロジェクト ID またはプロジェクト番号を指定します。例: my-project
--default-storage-class: バケットのデフォルトのストレージクラスを指定します。例: NEARLINE
--location: バケットのロケーションを指定します。例: US-EAST1
--uniform-bucket-level-access: バケットの均一なバケットレベルのアクセスを有効にします。

gcloud バケットの作成オプションの完全なリストについては、buckets create オプションをご覧ください。

次に例を示します。

gcloud storage buckets create gs://BUCKET_NAME --project=PROJECT_ID --default-storage-class=STORAGE_CLASS --location=BUCKET_LOCATION --uniform-bucket-level-access

gsutil

gsutil mb コマンドを使用します。

gsutil mb gs://BUCKET_NAME

ここで

BUCKET_NAME は、バケットに付ける名前で、命名要件の対象となります。例: my-bucket

リクエストが成功すると、コマンドから次のメッセージが返されます。

Creating gs://BUCKET_NAME/...

次のオプションフラグを設定すると、バケットの作成をより詳細に管理できます。

-p: バケットが関連付けられるプロジェクト ID またはプロジェクト番号を指定します。例: my-project
-c: バケットのデフォルトのストレージクラスを指定します。例: NEARLINE
-l: バケットのロケーションを指定します。例: US-EAST1
-b: バケットの均一なバケットレベルのアクセスの設定を指定します。例: ON

gsutil バケットを作成するためのオプションの完全なリストについては、mb のオプションをご覧ください。

次に例を示します。

gsutil mb -p PROJECT_ID -c STORAGE_CLASS -l BUCKET_LOCATION -b on gs://BUCKET_NAME

コードサンプル

C++

詳細については、Cloud Storage C++ API のリファレンスドキュメントをご覧ください。

GitHub で表示フィードバック

namespace gcs = ::google::cloud::storage;
using ::google::cloud::StatusOr;
[](gcs::Client client, std::string const& bucket_name,
   std::string const& storage_class, std::string const& location) {
  StatusOr<gcs::BucketMetadata> bucket_metadata =
      client.CreateBucket(bucket_name, gcs::BucketMetadata()
                                           .set_storage_class(storage_class)
                                           .set_location(location));

  if (!bucket_metadata) {
    throw std::runtime_error(bucket_metadata.status().message());
  }

  std::cout << "Bucket " << bucket_metadata->name() << " created."
            << "\nFull Metadata: " << *bucket_metadata << "\n";
}

C#

詳細については、Cloud Storage C# API のリファレンスドキュメントをご覧ください。

GitHub で表示フィードバック


using Google.Apis.Storage.v1.Data;
using Google.Cloud.Storage.V1;
using System;

public class CreateRegionalBucketSample
{
    /// <summary>
    /// Creates a storage bucket with region.
    /// </summary>
    /// <param name="projectId">The ID of the project to create the buckets in.</param>
    /// <param name="location">The location of the bucket. Object data for objects in the bucket resides in
    /// physical storage within this region. Defaults to US.</param>
    /// <param name="bucketName">The name of the bucket to create.</param>
    /// <param name="storageClass">The bucket's default storage class, used whenever no storageClass is specified
    /// for a newly-created object. This defines how objects in the bucket are stored
    /// and determines the SLA and the cost of storage. Values include MULTI_REGIONAL,
    /// REGIONAL, STANDARD, NEARLINE, COLDLINE, ARCHIVE, and DURABLE_REDUCED_AVAILABILITY.
    /// If this value is not specified when the bucket is created, it will default to
    /// STANDARD.</param>
    public Bucket CreateRegionalBucket(
        string projectId = "your-project-id",
        string bucketName = "your-unique-bucket-name",
        string location = "us-west1",
        string storageClass = "REGIONAL")
    {
        var storage = StorageClient.Create();
        Bucket bucket = new Bucket
        {
            Location = location,
            Name = bucketName,
            StorageClass = storageClass
        };
        var newlyCreatedBucket = storage.CreateBucket(projectId, bucket);
        Console.WriteLine($"Created {bucketName}.");
        return newlyCreatedBucket;
    }
}

Go

詳細については、Cloud Storage Go API のリファレンスドキュメントをご覧ください。

GitHub で表示フィードバック

import (
	"context"
	"fmt"
	"io"
	"time"

	"cloud.google.com/go/storage"
)

// createBucketClassLocation creates a new bucket in the project with Storage class and
// location.
func createBucketClassLocation(w io.Writer, projectID, bucketName string) error {
	// projectID := "my-project-id"
	// bucketName := "bucket-name"
	ctx := context.Background()
	client, err := storage.NewClient(ctx)
	if err != nil {
		return fmt.Errorf("storage.NewClient: %v", err)
	}
	defer client.Close()

	ctx, cancel := context.WithTimeout(ctx, time.Second*30)
	defer cancel()

	storageClassAndLocation := &storage.BucketAttrs{
		StorageClass: "COLDLINE",
		Location:     "asia",
	}
	bucket := client.Bucket(bucketName)
	if err := bucket.Create(ctx, projectID, storageClassAndLocation); err != nil {
		return fmt.Errorf("Bucket(%q).Create: %v", bucketName, err)
	}
	fmt.Fprintf(w, "Created bucket %v in %v with storage class %v\n", bucketName, storageClassAndLocation.Location, storageClassAndLocation.StorageClass)
	return nil
}

Java

詳細については、Cloud Storage Java API のリファレンスドキュメントをご覧ください。

GitHub で表示フィードバック

import com.google.cloud.storage.Bucket;
import com.google.cloud.storage.BucketInfo;
import com.google.cloud.storage.Storage;
import com.google.cloud.storage.StorageClass;
import com.google.cloud.storage.StorageOptions;

public class CreateBucketWithStorageClassAndLocation {
  public static void createBucketWithStorageClassAndLocation(String projectId, String bucketName) {
    // The ID of your GCP project
    // String projectId = "your-project-id";

    // The ID to give your GCS bucket
    // String bucketName = "your-unique-bucket-name";

    Storage storage = StorageOptions.newBuilder().setProjectId(projectId).build().getService();

    // See the StorageClass documentation for other valid storage classes:
    // https://googleapis.dev/java/google-cloud-clients/latest/com/google/cloud/storage/StorageClass.html
    StorageClass storageClass = StorageClass.COLDLINE;

    // See this documentation for other valid locations:
    // http://g.co/cloud/storage/docs/bucket-locations#location-mr
    String location = "ASIA";

    Bucket bucket =
        storage.create(
            BucketInfo.newBuilder(bucketName)
                .setStorageClass(storageClass)
                .setLocation(location)
                .build());

    System.out.println(
        "Created bucket "
            + bucket.getName()
            + " in "
            + bucket.getLocation()
            + " with storage class "
            + bucket.getStorageClass());
  }
}

Node.js

詳細については、Cloud Storage Node.js API のリファレンスドキュメントをご覧ください。

GitHub で表示フィードバック

/**
 * TODO(developer): Uncomment the following lines before running the sample.
 */
// The ID of your GCS bucket
// const bucketName = 'your-unique-bucket-name';

// The name of a storage class
// See the StorageClass documentation for other valid storage classes:
// https://googleapis.dev/java/google-cloud-clients/latest/com/google/cloud/storage/StorageClass.html
// const storageClass = 'coldline';

// The name of a location
// See this documentation for other valid locations:
// http://g.co/cloud/storage/docs/locations#location-mr
// const location = 'ASIA';

// Imports the Google Cloud client library
const {Storage} = require('@google-cloud/storage');

// Creates a client
// The bucket in the sample below will be created in the project associated with this client.
// For more information, please see https://cloud.google.com/docs/authentication/production or https://googleapis.dev/nodejs/storage/latest/Storage.html
const storage = new Storage();

async function createBucketWithStorageClassAndLocation() {
  // For default values see: https://cloud.google.com/storage/docs/locations and
  // https://cloud.google.com/storage/docs/storage-classes
  const [bucket] = await storage.createBucket(bucketName, {
    location,
    [storageClass]: true,
  });

  console.log(
    `${bucket.name} created with ${storageClass} class in ${location}`
  );
}

createBucketWithStorageClassAndLocation().catch(console.error);

PHP

詳細については、Cloud Storage PHP API のリファレンスドキュメントをご覧ください。

GitHub で表示フィードバック

use Google\Cloud\Storage\StorageClient;

/**
 * Create a new bucket with a custom default storage class and location.
 *
 * @param string $bucketName The name of your Cloud Storage bucket.
 *        (e.g. 'my-bucket')
 */
function create_bucket_class_location(string $bucketName): void
{
    $storage = new StorageClient();
    $storageClass = 'COLDLINE';
    $location = 'ASIA';
    $bucket = $storage->createBucket($bucketName, [
        'storageClass' => $storageClass,
        'location' => $location,
    ]);

    $objects = $bucket->objects([
        'encryption' => [
            'defaultKmsKeyName' => null,
        ]
    ]);

    printf('Created bucket %s in %s with storage class %s', $bucketName, $storageClass, $location);
}

Python

詳細については、Cloud Storage Python API のリファレンスドキュメントをご覧ください。

GitHub で表示フィードバック

from google.cloud import storage

def create_bucket_class_location(bucket_name):
    """
    Create a new bucket in the US region with the coldline storage
    class
    """
    # bucket_name = "your-new-bucket-name"

    storage_client = storage.Client()

    bucket = storage_client.bucket(bucket_name)
    bucket.storage_class = "COLDLINE"
    new_bucket = storage_client.create_bucket(bucket, location="us")

    print(
        "Created bucket {} in {} with storage class {}".format(
            new_bucket.name, new_bucket.location, new_bucket.storage_class
        )
    )
    return new_bucket

Ruby

詳細については、Cloud Storage Ruby API のリファレンスドキュメントをご覧ください。

GitHub で表示フィードバック

def create_bucket_class_location bucket_name:
  # The ID to give your GCS bucket
  # bucket_name = "your-unique-bucket-name"

  require "google/cloud/storage"

  storage = Google::Cloud::Storage.new
  bucket  = storage.create_bucket bucket_name,
                                  location:      "ASIA",
                                  storage_class: "COLDLINE"

  puts "Created bucket #{bucket.name} in #{bucket.location} with #{bucket.storage_class} class"
end

Terraform

ストレージバケットの作成には Terraform リソースを使用します。

次の例には、インデックスページのサフィックスとカスタムエラーページの割り当てが含まれています。詳しくは、特殊ページを割り当てるをご覧ください。

GitHub で表示フィードバック

# Create new storage bucket in the US multi-region
# with coldline storage and settings for main_page_suffix and not_found_page
resource "random_id" "bucket_prefix" {
  byte_length = 8
}

resource "google_storage_bucket" "static_website" {
  name          = "${random_id.bucket_prefix.hex}-static-website-bucket"
  location      = "US"
  storage_class = "COLDLINE"
  website {
    main_page_suffix = "index.html"
    not_found_page   = "index.html"
  }
}

REST API

JSON API

OAuth 2.0 Playground から認証アクセストークンを取得します。固有の OAuth 認証情報を使用するように Playground を構成します。手順については、API 認証をご覧ください。
バケットの設定を含む .json ファイルを作成します。この設定には、バケットの name を含める必要があります。設定の一覧については、Buckets:Insert のドキュメントをご覧ください。一般的な設定は次のとおりです。

{
  "name": "BUCKET_NAME",
  "location": "BUCKET_LOCATION",
  "storageClass": "STORAGE_CLASS",
  "iamConfiguration": {
    "uniformBucketLevelAccess": {
      "enabled": true
    },
  }
}

ここで

BUCKET_NAME は、バケットに付ける名前で、命名要件の対象となります。例: my-bucket
BUCKET_LOCATION は、バケットのオブジェクトデータを保存するロケーションです。例: US-EAST1
STORAGE_CLASS はバケットのデフォルトのストレージクラスです。例: NEARLINE

cURL を使用して JSON API を呼び出します。
```
curl -X POST --data-binary @JSON_FILE_NAME.json \
     -H "Authorization: Bearer OAUTH2_TOKEN" \
     -H "Content-Type: application/json" \
     "https://storage.googleapis.com/storage/v1/b?project=PROJECT_IDENTIFIER"
```
ここで
- JSON_FILE_NAME は手順 2 で作成した JSON ファイルの名前です。
- OAUTH2_TOKEN は、手順 1 で生成したアクセストークンです。
- PROJECT_IDENTIFIER は、バケットが関連付けられているプロジェクトの ID または番号です。例: my-project

XML API

OAuth 2.0 Playground から認証アクセストークンを取得します。固有の OAuth 認証情報を使用するように Playground を構成します。手順については、API 認証をご覧ください。
次の情報を含む .xml ファイルを作成します。

<CreateBucketConfiguration>
   <LocationConstraint>BUCKET_LOCATION</LocationConstraint>
   <StorageClass>STORAGE_CLASS</StorageClass>
</CreateBucketConfiguration>

ここで

BUCKET_LOCATION は、バケットのオブジェクトデータを保存するロケーションです。例: US-EAST1
STORAGE_CLASS はバケットのデフォルトのストレージクラスです。例: NEARLINE

cURL を使用して、XML API を呼び出します。
```
curl -X PUT --data-binary @XML_FILE_NAME.xml \
     -H "Authorization: Bearer OAUTH2_TOKEN" \
     -H "x-goog-project-id: PROJECT_ID" \
     "https://storage.googleapis.com/BUCKET_NAME"
```
ここで
- XML_FILE_NAME は手順 2 で作成した XML ファイルの名前です。
- OAUTH2_TOKEN は、手順 1 で生成したアクセストークンです。
- PROJECT_ID は、バケットが関連付けられるプロジェクトの ID です。例: my-project
- BUCKET_NAME は、バケットに付ける名前で、命名要件の対象となります。例: my-bucket

サイトのファイルをアップロードする

ウェブサイトから配信するファイルをバケットに追加します。

コンソール

Google Cloud コンソールで、Cloud Storage の [バケット] ページに移動します。
[バケット] に移動
バケットのリストで、作成したバケットをクリックします。

[バケットの詳細] ページが開き、[オブジェクト] タブが選択されています。
[ファイルをアップロード] ボタンをクリックします。
ファイルダイアログで、目的のファイルを参照して選択します。

アップロードが完了すると、ファイル名とファイル情報がバケットに表示されます。

gsutil

ファイルをバケットにコピーするには、gsutil cp コマンドを使用します。たとえば、ファイル index.html を現在の場所 Desktop からバケット my-static-assets にコピーするには、次のようにします。

gsutil cp Desktop/index.html gs://my-static-assets

成功した場合、次の内容が返されます。

Copying file://Desktop/index.html [Content-Type=text/html]...
Uploading   gs://my-static-assets/index.html:       0 B/2.58 KiB
Uploading   gs://my-static-assets/index.html:       2.58 KiB/2.58 KiB