読み込んでいます...
一致する結果は見つかりませんでした。
700 以上のラボとコースにアクセス

Developer Essentials: Google Cloud Storage Static Website Hosting

ラボ 30分 universal_currency_alt クレジット: 1 show_chart 入門
info このラボでは、学習をサポートする AI ツールが組み込まれている場合があります。
700 以上のラボとコースにアクセス

gem-cloud-storage-host-static-site

Google Cloud self-paced labs logo

Activate Cloud Shell

Cloud Shell is a virtual machine that is loaded with development tools. It offers a persistent 5GB home directory and runs on the Google Cloud. Cloud Shell provides command-line access to your Google Cloud resources.

  1. Click Activate Cloud Shell Activate Cloud Shell icon at the top of the Google Cloud console.

When you are connected, you are already authenticated, and the project is set to your PROJECT_ID. The output contains a line that declares the PROJECT_ID for this session:

Your Cloud Platform project in this session is set to YOUR_PROJECT_ID

gcloud is the command-line tool for Google Cloud. It comes pre-installed on Cloud Shell and supports tab-completion.

  1. (Optional) You can list the active account name with this command:
gcloud auth list

  1. Click Authorize.

  2. Your output should now look like this:

Output:

ACTIVE: * ACCOUNT: student-01-xxxxxxxxxxxx@qwiklabs.net To set the active account, run: $ gcloud config set account `ACCOUNT`
  1. (Optional) You can list the project ID with this command:
gcloud config list project

Output:

[core] project = <project_ID>

Example output:

[core] project = qwiklabs-gcp-44776a13dea667a6 Note: For full documentation of gcloud, in Google Cloud, refer to the gcloud CLI overview guide.

Overview

This lab guides you through hosting a static website using Google Cloud Storage (GCS). You'll create a GCS bucket, upload website files, configure the bucket for website hosting, and use Artifact Registry to manage container images. This lab assumes basic familiarity with Google Cloud and command-line operations.

Task 1. Create a Google Cloud Storage Bucket

Create a GCS bucket to store your website's files.

  1. Set your Project ID.
gcloud config set project {{{ project_0.project_id | "PROJECT_ID" }}} Note:
Sets the active project in the Cloud SDK.
  1. Create a GCS bucket.
gcloud storage buckets create gs://{{{ project_0.project_id | "PROJECT_ID" }}}-website --uniform-bucket-level-access Note:
Creates a new GCS bucket with uniform bucket-level access enabled.

Task 2. Upload Website Files

Upload your website's HTML, CSS, JavaScript, and image files to the GCS bucket.

  1. Create a simple index.html file.
<html> <head> <title>My Static Website</title> </head> <body> <p>Hello from Google Cloud Storage!</p> </body> </html> Note:
Creates a basic HTML file.
  1. Upload the index.html file to your bucket.
gcloud storage cp index.html gs://{{{ project_0.project_id | "PROJECT_ID" }}}-website Note:
Copies the index.html file to the GCS bucket.

Task 3. Configure Bucket for Website Hosting

Configure the GCS bucket to serve your static website.

  1. Enable website configuration on the bucket.
gcloud storage buckets update gs://{{{ project_0.project_id | "PROJECT_ID" }}}-website --web-main-suffix=index.html Note:
Sets index.html as the default index page for the bucket.
  1. Make the bucket objects publicly readable.
gcloud storage buckets add-iam-policy-binding gs://{{{ project_0.project_id | "PROJECT_ID" }}}-website --member=allUsers --role=roles/storage.objectViewer Note:
Grants public read access to objects in the bucket.

Task 4. Access Your Website

Access your hosted static website via the GCS bucket's URL.

  1. Get the public URL of your website.
echo "https://storage.googleapis.com/{{{ project_0.project_id | "PROJECT_ID" }}}-website/index.html" Note:
Prints the URL to access your website.
  1. Open the URL in your browser to view your website.
Open the URL in your browser to view your website. Note:
This is not a command, just a text reminder to the user.

Task 5. Clean Up

Clean up resources to prevent unintended charges

  1. Remove the bucket.
gcloud storage rm -r gs://{{{ project_0.project_id | "PROJECT_ID" }}}-website Note:
Deletes the GCS bucket.

Congratulations!

You have successfully hosted a static website on Google Cloud Storage. You created a GCS bucket, uploaded your website files, configured the bucket for website hosting, and accessed your live website. This is a cost-effective and scalable solution for hosting static content.

Additional Resources

Manual Last Updated Jun 27, 2025

Lab Last Tested Jun 27, 2025

始める前に

  1. ラボでは、Google Cloud プロジェクトとリソースを一定の時間利用します
  2. ラボには時間制限があり、一時停止機能はありません。ラボを終了した場合は、最初からやり直す必要があります。
  3. 画面左上の [ラボを開始] をクリックして開始します

シークレット ブラウジングを使用する

  1. ラボで使用するユーザー名とパスワードをコピーします
  2. プライベート モードで [コンソールを開く] をクリックします

コンソールにログインする

    ラボの認証情報を使用して
  1. ログインします。他の認証情報を使用すると、エラーが発生したり、料金が発生したりする可能性があります。
  2. 利用規約に同意し、再設定用のリソースページをスキップします
  3. ラボを終了する場合や最初からやり直す場合を除き、[ラボを終了] はクリックしないでください。クリックすると、作業内容がクリアされ、プロジェクトが削除されます

このコンテンツは現在ご利用いただけません

利用可能になりましたら、メールでお知らせいたします

ありがとうございます。

利用可能になりましたら、メールでご連絡いたします

1 回に 1 つのラボ

既存のラボをすべて終了して、このラボを開始することを確認してください

シークレット ブラウジングを使用してラボを実行する

このラボの実行には、シークレット モードまたはシークレット ブラウジング ウィンドウを使用してください。これにより、個人アカウントと受講者アカウントの競合を防ぎ、個人アカウントに追加料金が発生することを防ぎます。