正在加载…
未找到任何结果。
访问 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. 除非您已完成此实验或想要重新开始，否则请勿点击结束实验，因为点击后系统会清除您的工作并移除该项目

此内容目前不可用

一旦可用，我们会通过电子邮件告知您

太好了！

一旦可用，我们会通过电子邮件告知您

一次一个实验

确认结束所有现有实验并开始此实验

使用无痕浏览模式运行实验

请使用无痕模式或无痕式浏览器窗口运行此实验。这可以避免您的个人账号与学生账号之间发生冲突，这种冲突可能导致您的个人账号产生额外费用。