Tutorial ini menjelaskan cara mengonfigurasi bucket Cloud Storage untuk menghosting situs statis pada domain yang Anda miliki. Halaman web statis dapat berisi teknologi sisi klien seperti HTML, CSS, dan JavaScript. Halaman tersebut tidak boleh berisi konten dinamis, seperti skrip sisi server seperti PHP.
Tutorial ini menunjukkan cara menayangkan konten melalui HTTP. Untuk tutorial yang menggunakan HTTPS, lihat Menghosting situs statis.
Untuk mengetahui contoh dan tips tentang halaman web statis, termasuk cara menghosting aset statis untuk situs dinamis, lihat halaman Situs Statis.
Tujuan
Dalam tutorial ini, Anda akan:- Mengarahkan domain ke Cloud Storage menggunakan data
CNAME. - Membuat bucket yang ditautkan ke domain Anda.
- Mengupload dan berbagi file di situs Anda.
- Menguji situs.
Biaya
Tutorial ini menggunakan komponen Google Cloudyang dapat ditagih berikut:
- Cloud Storage
Lihat Memantau tips biaya layanan penyimpanan untuk mengetahui detail tentang biaya yang dapat dikenakan saat menghosting situs statis, dan lihat halaman Harga untuk mengetahui detail tentang biaya layanan Cloud Storage.
Sebelum memulai
- Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
Roles required to select or create a project
- Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
-
Create a project: To create a project, you need the Project Creator role
(
roles/resourcemanager.projectCreator), which contains theresourcemanager.projects.createpermission. Learn how to grant roles.
-
Verify that billing is enabled for your Google Cloud project.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
Roles required to select or create a project
- Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
-
Create a project: To create a project, you need the Project Creator role
(
roles/resourcemanager.projectCreator), which contains theresourcemanager.projects.createpermission. Learn how to grant roles.
-
Verify that billing is enabled for your Google Cloud project.
- Siapkan domain yang Anda miliki atau kelola. Jika Anda belum memiliki domain, ada banyak layanan yang dapat Anda gunakan untuk mendaftarkan domain baru, seperti Cloud Domains.
Tutorial ini menggunakan domain
example.com. - Verifikasi bahwa
Anda memiliki atau mengelola domain yang akan digunakan. Pastikan Anda
memverifikasi domain level teratas, seperti
example.com, dan bukan subdomain, sepertiwww.example.com.Catatan: Jika memiliki domain yang ingin dikaitkan ke bucket, Anda mungkin telah melakukan langkah ini sebelumnya. Jika Anda membeli domain melalui Cloud Domains, verifikasi akan otomatis dilakukan.
Menghubungkan domain Anda ke Cloud Storage
Untuk menghubungkan domain ke Cloud Storage, buat data CNAME
melalui layanan pendaftaran domain. Data CNAME adalah jenis data
DNS. Data ini akan mengarahkan traffic yang meminta URL dari domain Anda ke resource
yang ingin Anda tayangkan, dalam hal ini objek di bucket Cloud Storage Anda.
Untuk www.example.com, data CNAME mungkin berisi informasi
berikut:
NAME TYPE DATA www CNAME c.storage.googleapis.com.
Untuk mengetahui informasi pengalihan CNAME lebih lanjut, lihat URI untuk pembuatan alias CNAME.
Untuk menghubungkan domain Anda ke Cloud Storage:
Buat data
CNAMEyang mengarah kec.storage.googleapis.com..Layanan pendaftaran domain akan menyediakan cara bagi Anda untuk mengelola domain, termasuk cara menambahkan data
CNAME. Misalnya, jika Anda menggunakan Cloud DNS, petunjuk cara menambahkan data resource dapat ditemukan di halaman Menambahkan, mengubah, dan menghapus data.
Membuat bucket
Buat bucket yang namanya cocok dengan CNAME yang dibuat untuk domain Anda.
Misalnya, jika Anda menambahkan data CNAME yang mengarah dari subdomain www pada
example.com ke c.storage.googleapis.com., perintah Google Cloud CLI untuk membuat
bucket dengan nama www.example.com akan terlihat mirip dengan berikut ini:
gcloud storage buckets create gs://www.example.com --location=US
Untuk mengetahui petunjuk lengkap tentang cara membuat bucket dengan berbagai alat, lihat Membuat bucket.
Mengupload file di situs Anda
Untuk menambahkan file yang ingin Anda tayangkan pada situs ke bucket:
Konsol
- Di konsol Google Cloud , buka halaman Bucket Cloud Storage.
Pada daftar bucket, klik nama bucket yang Anda buat.
Klik tombol Upload file di tab Objek.
Pada dialog file, cari file yang diinginkan dan pilih file tersebut.
Setelah upload selesai, Anda akan melihat nama file beserta informasi file yang ditampilkan di bucket.
Command line
Gunakan perintah gcloud storage cp untuk menyalin file ke bucket Anda.
Misalnya, untuk menyalin file index.html dari lokasinya saat ini
Desktop:
gcloud storage cp Desktop/index.html gs://www.example.com
Jika berhasil, responsnya akan terlihat seperti contoh berikut:
Completed files 1/1 | 164.3kiB/164.3kiB
Library klien
C++
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage C++ API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
C#
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage C# API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
Go
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage Go API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
Java
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage Java API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
Contoh berikut menunjukkan proses upload objek individual:
Contoh berikut menunjukkan proses upload beberapa objek secara bersamaan:
Contoh berikut menunjukkan proses upload semua objek dengan awalan umum secara bersamaan:
Node.js
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage Node.js API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
Contoh berikut menunjukkan proses upload objek individual:
Contoh berikut menunjukkan proses upload beberapa objek secara bersamaan:
Contoh berikut menunjukkan proses upload semua objek dengan awalan umum secara bersamaan:
PHP
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage PHP API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
Python
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage Python API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
Contoh berikut menunjukkan proses upload objek individual:
Contoh berikut menunjukkan proses upload beberapa objek secara bersamaan:
Contoh berikut menunjukkan proses upload semua objek dengan awalan umum secara bersamaan:
Ruby
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage Ruby API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
REST API
JSON API
Instal dan lakukan inisialisasigcloud CLI, yang memungkinkan Anda membuat token akses untuk header
Authorization.Gunakan
cURLuntuk memanggil JSON API dengan permintaanPOSTObject. Untuk halaman indeks www.example.com:curl -X POST --data-binary @index.html \ -H "Content-Type: text/html" \ -H "Authorization: $(gcloud auth print-access-token)" \ "https://storage.googleapis.com/upload/storage/v1/b/www.example.com/o?uploadType=media&name=index.html"
XML API
Instal dan lakukan inisialisasigcloud CLI, yang memungkinkan Anda membuat token akses untuk header
Authorization.Gunakan
cURLuntuk memanggil XML API dengan permintaanPUTObject. Untuk halaman indeks www.example.com:curl -X PUT --data-binary @index.html \ -H "Authorization: $(gcloud auth print-access-token)" \ -H "Content-Type: text/html" \ "https://storage.googleapis.com/www.example.com/index.html"
Membagikan file
Agar semua objek dalam bucket dapat dibaca oleh semua orang di internet publik:
Konsol
- Di konsol Google Cloud , buka halaman Bucket Cloud Storage.
Dalam daftar bucket, klik nama bucket yang ingin Anda tampilkan kepada publik.
Pilih tab Permissions di dekat bagian atas halaman.
Jika panel Akses publik menampilkan status Pribadi, klik tombol berlabel Hapus pencegahan akses publik. Kemudian, klik Konfirmasi pada dialog yang muncul.
Klik tombol add_box Berikan akses.
Kotak dialog Add principals akan muncul.
Di kolom New principals, masukkan
allUsers.Pada menu drop-down Pilih suatu peran, pilih sub-menu Cloud Storage, lalu klik opsi Storage Object Viewer.
Klik Save.
Klik Allow public access.
Setelah dipublikasikan, ikon link akan muncul untuk setiap objek di kolom akses publik. Anda dapat mengklik ikon ini untuk mendapatkan URL objek.
Command line
Gunakan perintah buckets add-iam-policy-binding:
gcloud storage buckets add-iam-policy-binding gs://www.example.com --member=allUsers --role=roles/storage.objectViewer
Library klien
C++
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage C++ API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
C#
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage C# API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
Go
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage Go API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
Java
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage Java API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
Node.js
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage Node.js API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
PHP
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage PHP API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
Python
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage Python API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
Ruby
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage Ruby API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
REST API
JSON API
Instal dan lakukan inisialisasigcloud CLI, yang memungkinkan Anda membuat token akses untuk header
Authorization.Buat file JSON yang berisi informasi berikut:
{ "bindings":[ { "role": "roles/storage.objectViewer", "members":["allUsers"] } ] }
Gunakan
cURLuntuk memanggil JSON API dengan permintaan BucketPUT:curl -X PUT --data-binary @JSON_FILE_NAME \ -H "Authorization: Bearer $(gcloud auth print-access-token)" \ -H "Content-Type: application/json" \ "https://storage.googleapis.com/storage/v1/b/BUCKET_NAME/iam"
Dengan keterangan:
JSON_FILE_NAMEadalah jalur untuk file JSON yang Anda buat di Langkah 2.BUCKET_NAMEadalah nama bucket dengan objek yang ingin Anda tampilkan kepada publik. Contoh,my-bucket.
XML API
Anda tidak bisa membuat agar semua objek dalam bucket dapat dibaca secara publik dengan
XML API. Gunakan konsol Google Cloud atau gcloud storage sebagai gantinya.
Jika diinginkan, Anda juga dapat membuat sebagian bucket Anda dapat diakses secara publik.
Pengunjung menerima kode respons http 403 setelah meminta URL untuk
file non-publik atau yang tidak ada. Lihat bagian berikutnya untuk mengetahui informasi tentang cara
menambahkan halaman error dengan kode respons http 404.
Direkomendasikan: Menetapkan halaman khusus
Anda dapat menetapkan akhiran halaman indeks, yang dikontrol dengan properti MainPageSuffix,
dan halaman error kustom, yang dikontrol dengan
properti NotFoundPage. Anda dapat memilih dari keduanya. Namun, tanpa halaman indeks, tidak ada
yang akan ditayangkan saat pengguna mengakses situs tingkat teratas Anda, misalnya,
http://www.example.com. Untuk mengetahui informasi selengkapnya, lihat Contoh konfigurasi situs.
Dalam contoh berikut, MainPageSuffix disetel ke index.html dan
NotFoundPage disetel ke 404.html:
Konsol
- Di konsol Google Cloud , buka halaman Bucket Cloud Storage.
Dalam daftar bucket, cari bucket yang Anda buat.
Klik menu Bucket overflow (more_vert) yang terkait dengan bucket, lalu pilih Edit konfigurasi situs.
Pada dialog konfigurasi situs, tentukan halaman utama dan halaman error.
Klik Simpan.
Command line
Gunakan perintah buckets update dengan flag --web-main-page-suffix
dan --web-error-page:
gcloud storage buckets update gs://www.example.com --web-main-page-suffix=index.html --web-error-page=404.html
Jika berhasil, perintah menampilkan:
Updating gs://www.example.com/... Completed 1
Library klien
C++
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage C++ API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
C#
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage C# API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
Go
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage Go API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
Java
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage Java API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
Node.js
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage Node.js API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
PHP
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage PHP API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
Python
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage Python API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
Ruby
Untuk mengetahui informasi selengkapnya, lihatDokumentasi referensi Cloud Storage Ruby API.
Untuk melakukan autentikasi ke Cloud Storage, siapkan Kredensial Default Aplikasi. Untuk mengetahui informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
REST API
JSON API
Instal dan lakukan inisialisasigcloud CLI, yang memungkinkan Anda membuat token akses untuk header
Authorization.Buat file JSON yang menetapkan properti
mainPageSuffixdannotFoundPagedi objekwebsiteke halaman yang diinginkan:{ "website":{ "mainPageSuffix": "index.html", "notFoundPage": "404.html" } }
Gunakan
cURLuntuk memanggil JSON API dengan permintaanPATCHBucket. Untuk www.example.com:curl -X PATCH --data-binary @web-config.json \ -H "Authorization: $(gcloud auth print-access-token)" \ -H "Content-Type: application/json" \ "https://storage.googleapis.com/storage/v1/b/www.example.com"
XML API
Instal dan lakukan inisialisasigcloud CLI, yang memungkinkan Anda membuat token akses untuk header
Authorization.Buat file XML yang menetapkan elemen
MainPageSuffixdanNotFoundPagediWebsiteConfigurationke halaman yang diinginkan:<WebsiteConfiguration> <MainPageSuffix>index.html</MainPageSuffix> <NotFoundPage>404.html</NotFoundPage> </WebsiteConfiguration>
Gunakan
cURLuntuk memanggil XML API dengan permintaanPUTBucket dan parameter string kueriwebsiteConfig. Untuk www.example.com:curl -X PUT --data-binary @web-config.xml \ -H "Authorization: $(gcloud auth print-access-token)" \ https://storage.googleapis.com/www.example.com?websiteConfig
Menguji situs
Pastikan konten ditayangkan dari bucket dengan meminta nama domain di
browser. Anda dapat melakukannya dengan jalur ke suatu objek, atau cukup dengan nama domain,
jika Anda menetapkan properti MainPageSuffix.
Misalnya, jika Anda memiliki objek bernama test.html yang disimpan dalam bucket bernama
www.example.com, pastikan objek tersebut dapat diakses dengan membuka
www.example.com/test.html di browser Anda.
Pembersihan
Setelah menyelesaikan tutorial, Anda dapat membersihkan resource yang dibuat agar tidak lagi menggunakan kuota dan menimbulkan tagihan. Bagian berikut menjelaskan cara menghapus atau menonaktifkan resource ini.
Menghapus project
Cara termudah untuk menghilangkan penagihan adalah dengan menghapus project yang Anda buat untuk tutorial.
Untuk menghapus project:
- In the Google Cloud console, go to the Manage resources page.
- In the project list, select the project that you want to delete, and then click Delete.
- In the dialog, type the project ID, and then click Shut down to delete the project.
Langkah berikutnya
- Lihat contoh dan tips cara menggunakan bucket untuk menghosting situs statis.
- Buka bagian pemecahan masalah dalam menghosting situs statis.
- Pelajari cara menghosting aset statis untuk situs dinamis.
- Pelajari semua opsi penayangan web.
- Coba Google Cloud solusi mulai cepat yang menggunakan Cloud Storage.