로드 중...
검색 결과가 없습니다.
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개만 가능

모든 기존 실습을 종료하고 이 실습을 시작할지 확인하세요.

시크릿 브라우징을 사용하여 실습 실행하기

이 실습을 실행하려면 시크릿 모드 또는 시크릿 브라우저 창을 사용하세요. 개인 계정과 학생 계정 간의 충돌로 개인 계정에 추가 요금이 발생하는 일을 방지해 줍니다.