テクノロジー クラウドコンピューティング 非公開: Google Cloud Storage で静的ウェブサイトをホストするにはどうすればよいですか?

Google Cloud Storage で静的ウェブサイトをホストするにはどうすればよいですか?

低コストでパフォーマンスを向上させる ために、Google Cloud Storage で静的ウェブサイトをホストするためのステップバイステップ ガイド。

静的 Web サイト (HTML/CSS/JS/画像) をホストしている場合は、サイトの cPanel Web ホスティング プランの管理について心配する必要はありません。代わりに、 Google Cloud Storage (GCS) を使用することもできます。これにより 、より安価で、高速で、メンテナンスが容易になります

静的サイトは、個人、企業、情報ページ、またはトランザクションや動的コンテンツの生成が期待されないあらゆるページに適しています。サーバー側の処理やデータベース接続は必要ありません。

Google Cloud Storage で静的ウェブサイトをホストするにはどうすればよいですか?
Google Cloud Storage で静的ウェブサイトをホストするにはどうすればよいですか?

Google クラウド ストレージを選ぶ理由

より低コストでより優れたパフォーマンスを発揮します。

月額 1 ドル 未満で、高可用性を実現するためにマルチリージョンで 10 GB のサイトをホストできます。

マルチリージョンのストレージ クラスでコンテンツをホストすることを選択できます。つまり、高可用性のために 2 つのリージョンのデータ センターでデータを利用できます。

Google は、コンテンツを高速に読み込むための 高性能 クラウド ストレージを、99.95% の可用性 SLA で世界中に提供しています。オブジェクトに 最低制限はなく 、使用した分だけ料金を支払います。

次の手順は、 15 分以内に Cloud Storage 上で静的ウェブサイトをホストするのに役立ちます。

前提条件

これは、ドメイン名が登録されており、 Google Cloud でアカウントが作成されていることを前提としています。

このデモンストレーションでは、lab..com を使用します。

はじめましょうか…

ドメインの所有権を確認する

まず、URL を「 Search Console 」に追加して、ドメインの所有者であることを確認する必要があります。

ストレージバケットの作成

Google ストレージにバケットを作成する方法ステップ 1
Google ストレージにバケットを作成する方法ステップ 1
  • Cloud Storage にログインし、「バケットの作成」をクリックします。
  • バケット名 を入力します (重要なヒント: ドメイン名をストレージにポイントしたい場合は、バケット名をドメイン名として指定する必要があります)
  • ストレージ クラス を選択します (高パフォーマンスと可用性を実現するためにマルチリージョンのままにします)
  • 米国、EU、アジアから場所を選択してください (視聴者に最も近い場所を選択してください)
  • デフォルトのストレージ クラスとして標準を選択します
  • 均一なアクセス制御を選択します
  • 詳細オプションで Google が管理するキー を選択したままにしておきます。
  • 「作成」をクリックします

注: ドメインが検証されていない 場合は、次のようなエラーが表示されます。

警告ドメイン検証
警告ドメイン検証

したがって、バケット名に入力したドメイン名が 検証され ていることを確認する必要があります。

バケットが作成されると、リストにバケットが表示されます。

ストレージバケットの構成

インターネット経由でサイトにアクセスできるようにバケットを設定する必要があります。

  • リストからバケットを選択します
  • 右側の設定アイコンをクリック >>バケット権限の編集
  • 右側にアクセス許可のプロパティが開くので、「メンバーの追加」をクリックします
  • 「New Members」フィールドに「allUsers」と入力し、「Storage Object Viewer」のロールを選択します。
  • 設定を保存し、パブリック アクセスを許可します。

インデックスとエラーページを設定しましょう。

  • 設定アイコンを再度クリック >> Web サイト設定を編集
  • インデックスと 404 ページを入力します (ほとんどの場合、インデックス ページはindex.html と 404.html になります)。
gcs-ウェブサイト構成
gcs-ウェブサイト構成
  • 設定を保存する

静的 Web サイトのアップロード

サイトをクラウド ストレージにアップロードします。静的ウェブサイトには Designmodo の Slides を 使用しています。

  • 新しく作成したバケットをクリックします。
  • 「フォルダーをアップロード/ファイルをアップロード」をクリックし、アップロードする Web サイトのファイルを選択します。
  • Index.html がバケット ルートに存在することを確認します。

ファイルサイズによっては、時間がかかる場合があります。

CNAMEレコードを更新する

最後に、CNAME レコードを使用してドメインが Google Cloud Storage を指すようにする必要があります。

Domain Registrar のコントロール パネルにログインし、CNAME をドメインの c.storage.googleapis.com に更新します。 DNS がグローバルに伝播されるまでには時間がかかる場合があります。DNS ルックアップ ツールを使用して結果を確認することもできます。

ドメイン CNAME が c.storage.googleapis.com に解決されたら、URL にアクセスして、期待どおりに動作することを確認できます。

静的サイト-gcs
静的サイト-gcs

ご覧のとおり、私の静的ウェブサイトは Google Cloud ストレージ上で稼働しています。

デフォルトでは、サイトは http:// で利用可能ですが、 https:// 使用してサイトを保護し、アクセスできるようにする必要がある場合は、GCS がホストするサイトで SSL を設定するためにこの投稿を書きました。

静的サイトをホストするための GCS の代替手段は何ですか?

いくつかのオプションがあります。

これらの静的ホスティング プラットフォームをオプションとして選択することも、セルフホスト型オブジェクト ストレージ ソリューションである MinIO を使用することもできます。

上記の内容から、Cloud Storage 上で静的ウェブサイトを低コストでホストすることがいかに簡単であるかが理解していただければ幸いです。

「 Google Cloud Storage で静的ウェブサイトをホストするにはどうすればよいですか?」についてわかりやすく解説!絶対に観るべきベスト2動画

How is Static Web Hosting on Google Cloud Storage
Host a Static Website in Google Cloud Storage | Free web hosting

低コストでパフォーマンスを向上させる ために、Google Cloud Storage で静的ウェブサイトをホストするためのステップバイステップ ガイド。

静的 Web サイト (HTML/CSS/JS/画像) をホストしている場合は、サイトの cPanel Web ホスティング プランの管理について心配する必要はありません。代わりに、 Google Cloud Storage (GCS) を使用することもできます。これにより 、より安価で、高速で、メンテナンスが容易になります

静的サイトは、個人、企業、情報ページ、またはトランザクションや動的コンテンツの生成が期待されないあらゆるページに適しています。サーバー側の処理やデータベース接続は必要ありません。

Google Cloud Storage で静的ウェブサイトをホストするにはどうすればよいですか?
Google Cloud Storage で静的ウェブサイトをホストするにはどうすればよいですか?

Google クラウド ストレージを選ぶ理由

より低コストでより優れたパフォーマンスを発揮します。

月額 1 ドル 未満で、高可用性を実現するためにマルチリージョンで 10 GB のサイトをホストできます。

マルチリージョンのストレージ クラスでコンテンツをホストすることを選択できます。つまり、高可用性のために 2 つのリージョンのデータ センターでデータを利用できます。

Google は、コンテンツを高速に読み込むための 高性能 クラウド ストレージを、99.95% の可用性 SLA で世界中に提供しています。オブジェクトに 最低制限はなく 、使用した分だけ料金を支払います。

次の手順は、 15 分以内に Cloud Storage 上で静的ウェブサイトをホストするのに役立ちます。

前提条件

これは、ドメイン名が登録されており、 Google Cloud でアカウントが作成されていることを前提としています。

このデモンストレーションでは、lab..com を使用します。

はじめましょうか…

ドメインの所有権を確認する

まず、URL を「 Search Console 」に追加して、ドメインの所有者であることを確認する必要があります。

ストレージバケットの作成

Google ストレージにバケットを作成する方法ステップ 1
Google ストレージにバケットを作成する方法ステップ 1
  • Cloud Storage にログインし、「バケットの作成」をクリックします。
  • バケット名 を入力します (重要なヒント: ドメイン名をストレージにポイントしたい場合は、バケット名をドメイン名として指定する必要があります)
  • ストレージ クラス を選択します (高パフォーマンスと可用性を実現するためにマルチリージョンのままにします)
  • 米国、EU、アジアから場所を選択してください (視聴者に最も近い場所を選択してください)
  • デフォルトのストレージ クラスとして標準を選択します
  • 均一なアクセス制御を選択します
  • 詳細オプションで Google が管理するキー を選択したままにしておきます。
  • 「作成」をクリックします

注: ドメインが検証されていない 場合は、次のようなエラーが表示されます。

警告ドメイン検証
警告ドメイン検証

したがって、バケット名に入力したドメイン名が 検証され ていることを確認する必要があります。

バケットが作成されると、リストにバケットが表示されます。

ストレージバケットの構成

インターネット経由でサイトにアクセスできるようにバケットを設定する必要があります。

  • リストからバケットを選択します
  • 右側の設定アイコンをクリック >>バケット権限の編集
  • 右側にアクセス許可のプロパティが開くので、「メンバーの追加」をクリックします
  • 「New Members」フィールドに「allUsers」と入力し、「Storage Object Viewer」のロールを選択します。
  • 設定を保存し、パブリック アクセスを許可します。

インデックスとエラーページを設定しましょう。

  • 設定アイコンを再度クリック >> Web サイト設定を編集
  • インデックスと 404 ページを入力します (ほとんどの場合、インデックス ページはindex.html と 404.html になります)。
gcs-ウェブサイト構成
gcs-ウェブサイト構成
  • 設定を保存する

静的 Web サイトのアップロード

サイトをクラウド ストレージにアップロードします。静的ウェブサイトには Designmodo の Slides を 使用しています。

  • 新しく作成したバケットをクリックします。
  • 「フォルダーをアップロード/ファイルをアップロード」をクリックし、アップロードする Web サイトのファイルを選択します。
  • Index.html がバケット ルートに存在することを確認します。

ファイルサイズによっては、時間がかかる場合があります。

CNAMEレコードを更新する

最後に、CNAME レコードを使用してドメインが Google Cloud Storage を指すようにする必要があります。

Domain Registrar のコントロール パネルにログインし、CNAME をドメインの c.storage.googleapis.com に更新します。 DNS がグローバルに伝播されるまでには時間がかかる場合があります。DNS ルックアップ ツールを使用して結果を確認することもできます。

ドメイン CNAME が c.storage.googleapis.com に解決されたら、URL にアクセスして、期待どおりに動作することを確認できます。

静的サイト-gcs
静的サイト-gcs

ご覧のとおり、私の静的ウェブサイトは Google Cloud ストレージ上で稼働しています。

デフォルトでは、サイトは http:// で利用可能ですが、 https:// 使用してサイトを保護し、アクセスできるようにする必要がある場合は、GCS がホストするサイトで SSL を設定するためにこの投稿を書きました。

静的サイトをホストするための GCS の代替手段は何ですか?

いくつかのオプションがあります。

これらの静的ホスティング プラットフォームをオプションとして選択することも、セルフホスト型オブジェクト ストレージ ソリューションである MinIO を使用することもできます。

上記の内容から、Cloud Storage 上で静的ウェブサイトを低コストでホストすることがいかに簡単であるかが理解していただければ幸いです。

「 Google Cloud Storage で静的ウェブサイトをホストするにはどうすればよいですか?」についてわかりやすく解説!絶対に観るべきベスト2動画

How is Static Web Hosting on Google Cloud Storage
Host a Static Website in Google Cloud Storage | Free web hosting