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

このチュートリアルでは、所有するドメインの静的ウェブサイトをホストするように 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 のコストの詳細については、料金ページをご覧ください。

始める前に

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

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

注: この手順で作成するリソースをそのまま保持する予定でない場合、既存のプロジェクトを選択するのではなく、新しいプロジェクトを作成してください。チュートリアルの終了後にそのプロジェクトを削除すれば、プロジェクトに関連するすべてのリソースを削除できます。

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

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

自分がオーナーまたは管理者になっているドメインが必要です。既存のドメインがない場合は、Google Domains など、新しいドメインを登録できるサービスが多数あります。
このチュートリアルではドメイン example.com を使用します。
自分が使用するドメインのオーナーまたは管理者になっていることを確認します。www.example.com などのサブドメインではなく、example.com などのトップレベルドメインを検証していることを確認します。
注: バケットに関連付けているドメインを所有している場合は、以前にこの手順をすでに実行している可能性があります。Google Domains でドメインを購入した場合、確認は自動的に行われます。
プロジェクトのオーナーまたは編集者のロールを持っているか、ストレージオブジェクト管理者またはネットワーク管理者のいずれかの Cloud IAM ロールを持っていることを確認します。

バケットの作成

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

Console

Google Cloud Console で Cloud Storage ブラウザを開きます。
Cloud Storage ブラウザを開く
[バケットを作成] をクリックして、バケット作成フォームを開きます。
バケット情報を入力し、[続行] をクリックして各手順を完了します。
- バケットの名前を設定します。後の手順で確認しやすいように、ドメイン名と同じにすることをおすすめします。例: www.example.com
- バケットのロケーションタイプとロケーションを選択します。たとえば、リージョンと us-east1 を選択します。
- ストレージクラスに Standard Storage を選択します。
- アクセス制御に [均一] を選択します。
[作成] をクリックします。

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

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

gsutil

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

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

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

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

コードサンプル

C++

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

GitHub で表示フィードバック

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

GitHub で表示フィードバック

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

GitHub で表示フィードバック

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

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

GitHub で表示フィードバック

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

GitHub で表示フィードバック

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

GitHub で表示フィードバック

# 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

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

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

GitHub で表示フィードバック

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

GitHub で表示フィードバック

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

GitHub で表示フィードバック

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

GitHub で表示フィードバック

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

GitHub で表示フィードバック

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

GitHub で表示フィードバック

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() のいずれかのメソッドを使用します。

GitHub で表示フィードバック

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

GitHub で表示フィードバック

# 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

OAuth 2.0 Playground から承認アクセストークンを取得します。固有の OAuth 認証情報を使用するようにプレイグラウンドを構成します。

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 認証情報を使用するようにプレイグラウンドを構成します。

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

GitHub で表示フィードバック

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

GitHub で表示フィードバック

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

OAuth 2.0 Playground から承認アクセストークンを取得します。固有の OAuth 認証情報を使用するようにプレイグラウンドを構成します。

次の情報が含まれる .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 を index.html に設定し、NotFoundPage を 404.html に設定します。

Console

Google Cloud Console で Cloud Storage ブラウザを開きます。
Cloud Storage ブラウザを開く
バケットのリストで、作成したバケットを見つけます。
バケットに関連付けられた [バケットオーバーフロー] メニュー（）をクリックし、[ウェブサイトの構成を編集] を選択します。

注: このオプションは、名前が有効なウェブサイトパターンに一致するバケットでのみ使用できます。バケット名がウェブサイトパターンと一致しない場合は、gsutil を使用してください。
ウェブサイト構成ダイアログで、メインページとエラーページを指定します。
[保存] をクリックします。

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

GitHub で表示フィードバック

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

GitHub で表示フィードバック

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

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

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 アドレス] フィールドで次の操作を行います。
1. プルダウンで [IP アドレスを作成] をクリックします。
2. [新しい静的 IP アドレスの予約] ポップアップで、IP アドレスの名前として「example-ip」を入力します。
3. [予約] をクリックします。
[ポート] で [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

推奨: 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 で作成したリソースをクリーンアップして、今後料金が発生しないようにします。次のセクションで、リソースを削除または無効にする方法を説明します。

プロジェクトの削除

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

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

注意: プロジェクトを削除すると、次のような影響があります。

プロジェクト内のすべてのものが削除されます。このチュートリアルで既存のプロジェクトを使用した場合、それを削除すると、そのプロジェクトで行った他の作業もすべて削除されます。
カスタムプロジェクト ID が失われます。このプロジェクトを作成したときに、将来使用するカスタムプロジェクト ID を作成した可能性があります。そのプロジェクト ID を使用した URL（たとえば、appspot.com）を保持するには、プロジェクト全体ではなくプロジェクト内の選択したリソースだけを削除します。

複数のチュートリアルとクイックスタートを検討する予定がある場合は、プロジェクトを再利用すると、プロジェクトの割り当て制限を超えないようにすることができます。

Cloud Console で [リソースの管理] ページに移動します。
[リソースの管理] ページに移動
プロジェクトリストで、削除するプロジェクトを選択し、[削除] をクリックします。
ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。

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

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

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

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

目標

料金

始める前に

バケットの作成

Console

gsutil

コードサンプル

C++

C#

Go

Java

Node.js

PHP

Python

Ruby

REST API

JSON API

XML API

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

Console

gsutil

コードサンプル

C++

C#

Go

Java

Node.js

PHP

Python

Ruby

REST API

JSON API

XML API

ファイルの共有

Console

gsutil

コードサンプル

C++

Java

REST API

JSON API

XML API

推奨: 特殊ページの割り当て

Console

gsutil

コードサンプル

C++

Java

REST API

JSON API

XML API

ロードバランサと SSL 証明書を設定する

バックエンドを構成する

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

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

構成の確認

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

推奨: SSL 証明書のステータスのモニタリング

Console

gcloud

ウェブサイトのテスト

クリーンアップ

プロジェクトの削除

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

次のステップ