静的ウェブサイトのホスティング

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

このチュートリアルでは、Cloud Storage と HTTP(S) 負荷分散を使用して、HTTPS 経由でカスタム ドメインからコンテンツを提供します。カスタム ドメインのコンテンツを HTTPS 経由で配信する別の方法については、関連するトラブルシューティングのトピックをご覧ください。Cloud Storage を使用して HTTP 経由でカスタム ドメインのコンテンツを提供することもできます。

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

目標

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

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

料金

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

  • Cloud Storage
  • Cloud Load Balancing

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

始める前に

  1. Google アカウントにログインします。

    Google アカウントをまだお持ちでない場合は、新しいアカウントを登録します。

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

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

  3. Google Cloud プロジェクトに対して課金が有効になっていることを確認します。 プロジェクトに対して課金が有効になっていることを確認する方法を学習する

  4. 自分がオーナーまたは管理者になっているドメインが必要です。既存のドメインがない場合は、Google Domains など、新しいドメインを登録できるサービスが多数あります。

    このチュートリアルではドメイン example.com を使用します。

  5. 自分が使用するドメインのオーナーまたは管理者になっていることを確認します。www.example.com などのサブドメインではなく、example.com などのトップレベル ドメインを検証していることを確認します。

    注: バケットに関連付けているドメインを所有している場合は、以前にこの手順をすでに実行している可能性があります。Google Domains でドメインを購入した場合、確認は自動的に行われます。

  6. プロジェクトのオーナーまたは編集者のロールを持っているか、ストレージ オブジェクト管理者またはネットワーク管理者のいずれかの Cloud IAM ロールを持っていることを確認します。

バケットの作成

www.example.com という名前のバケットを作成するには:

Console

  1. Google Cloud Console で Cloud Storage ブラウザを開きます。
    Cloud Storage ブラウザを開く
  2. [バケットを作成] をクリックして、バケット作成フォームを開きます。

  3. バケット情報を入力し、[続行] をクリックして各手順を完了します。

    • バケットの名前を設定します。後の手順で確認しやすいように、ドメイン名と同じにすることをおすすめします。例: www.example.com

    • バケットのロケーション タイプロケーションを選択します。たとえば、リージョンus-east1 を選択します。

    • ストレージ クラスStandard Storage を選択します。

    • アクセス制御に [均一] を選択します。

  4. [作成] をクリックします。

成功すると、バケットの詳細ページが開き、「このバケットには有効なオブジェクトがありません」というテキストが表示されます。

Cloud Storage ブラウザで失敗した処理に関する詳細なエラー情報を確認する方法については、トラブルシューティングをご覧ください。

gsutil

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

gsutil mb -b on gs://www.example.com

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

Creating gs://www.example.com/...

コードサンプル

C++

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

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

  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 のリファレンス ドキュメントをご覧ください。

public static Bucket StorageCreateBucket(string projectId, string bucketName)
{
    var storage = StorageClient.Create();
    var bucket = storage.CreateBucket(projectId, bucketName);
    Console.WriteLine($"Created {bucketName}.");
    return bucket;
}

Go

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

ctx := context.Background()
bucket := client.Bucket(bucketName)

ctx, cancel := context.WithTimeout(ctx, time.Second*10)
defer cancel()
if err := bucket.Create(ctx, projectID, &storage.BucketAttrs{
	StorageClass: "COLDLINE",
	Location:     "asia",
}); err != nil {
	return err
}

Java

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

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 のリファレンス ドキュメントをご覧ください。

/**
 * TODO(developer): Uncomment the following line before running the sample.
 */
// const bucketName = 'Name of a bucket, e.g. my-bucket';

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

// Creates a client
const storage = new Storage();

async function createBucket() {
  // Creates a new bucket in the Asia region with the coldline default storage
  // class. Leave the second argument blank for default settings.
  //
  // 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: 'ASIA',
    storageClass: 'COLDLINE',
  });

  console.log(`Bucket ${bucket.name} created.`);
}

createBucket().catch(console.error);

PHP

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

use Google\Cloud\Storage\StorageClient;

/**
 * Create a Cloud Storage Bucket.
 *
 * @param string $bucketName name of the bucket to create.
 * @param string $options options for the new bucket.
 *
 */
function create_bucket($bucketName, $options = [])
{
    $storage = new StorageClient();
    $bucket = $storage->createBucket($bucketName, $options);
    printf('Bucket created: %s' . PHP_EOL, $bucket->name());
}

Python

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

from google.cloud import storage

def create_bucket(bucket_name):
    """Creates a new bucket."""
    # bucket_name = "your-new-bucket-name"

    storage_client = storage.Client()

    bucket = storage_client.create_bucket(bucket_name)

    print("Bucket {} created".format(bucket.name))

Ruby

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

# bucket_name   = "Name of Google Cloud Storage bucket to create"
# location      = "Location of where to create Cloud Storage bucket"
# storage_class = "Storage class of Cloud Storage bucket"

require "google/cloud/storage"

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

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

REST API

JSON API

  1. OAuth 2.0 Playground から承認アクセス トークンを取得します。固有の OAuth 認証情報を使用するようにプレイグラウンドを構成します。
  2. ウェブサイトの名前を name プロパティに割り当てる .json ファイルを作成します。

    {
      "name": "www.example.com"
    }
  3. 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

  1. OAuth 2.0 Playground から承認アクセス トークンを取得します。固有の OAuth 認証情報を使用するようにプレイグラウンドを構成します。
  2. 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

  1. Google Cloud Console で Cloud Storage ブラウザを開きます。
    Cloud Storage ブラウザを開く
  2. バケットのリストで、作成したバケットをクリックします。

    [バケットの詳細] ページが開き、[オブジェクト] タブが選択されています。

  3. [ファイルをアップロード] ボタンをクリックします。

  4. ファイル ダイアログで、目的のファイルを参照して選択します。

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

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 のリファレンス ドキュメントをご覧ください。

namespace gcs = google::cloud::storage;
using ::google::cloud::StatusOr;
[](gcs::Client client, std::string const& file_name,
   std::string const& bucket_name, std::string const& object_name) {
  // Note that the client library automatically computes a hash on the
  // client-side to verify data integrity during transmission.
  StatusOr<gcs::ObjectMetadata> metadata = client.UploadFile(
      file_name, bucket_name, object_name, gcs::IfGenerationMatch(0));
  if (!metadata) throw std::runtime_error(metadata.status().message());

  std::cout << "Uploaded " << file_name << " to object " << metadata->name()
            << " in bucket " << metadata->bucket()
            << "\nFull metadata: " << *metadata << "\n";
}

C#

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

private void UploadFile(string bucketName, string localPath,
    string objectName = null)
{
    var storage = StorageClient.Create();
    using (var f = File.OpenRead(localPath))
    {
        objectName = objectName ?? Path.GetFileName(localPath);
        storage.UploadObject(bucketName, objectName, null, f);
        Console.WriteLine($"Uploaded {objectName}.");
    }
}

Go

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

ctx := context.Background()
f, err := os.Open("notes.txt")
if err != nil {
	return err
}
defer f.Close()

ctx, cancel := context.WithTimeout(ctx, time.Second*50)
defer cancel()
wc := client.Bucket(bucket).Object(object).NewWriter(ctx)
if _, err = io.Copy(wc, f); err != nil {
	return err
}
if err := wc.Close(); err != nil {
	return err
}

Java

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

import com.google.cloud.storage.BlobId;
import com.google.cloud.storage.BlobInfo;
import com.google.cloud.storage.Storage;
import com.google.cloud.storage.StorageOptions;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Paths;

public class UploadObject {
  public static void uploadObject(
      String projectId, String bucketName, String objectName, String filePath) throws IOException {
    // The ID of your GCP project
    // String projectId = "your-project-id";

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

    // The ID of your GCS object
    // String objectName = "your-object-name";

    // The path to your file to upload
    // String filePath = "path/to/your/file"

    Storage storage = StorageOptions.newBuilder().setProjectId(projectId).build().getService();
    BlobId blobId = BlobId.of(bucketName, objectName);
    BlobInfo blobInfo = BlobInfo.newBuilder(blobId).build();
    storage.create(blobInfo, Files.readAllBytes(Paths.get(filePath)));

    System.out.println(
        "File " + filePath + " uploaded to bucket " + bucketName + " as " + objectName);
  }
}

Node.js

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

/**
 * TODO(developer): Uncomment the following lines before running the sample.
 */
// const bucketName = 'Name of a bucket, e.g. my-bucket';
// const filename = 'Local file to upload, e.g. ./local/path/to/file.txt';

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

// Creates a client
const storage = new Storage();

async function uploadFile() {
  // Uploads a local file to the bucket
  await storage.bucket(bucketName).upload(filename, {
    // Support for HTTP requests made with `Accept-Encoding: gzip`
    gzip: true,
    // By setting the option `destination`, you can change the name of the
    // object you are uploading to a bucket.
    metadata: {
      // Enable long-lived HTTP caching headers
      // Use only if the contents of the file will never change
      // (If the contents will change, use cacheControl: 'no-cache')
      cacheControl: 'public, max-age=31536000',
    },
  });

  console.log(`${filename} uploaded to ${bucketName}.`);
}

uploadFile().catch(console.error);

PHP

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

use Google\Cloud\Storage\StorageClient;

/**
 * Upload a file.
 *
 * @param string $bucketName the name of your Google Cloud bucket.
 * @param string $objectName the name of the object.
 * @param string $source the path to the file to upload.
 *
 * @return Psr\Http\Message\StreamInterface
 */
function upload_object($bucketName, $objectName, $source)
{
    $storage = new StorageClient();
    $file = fopen($source, 'r');
    $bucket = $storage->bucket($bucketName);
    $object = $bucket->upload($file, [
        'name' => $objectName
    ]);
    printf('Uploaded %s to gs://%s/%s' . PHP_EOL, basename($source), $bucketName, $objectName);
}

Python

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

オブジェクトをアップロードするには、Blob.upload_from_file()Blob.upload_from_filename()Blob.upload_from_string() のいずれかのメソッドを使用します。
from google.cloud import storage

def upload_blob(bucket_name, source_file_name, destination_blob_name):
    """Uploads a file to the bucket."""
    # bucket_name = "your-bucket-name"
    # source_file_name = "local/path/to/file"
    # destination_blob_name = "storage-object-name"

    storage_client = storage.Client()
    bucket = storage_client.bucket(bucket_name)
    blob = bucket.blob(destination_blob_name)

    blob.upload_from_filename(source_file_name)

    print(
        "File {} uploaded to {}.".format(
            source_file_name, destination_blob_name
        )
    )

Ruby

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

# bucket_name       = "Your Google Cloud Storage bucket name"
# local_file_path   = "Path to local file to upload"
# storage_file_path = "Path to store the file in Google Cloud Storage"

require "google/cloud/storage"

storage = Google::Cloud::Storage.new
bucket  = storage.bucket bucket_name

file = bucket.create_file local_file_path, storage_file_path

puts "Uploaded #{file.name}"

REST API

JSON API

  1. OAuth 2.0 Playground から承認アクセス トークンを取得します。固有の OAuth 認証情報を使用するようにプレイグラウンドを構成します。
  2. 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

  1. OAuth 2.0 Playground から承認アクセス トークンを取得します。固有の OAuth 認証情報を使用するようにプレイグラウンドを構成します。
  2. 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

  1. Google Cloud Console で Cloud Storage ブラウザを開きます。
    Cloud Storage ブラウザを開く
  2. バケットのリストで、公開するバケットの名前をクリックします。

  3. ページ上部にある [権限] タブを選択します。

  4. [メンバーを追加] ボタンをクリックします。

    [メンバーを追加] ダイアログ ボックスが表示されます。

  5. [新しいメンバー] フィールドに「allUsers」と入力します。

  6. [役割を選択] プルダウンで [Cloud Storage] サブメニューを選択し、[ストレージ オブジェクト閲覧者] オプションをクリックします。

  7. [保存] をクリックします。

  8. [一般公開アクセスを許可] をクリックします。

公開の状態で共有されると、[公開アクセス] 列に各オブジェクトのリンクアイコンが表示されます。このアイコンをクリックすると、オブジェクトの URL を取得できます。

Cloud Storage ブラウザで失敗した処理に関する詳細なエラー情報を確認する方法については、トラブルシューティングをご覧ください。

gsutil

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

gsutil iam ch allUsers:objectViewer gs://www.example.com

コードサンプル

C++

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

namespace gcs = google::cloud::storage;
using google::cloud::StatusOr;
[](gcs::Client client, std::string const& bucket_name) {
  StatusOr<google::cloud::IamPolicy> current_policy =
      client.GetBucketIamPolicy(bucket_name);

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

  current_policy->bindings.AddMember("roles/storage.objectViewer",
                                     "allUsers");

  // Update the policy. Note the use of `gcs::IfMatchEtag` to implement
  // optimistic concurrency control.
  StatusOr<google::cloud::IamPolicy> updated_policy =
      client.SetBucketIamPolicy(bucket_name, *current_policy,
                                gcs::IfMatchEtag(current_policy->etag));

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

  auto role = updated_policy->bindings.find("roles/storage.objectViewer");
  if (role == updated_policy->bindings.end()) {
    std::cout << "Cannot find 'roles/storage.objectViewer' in the updated"
              << " policy. This can happen if another application updates"
              << " the IAM policy at the same time. Please retry the"
              << " operation.\n";
    return;
  }
  auto member = role->second.find("allUsers");
  if (member == role->second.end()) {
    std::cout << "'allUsers' is not a member of the"
              << " 'roles/storage.objectViewer' role in the updated"
              << " policy. This can happen if another application updates"
              << " the IAM policy at the same time. Please retry the"
              << " operation.\n";
    return;
  }
  std::cout << "IamPolicy successfully updated for bucket " << bucket_name
            << '\n';
}

Java

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

import com.google.cloud.Identity;
import com.google.cloud.Policy;
import com.google.cloud.storage.Storage;
import com.google.cloud.storage.StorageOptions;
import com.google.cloud.storage.StorageRoles;

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

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

    Storage storage = StorageOptions.newBuilder().setProjectId(projectId).build().getService();
    Policy originalPolicy = storage.getIamPolicy(bucketName);
    storage.setIamPolicy(
        bucketName,
        originalPolicy
            .toBuilder()
            .addIdentity(StorageRoles.objectViewer(), Identity.allUsers()) // All users can view
            .build());

    System.out.println("Bucket " + bucketName + " is now publicly readable");
  }
}

REST API

JSON API

  1. OAuth 2.0 Playground から承認アクセス トークンを取得します。固有の OAuth 認証情報を使用するようにプレイグラウンドを構成します。
  2. 次の情報が含まれる .json ファイルを作成します。

    {
      "bindings":[
        {
          "role": "roles/storage.objectViewer",
          "members":["allUsers"]
        }
      ]
    }
  3. 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)。詳しくは、ウェブサイトの構成例をご覧ください。

次のサンプルでは、MainPageSuffixindex.html に設定し、NotFoundPage404.html に設定します。

Console

  1. Google Cloud Console で Cloud Storage ブラウザを開きます。
    Cloud Storage ブラウザを開く
  2. バケットのリストで、作成したバケットを見つけます。

  3. バケットに関連付けられた [バケット オーバーフロー] メニュー()をクリックし、[ウェブサイトの構成を編集] を選択します。

  4. ウェブサイト構成ダイアログで、メインページとエラーページを指定します。

  5. [保存] をクリックします。

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 のリファレンス ドキュメントをご覧ください。

namespace gcs = google::cloud::storage;
using ::google::cloud::StatusOr;
[](gcs::Client client, std::string const& bucket_name,
   std::string const& main_page_suffix, std::string const& not_found_page) {
  StatusOr<gcs::BucketMetadata> original =
      client.GetBucketMetadata(bucket_name);

  if (!original) throw std::runtime_error(original.status().message());
  StatusOr<gcs::BucketMetadata> patched_metadata = client.PatchBucket(
      bucket_name,
      gcs::BucketMetadataPatchBuilder().SetWebsite(
          gcs::BucketWebsite{main_page_suffix, not_found_page}),
      gcs::IfMetagenerationMatch(original->metageneration()));

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

  if (!patched_metadata->has_website()) {
    std::cout << "Static website configuration is not set for bucket "
              << patched_metadata->name() << "\n";
    return;
  }

  std::cout << "Static website configuration successfully set for bucket "
            << patched_metadata->name() << "\nNew main page suffix is: "
            << patched_metadata->website().main_page_suffix
            << "\nNew not found page is: "
            << patched_metadata->website().not_found_page << "\n";
}

Java

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

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

public class SetBucketWebsiteInfo {
  public static void setBucketWesbiteInfo(
      String projectId, String bucketName, String indexPage, String notFoundPage) {
    // The ID of your GCP project
    // String projectId = "your-project-id";

    // The ID of your static website bucket
    // String bucketName = "www.example.com";

    // The index page for a static website bucket
    // String indexPage = "index.html";

    // The 404 page for a static website bucket
    // String notFoundPage = "404.html";

    Storage storage = StorageOptions.newBuilder().setProjectId(projectId).build().getService();
    Bucket bucket = storage.get(bucketName);
    bucket.toBuilder().setIndexPage(indexPage).setNotFoundPage(notFoundPage).build().update();

    System.out.println(
        "Static website bucket "
            + bucketName
            + " is set up to use "
            + indexPage
            + " as the index page and "
            + notFoundPage
            + " as the 404 page");
  }
}

REST API

JSON API

  1. OAuth 2.0 Playground から承認アクセス トークンを取得します。固有の OAuth 認証情報を使用するようにプレイグラウンドを構成します。
  2. .json ファイルを作成して、website オブジェクトの mainPageSuffix プロパティと notFoundPage プロパティを目的のページに設定します。

    {
      "website":{
        "mainPageSuffix": "index.html",
        "notFoundPage": "404.html"
      }
    }
  3. 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

  1. OAuth 2.0 Playground から承認アクセス トークンを取得します。固有の OAuth 認証情報を使用するようにプレイグラウンドを構成します。
  2. .xml ファイルを作成して、WebsiteConfiguration 要素の MainPageSuffix 要素と NotFoundPage 要素を目的のページに設定します。

    <WebsiteConfiguration>
      <MainPageSuffix>index.html</MainPageSuffix>
      <NotFoundPage>404.html</NotFoundPage>
    </WebsiteConfiguration>
  3. 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 証明書を設定する

HTTPS 経由でウェブサイトを提供するには、SSL 証明書が必要です。このセクションでは、ロードバランサのバックエンドにバケットを追加する方法と、ロードバランサのフロントエンドに新しいGoogle マネージド SSL 証明書を追加する方法について説明します。

  1. Google Cloud Console の [負荷分散] ページに移動します。
    [負荷分散] ページに移動
  2. [HTTP(S) 負荷分散] で [構成を開始] をクリックします。
  3. [インターネットから自分の VM へ] をオンにし、[続行] をクリックします。
  4. ロードバランサに名前を付けます(たとえば、example-lb)。

バックエンドを構成する

  1. [バックエンドの構成] をクリックします。
  2. [バックエンド サービスとバックエンド バケットの作成または選択] プルダウンで、[バックエンド バケット] サブメニューに移動し、[バックエンド バケットを作成] オプションをクリックします。
  3. バックエンド バケットの名前を選択します(たとえば、example-bucket)。
  4. [Cloud Storage バケット] で [参照] をクリックします。
  5. www.example.com バケットを選択し、[選択] をクリックします。
  6. [作成] をクリックします。

ホストルールとパスマッチャーを構成する

ホストルールとパスマッチャーは、外部 HTTP(S) ロードバランサの URL マップの構成要素です。

  1. [ホストとパスのルール] をクリックします。
  2. 前の手順で作成したバックエンド バケット example-bucketモードは、デフォルトの単純なホストとパスのルールのままにします。

フロントエンドを構成する

このセクションでは、HTTPS プロトコルを構成し、SSL 証明書を作成する方法について説明します。既存の証明書を選択することも、セルフマネージド SSL 証明書をアップロードすることもできます。

  1. [フロントエンドの構成] をクリックします。
  2. 次のフィールドの値を構成します。

  3. [IP アドレス] フィールドで次の操作を行います。

    1. プルダウンで [IP アドレスを作成] をクリックします。
    2. [新しい静的 IP アドレスの予約] ポップアップで、IP アドレスの名前として「example-ip」を入力します。
    3. [予約] をクリックします。
  4. [ポート] で [443] を選択します。

  5. [証明書] フィールドで [新しい証明書を作成] を選択します。パネルに証明書作成フォームが表示されます。以下の構成を行います。

    • 名前: example-ssl
    • 作成モード: Google マネージドの証明書を作成する
    • ドメイン: www.example.com。ルートドメイン example.com など、追加ドメイン経由でコンテンツを配信する場合は、Enter キーを押して追加行にドメインを追加します。各証明書の上限は 100 ドメインです。
  6. [作成] をクリックします。

  7. [完了] をクリックします。

構成の確認

  1. [確認と完了] をクリックします。
  2. バックエンドの構成ホストとパスのルールフロントエンドの構成を確認します。
  3. [作成] をクリックします。

ロードバランサの作成に数分かかることがあります。

ドメインをロードバランサに接続する

ロードバランサが作成されたら、ロードバランサの名前(example-lb)をクリックします。ロードバランサに関連付けられた IP アドレスをメモします(例: 30.90.80.100)。ドメインをロードバランサに指定するには、ドメイン登録サービスを使用して A レコードを作成します。SSL 証明書に複数のドメインを追加した場合は、ロードバランサの IP アドレスを参照する A レコードをドメインごとに追加する必要があります。たとえば、www.example.comexample.comA レコードを作成するには、次のようにします。

NAME                  TYPE     DATA
www                   A        30.90.80.100
@                     A        30.90.80.100

Google Cloud が証明書をプロビジョニングし、ロードバランサ経由でサイトが利用可能になるまでに最大で 60~90 分かかることがあります。証明書のステータスをモニタリングするには:

Console

  1. Google Cloud Console の [負荷分散] ページに移動します。
    [負荷分散] ページに移動
  2. ロードバランサの名前(example-lb)をクリックします。
  3. ロードバランサに関連付けられている SSL 証明書の名前(example-ssl)をクリックします。
  4. [ステータス] 行と [ドメイン ステータス] 行に証明書のステータスが表示されます。ウェブサイトで証明書を有効にするには、両方が有効である必要があります。

gcloud

  1. 証明書のステータスを確認するには、次のコマンドを実行します。

    gcloud beta compute ssl-certificates describe certificate-name \
      --global \
      --format="get(name,managed.status)"
    
  2. ドメインのステータスを確認するには、次のコマンドを実行します。

    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.comindex.html に移動します。

クリーンアップ

静的ウェブサイトのホスティングのチュートリアルが終了したら、Google Cloud で作成したリソースをクリーンアップして、今後料金が発生しないようにします。次のセクションで、リソースを削除または無効にする方法を説明します。

プロジェクトの削除

課金をなくす最も簡単な方法は、チュートリアル用に作成したプロジェクトを削除することです。

プロジェクトを削除するには:

  1. Cloud Console で [リソースの管理] ページに移動します。

    [リソースの管理] ページに移動

  2. プロジェクト リストで、削除するプロジェクトを選択し、[削除] をクリックします。
  3. ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。

ロードバランサとバケットの削除

プロジェクト全体を削除しない場合は、このチュートリアル用に作成したロードバランサとバケットを削除します。

  1. Google Cloud Console の [負荷分散] ページに移動します。
    [負荷分散] ページに移動
  2. example-lb の横のチェックボックスをオンにします。
  3. [削除] をクリックします。
  4. (省略可)www.example.com バケットや example-ssl SSL 証明書など、ロードバランサと一緒に削除するリソースのチェックボックスをオンにします。
  5. [ロードバランサを削除] または [ロードバランサと選択したリソースを削除] をクリックします。

次のステップ