Contoh dan tips situs statis

Halaman ini menunjukkan contoh dan tips dalam menggunakan bucket untuk menghosting situs statis.

Halaman khusus

Halaman indeks

Halaman indeks (juga disebut indeks direktori server web) adalah file yang ditampilkan ke pengunjung saat mereka meminta URL yang tidak memiliki file terkait. Saat Anda menetapkan properti MainPageSuffix, Cloud Storage mencari file dengan nama tersebut yang imbuhannya cocok dengan URL yang diminta pengunjung.

Misalnya, Anda menetapkan MainPageSuffix situs statis Anda ke index.html. Selain itu, misalnya Anda tidak memiliki file bernama directory di bucket www.example.com. Dalam situasi ini, jika pengguna meminta URL http://www.example.com/directory, Cloud Storage akan mencoba menyajikan file www.example.com/directory/index.html. Jika file tersebut juga tidak ada, Cloud Storage akan menampilkan halaman error.

MainPageSuffix juga mengontrol file yang disajikan saat pengguna meminta situs tingkat atas. Melanjutkan contoh di atas, jika pengguna meminta http://www.example.com, Cloud Storage akan mencoba menyajikan file www.example.com/index.html.

Saat mencoba mengakses URL dengan akhiran garis miring, seperti http://www.example.com/dir/, lihat Pemecahan masalah.

Halaman error

Halaman error adalah file yang ditampilkan ke pengunjung situs statis yang meminta URL yang tidak sesuai dengan file yang ada. Jika Anda telah menetapkan MainPageSuffix, Cloud Storage hanya akan menampilkan halaman error jika tidak ada file dengan nama yang diminta atau halaman indeks yang berlaku.

Saat menampilkan halaman error, kode respons http adalah 404. Properti yang mengontrol file mana yang bertindak sebagai halaman error adalah NotFoundPage. Jika Anda tidak menetapkan NotFoundPage, pengguna akan menerima halaman error umum.

Contoh konfigurasi situs

Bucket tiga objek

Misalkan bucket bernama www.example.com telah dikonfigurasi sebagai situs dengan setelan dan file berikut:

• MainPageSuffix = "index.html"
• NotFoundPage = "404.html"
• Bucket berisi tiga objek yang dibagikan secara publik: "index.html", "404.html", dan "dir/index.html".

Catatan: Mungkin ada objek kosong di http://www.example.com/dir/. Jika ada, objek kosong akan ditampilkan, bukan file index.html direktori. Lihat topik pemecahan masalah jika Anda mendapatkan respons HTTP 301 saat mencoba mengakses http://www.example.com/dir/.

Tabel berikut menunjukkan konten yang disajikan untuk URL yang dipilih:

URL yang Diminta	Konten yang Disajikan	Kode respons HTTP
http://www.example.com http://www.example.com/ http://www.example.com/index.html	Objek "index.html".	200
http://www.example.com/hello	Objek "404.html".	404
http://www.example.com/dir/index.html	Objek "dir/index.html".	200
http://www.example.com/dir	Objek "dir/index.html".	301
http://www.example.com/dir/	Objek "dir/index.html", dengan asumsi tidak ada objek nol byte untuk /dir/	200
	Objek kosong nol byte, jika ada untuk /dir/. Lihat topik Pemecahan masalah untuk menghapus objek nol byte ini.	301

Bucket dua objek

Misalkan bucket bernama www.example.com telah dikonfigurasi sebagai situs dengan setelan dan file berikut:

• MainPageSuffix = "main.html"
• NotFoundPage = "404.html"
• Bucket berisi dua objek yang dibagikan secara publik: "main.html" dan "404.html".

Tabel berikut menunjukkan konten yang disajikan untuk URL yang dipilih:

URL yang Diminta	Konten yang Disajikan	Kode respons HTTP
http://www.example.com http://www.example.com/	Objek "main.html".	200
http://www.example.com/index.html	Objek "404.html".	404

Jika sebuah objek dibagikan secara publik, Anda juga dapat melihat objek tersebut dengan URL:

http://storage.googleapis.com/BUCKET_NAME/OBJECT_NAME

Misalnya, URL untuk objek index.html adalah:

http://storage.googleapis.com/www.example.com/index.html

Untuk informasi selengkapnya tentang menggunakan data yang dapat diakses secara publik, lihat Mengakses Data Publik.

Tips untuk menangani bucket yang dikonfigurasi sebagai situs

Berikut beberapa tips yang perlu diingat saat menggunakan bucket untuk menghosting situs statis.

Menambahkan subdomain

Misalkan Anda juga ingin menyajikan konten di test.example.com, dari bucket yang berbeda dengan bucket yang menayangkan konten di www.example.com. Untuk melakukannya:

1. Buat bucket baru untuk menyajikan konten tambahan Anda.

2. Jika Anda mengikuti tutorial di Menghosting situs statis untuk menyajikan konten Anda melalui HTTPS, edit load balancer di Konsol Google Cloud sebagai berikut:

   1. Untuk Konfigurasi backend, buat bucket backend baru test-bucket dengan memilih bucket yang baru Anda buat.
   2. Untuk Aturan host dan jalur, tambahkan aturan baru sebagai berikut:

      Hosts                  Paths     Backends
      test.example.com       /*        test-bucket
      

   3. Untuk Konfigurasi frontend, tambahkan port dan IP Frontend baru dengan nilai yang sama seperti konfigurasi pertama, kecuali nilai berikut:

      • Untuk alamat IP, buat dan cadangkan alamat IP baru.
      • Untuk Sertifikat, buat sertifikat SSL baru untuk test.example.com.

3. Setelah memperbarui load balancer, tambahkan kumpulan data A baru ke layanan pendaftaran domain Anda menggunakan alamat IP konfigurasi frontend yang baru:

   NAME                  TYPE     DATA
   test                  A        IP_ADDRESS
   

Catatan: Jika Anda menyajikan tanpa load balancer dengan menggunakan pengalihan CNAME, nama bucket Anda harus cocok dengan subdomain test.example.com. Dalam skenario ini, karena Anda telah memverifikasi domain example.com, Anda dapat membuat bucket untuk mendukung subdomain tanpa verifikasi tambahan. Setelah Anda membuat bucket baru, tambahkan kumpulan data CNAME baru untuk subdomain:

NAME                  TYPE     DATA
test                  CNAME    c.storage.googleapis.com.

Perilaku API

Konfigurasi situs MainPageSuffix dan NotFoundPage hanya digunakan untuk permintaan yang masuk ke Cloud Storage melalui pengalihan CNAME atau A. Misalnya, permintaan ke www.example.com menunjukkan halaman indeks, tetapi permintaan yang setara ke storage.googleapis.com/www.example.com tidak.

Jadi, perilaku API untuk permintaan ke domain Cloud Storage, seperti storage.googleapis.com/www.example.com, dipertahankan. Misalnya, Anda dapat tetap mencantumkan objek di bucket www.example.com seperti yang Anda lakukan untuk bucket lainnya. Untuk bucket www.example.com, daftar objek yang Anda terima mencakup 404.html dan index.html.

Menghosting aset statis untuk situs dinamis

Anda dapat menggunakan Cloud Storage untuk menghosting aset statis pada situs dinamis yang dihosting, misalnya, di Google App Engine atau di Google Compute Engine. Beberapa manfaat menghosting aset statis, seperti gambar atau file JavaScript dalam bucket meliputi:

• Cloud Storage berperilaku seperti Jaringan Penayangan Konten (CDN) karena objek yang dapat dibaca secara publik disimpan dalam cache di jaringan Cloud Storage secara default.

• Biaya bandwidth untuk mengakses konten biasanya lebih murah dengan Cloud Storage.

• Beban di server web Anda berkurang saat menayangkan konten statis dari Cloud Storage.

Saat menghosting aset statis untuk situs dinamis, Anda tidak perlu membuat data DNS dan mengarahkan ke bucket atau load balancer seperti untuk situs statis. Misalnya, Anda dapat memiliki bucket bernama www_example_com_assets dengan aset yang sesuai dan dikonfigurasi untuk dibagikan secara publik, lalu mengakses aset tersebut menggunakan domain Cloud Storage. Misalkan Anda memiliki file JavaScript library.js di bucket www_example_com_assets yang dibagikan secara publik, maka Anda dapat mengaksesnya sebagai http://storage.googleapis.com/www_example_com_assets/library.js.

Menyetel parameter cache

Anda dapat mengontrol bagaimana atau apakah aset situs di-cache dengan mengonfigurasi metadata Cache-Control. Umumnya, cukup tetapkan metadata kontrol cache untuk objek yang dapat diakses semua pengguna anonim, yang merupakan persyaratan untuk setiap objek yang disajikan dari bucket Cloud Storage sebagai bagian dari situs statis.

Cloud Storage menerapkan setelan kontrol cache 3600 detik ke objek yang dapat diakses semua pengguna anonim, kecuali jika Anda menentukan setelan kontrol cache secara eksplisit. Baca Melihat dan Mengedit Metadata untuk mengetahui petunjuk cara menyetel metadata objek, seperti Cache-Control.

Anda juga dapat menggunakan Cloud CDN untuk menyimpan konten HTTP(S) eksternal yang di-load balanced ke dalam cache yang dekat dengan pengguna, yang biasanya mengurangi biaya penyajian. Untuk informasi selengkapnya, lihat Menyimpan ke dalam cache.

Memantau tagihan

Jika Anda menyajikan aset dari bucket yang dikonfigurasi sebagai situs statis atau menyajikan aset statis dari bucket untuk situs dinamis yang dihosting di luar Cloud Storage, Anda harus memantau tagihan untuk project yang berisi bucket tersebut. Penayangan konten menimbulkan biaya Cloud Storage untuk penyimpanan konten, penggunaan jaringan, dan operasi pengambilan. Untuk mengetahui detailnya, lihat halaman Harga Cloud Storage.

Anda juga dapat dikenai biaya jaringan jika menggunakan Load Balancer Aplikasi eksternal untuk menyiapkan HTTPS. Lihat Harga Jaringan untuk detail selengkapnya.

Contoh harga sederhana di halaman contoh harga dapat digunakan sebagai perkiraan untuk kasus penggunaan situs statis dengan traffic rendah. Namun, perlu diperhatikan bahwa contoh ini tidak memperhitungkan biaya terkait Load Balancer Aplikasi eksternal, yang sering kali menjadi biaya terbesar dalam hosting situs statis. Anda dapat menggunakan Kalkulator Harga untuk memperkirakan biaya berdasarkan proyeksi penggunaan.

Pengguna Google Cloud baru mungkin memenuhi syarat untuk uji coba gratis.

Jika saat ini Anda adalah pengguna Google Cloud, Anda dapat mendapatkan perincian biaya project di halaman penagihan.

Pemecahan masalah

Lihat Pemecahan masalah untuk masalah umum terkait penggunaan bucket yang dikonfigurasi untuk menyajikan konten situs statis.

Langkah selanjutnya

• Pelajari opsi penayangan web lainnya di Google Cloud.
• Coba tutorial Google Cloud lain yang menggunakan Cloud Storage.

Cobalah sendiri

Jika Anda baru menggunakan Google Cloud, buat akun untuk mengevaluasi performa Cloud Storage dalam skenario dunia nyata. Pelanggan baru mendapatkan kredit gratis senilai $300 untuk menjalankan, menguji, dan men-deploy workload.

Coba Cloud Storage gratis