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 Cloud yang 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.
-
Di konsol Google Cloud, pada halaman pemilih project, pilih atau buat project Google Cloud.
-
Make sure that billing is enabled for your Google Cloud project.
-
Di konsol Google Cloud, pada halaman pemilih project, pilih atau buat project Google Cloud.
-
Make sure 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 dilakukan secara otomatis.
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
CNAME
yang 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:
gcloud storage buckets create gs://www.example.com --location=US
Untuk 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 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 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 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 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 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 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 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 informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
REST API
JSON API
Menginstal dan melakukan inisialisasi gcloud CLI , yang memungkinkan Anda membuat token akses untuk header
Authorization
.Gunakan
cURL
untuk memanggil JSON API dengan permintaan ObjekPOST
. 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
Menginstal dan melakukan inisialisasi gcloud CLI , yang memungkinkan Anda membuat token akses untuk header
Authorization
.Gunakan
cURL
untuk memanggil XML API dengan permintaan ObjekPUT
. 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 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 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 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 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 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 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 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 informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
REST API
JSON API
Menginstal dan melakukan inisialisasi gcloud 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
cURL
untuk 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_NAME
adalah jalur untuk file JSON yang Anda buat di Langkah 2.BUCKET_NAME
adalah 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
.
Jika ingin, Anda juga dapat membuat sebagian bucket 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 website configuration.
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 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 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 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 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 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 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 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 informasi selengkapnya, lihat Menyiapkan autentikasi untuk library klien.
REST API
JSON API
Menginstal dan melakukan inisialisasi gcloud CLI , yang memungkinkan Anda membuat token akses untuk header
Authorization
.Buat file JSON yang menetapkan properti
mainPageSuffix
dannotFoundPage
di objekwebsite
ke halaman yang diinginkan:{ "website":{ "mainPageSuffix": "index.html", "notFoundPage": "404.html" } }
Gunakan
cURL
untuk memanggil JSON API dengan permintaan BucketPATCH
. 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
Menginstal dan melakukan inisialisasi gcloud CLI , yang memungkinkan Anda membuat token akses untuk header
Authorization
.Buat file XML yang menetapkan elemen
MainPageSuffix
danNotFoundPage
diWebsiteConfiguration
ke halaman yang diinginkan:<WebsiteConfiguration> <MainPageSuffix>index.html</MainPageSuffix> <NotFoundPage>404.html</NotFoundPage> </WebsiteConfiguration>
Gunakan
cURL
untuk memanggil XML API dengan permintaan BucketPUT
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 resource tersebut berhenti menggunakan kuota dan dikenai biaya. 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:
- Di konsol Google Cloud, buka halaman Manage resource.
- Pada daftar project, pilih project yang ingin Anda hapus, lalu klik Delete.
- Pada dialog, ketik project ID, lalu klik Shut down untuk menghapus project.