Object Storage Service:Static Website Hosting

Langkah 1: Mengonfigurasi hosting situs web statis

Konfigurasikan halaman utama default dan halaman error untuk menetapkan aturan akses dasar. Hal ini memastikan pengguna dapat menjelajahi situs Anda dan menerima pesan error yang membantu saat terjadi kesalahan.

1. Buka halaman Buckets, klik nama bucket target, lalu di panel navigasi kiri, klik Data Management > Static Page.

2. Klik Settings dan konfigurasikan parameter berikut:

   • Default Homepage: Atur menjadi index.html.

   • Subfolder Homepage: Pilih apakah akan mengaktifkan halaman utama terpisah untuk subfolder sesuai dengan struktur website Anda.

     • Disabled (Default): Cocok untuk website sederhana yang tidak memerlukan halaman utama terpisah untuk subfolder. Dengan opsi ini, setiap path URL yang diakhiri garis miring (/) akan mengembalikan halaman utama default dari direktori root.

     • Enabled: Cocok untuk website kompleks dengan beberapa bagian konten independen, seperti /blog/ atau /docs/, di mana setiap bagian memiliki halaman utamanya sendiri. Saat diaktifkan, Anda juga harus mengonfigurasi Subfolder 404 Rule untuk menentukan cara sistem merespons permintaan file yang tidak ada:

       • Redirect (Default): Mengarahkan ke URL direktori. Jika file yang diminta tidak ada, sistem akan memeriksa keberadaan halaman utama di direktori yang sesuai. Jika ditemukan, sistem mengembalikan respons redirect 302, dan bilah alamat browser diperbarui ke path direktori. Misalnya, .../subdir berubah menjadi .../subdir/.

       • Index: Mengembalikan konten halaman utama secara langsung. Mirip dengan Redirect, tetapi jika halaman utama ditemukan, sistem mengembalikan kontennya dengan kode status 200. Bilah alamat browser tidak berubah.

       • NoSuchKey: Mengembalikan error 404 secara langsung. Ini adalah aturan paling ketat. Jika file yang diminta tidak ada, sistem langsung mengembalikan error 404, terlepas dari apakah halaman utama ada di direktori yang sesuai.

         Aturan Subfolder 404

         Saat fitur halaman utama subfolder diaktifkan, aturan ini menentukan respons sistem terhadap permintaan objek yang tidak ada, sehingga rute website Anda ditangani dengan benar.

         Mekanisme inti: Permintaan objek vs. direktori

         Perilaku aturan ini bergantung pada struktur URL, khususnya apakah diakhiri garis miring (/):

         • Permintaan objek: URL tidak diakhiri /, misalnya .../subdir. Sistem menginterpretasikan ini sebagai permintaan objek bernama subdir.

         • Permintaan direktori: URL diakhiri /, misalnya .../subdir/. Sistem menginterpretasikan ini sebagai permintaan halaman utama default di direktori subdir.

         Aturan subfolder 404 hanya dipicu ketika permintaan objek gagal (yaitu, objek tersebut tidak ada).

         Perilaku aturan

         Tabel berikut menjelaskan perilaku setiap aturan saat permintaan dibuat untuk objek yang tidak ada, seperti http://example.com/subdir.

         Aturan	Perilaku inti	Alur pemrosesan	Hasil akhir (bergantung pada apakah subdir/index.html ada)
         Redirect (Default)	Mengarahkan ke URL direktori: Sistem memeriksa keberadaan halaman utama di direktori yang sesuai. Jika ditemukan, sistem mengembalikan respons redirect 302.	Objek subdir tidak ditemukan, sehingga memicu aturan. Sistem memeriksa apakah subdir/index.html ada. Jika ada, respons 302 Found dikembalikan dengan header Location yang mengarah ke .../subdir/. Jika tidak, respons 404 Not Found dikembalikan.	Jika ada: Konten halaman utama ditampilkan, dan bilah alamat browser diperbarui menjadi .../subdir/. Jika tidak ada: Halaman error 404 ditampilkan.
         Index	Mengembalikan konten halaman utama secara langsung: Sistem memeriksa keberadaan halaman utama di direktori yang sesuai. Jika ditemukan, sistem mengembalikan kontennya dengan kode status 200.	Objek subdir tidak ditemukan, sehingga memicu aturan. Sistem memeriksa apakah subdir/index.html ada. Jika ada, konten file dan status 200 OK dikembalikan. Jika tidak, respons 404 Not Found dikembalikan.	Jika ada: Konten halaman utama ditampilkan, dan bilah alamat browser tetap .../subdir. Jika tidak ada: Halaman error 404 ditampilkan.
         NoSuchKey	Mengembalikan error 404 secara langsung: Sistem tidak melakukan pemeriksaan tambahan terhadap direktori atau halaman utama.	Objek subdir tidak ditemukan, sehingga memicu aturan. Respons 404 Not Found dikembalikan segera.	Tidak peduli apakah ada atau tidak: Selalu mengembalikan halaman error 404.

   • Default 404 Page: Atur menjadi error.html.

   • Error Page Status Code: Pilih 404.

3. Klik Save.

Langkah 2: Unggah file website

Unggah file HTML yang telah Anda siapkan ke bucket untuk menyediakan konten bagi website Anda.

1. Unduh dan ekstrak file contoh html.zip, atau gunakan file proyek Anda sendiri.

2. Di panel navigasi kiri, klik Object Management > Objects.

3. Seret file contoh atau file proyek Anda ke jendela unggah. Setelah file ditambahkan ke daftar, klik Upload Object.

Langkah 3: Atur izin bucket

Konfigurasikan izin baca publik agar konten website Anda dapat diakses oleh pengguna internet.

1. Fitur Block Public Access diaktifkan secara default saat Anda membuat bucket OSS. Fitur ini mencegah Anda mengatur daftar kontrol akses (ACL) bucket menjadi public-read atau public-read-write. Anda harus menonaktifkan fitur ini terlebih dahulu.

   1. Di panel navigasi kiri, klik Permission Control > Block Public Access.

   2. Klik tombol toggle Block Public Access. Di kotak dialog yang muncul, masukkan I confirm that I want to disable Block Public Access, lalu klik OK.

2. Atur izin akses bucket menjadi public-read.

   1. Buka tab Access Control List dan klik Set.

   2. Atur Bucket ACL menjadi Public Read. Di kotak dialog yang muncul, klik Continue.

   3. Klik Save.

Langkah 4: Verifikasi konfigurasi website

Uji website Anda untuk memastikan fitur static website hosting berfungsi dengan benar.

• Verifikasi akses halaman utama: Di browser, buka nama domain kustom Anda, misalnya, http://example.com, untuk melihat hasilnya.

  Jika halaman menampilkan halaman utama default untuk static website hosting OSS dengan judul Welcome to OSS dan subjudul This is a static homepage, serta memiliki tiga tombol (Product Details, Product Console, dan Product Documentation) di bagian bawah, konfigurasi static website hosting Anda berfungsi.

• Verifikasi halaman 404: Di browser, coba akses file yang tidak ada, misalnya, http://example.com/missing-object.

  Jika halaman menampilkan judul Welcome to OSS dan pesan This is a 404 page, halaman error 404 Anda dikonfigurasi dengan benar.

Langkah 1: Konfigurasikan hosting SPA

Konfigurasikan parameter hosting untuk mengoptimalkan fitur routing SPA dan memastikan routing sisi klien berfungsi dengan benar.

1. Buka halaman Buckets, klik nama bucket target, lalu di panel navigasi kiri, klik Data Management > Static Page.

2. Klik Settings dan konfigurasikan parameter berikut:

   • Default Homepage: Atur menjadi index.html.

   • Subfolder Homepage: Pilih Disabled. Dengan pengaturan ini, setiap permintaan ke domain website statis atau URL apa pun di bawah domain tersebut yang diakhiri garis miring (/) akan mengembalikan halaman utama default dari direktori root.

   • Default 404 Page: Atur menjadi index.html (konfigurasi kritis: mengarahkan semua rute ke titik masuk aplikasi).

   • Error Page Status Code: Pilih 200 (memastikan transisi rute mengembalikan kode status yang benar).

3. Klik Save.

Langkah 2: Unggah file aplikasi

Unggah file SPA yang telah Anda siapkan ke bucket untuk menyelesaikan penerapan aplikasi.

1. Unduh dan ekstrak aplikasi contoh demo.zip, atau gunakan file aplikasi Anda sendiri.

2. Di panel navigasi kiri, klik Object Management > Objects.

3. Seret semua file dari direktori demo atau file aplikasi Anda sendiri ke jendela unggah. Setelah semua file ditambahkan ke daftar, klik Upload Object.

Langkah 3: Atur izin bucket

Konfigurasikan izin akses publik agar SPA Anda dapat diakses oleh pengguna.

1. Nonaktifkan Block Public Access untuk bucket.

   1. Di panel navigasi kiri, klik Permission Control > Block Public Access.

   2. Klik tombol toggle Block Public Access. Di kotak dialog yang muncul, masukkan I confirm that I want to disable Block Public Access, lalu klik OK.

2. Atur izin akses bucket menjadi public-read.

   1. Buka tab Access Control List dan klik Set.

   2. Atur Bucket ACL menjadi Public Read. Di kotak dialog yang muncul, klik Continue.

   3. Klik Save.

Langkah 4: Verifikasi penerapan aplikasi

Uji website Anda untuk memastikan SPA berhasil diterapkan dan dapat menangani transisi rute.

• Verifikasi akses halaman utama: Di browser, buka nama domain kustom Anda (misalnya, http://example.com) untuk mengakses SPA. Hasilnya ditunjukkan pada gambar berikut.

  

• Verifikasi perilaku 404: Di browser, coba akses file yang tidak ada, misalnya, http://example.com/missing-object. Permintaan dialihkan ke titik masuk aplikasi, dan kode status 200 OK dikembalikan.

Praktik terbaik

• Transport aman: Aktifkan akses HTTPS

  Browser modern menampilkan peringatan "not secure" untuk website HTTP, dan mesin pencari memberikan peringkat SEO lebih tinggi untuk situs HTTPS. Anda harus menerapkan akses HTTPS untuk nama domain kustom Anda dengan mengikuti panduan akses OSS melalui HTTPS. Protokol HTTPS menggunakan TLS/SSL untuk mengenkripsi data dalam transmisi, yang mencegah pencurian atau perubahan data serta meningkatkan keamanan website dan kepercayaan pengguna.

• Optimasi kinerja: Konfigurasikan akselerasi CDN

  Jika website statis Anda melayani audiens global atau menerima trafik konkurensi tinggi, Anda dapat mengonfigurasi akselerasi CDN. Hal ini menyimpan cache konten Anda di node tepi di seluruh dunia, yang secara signifikan meningkatkan kecepatan akses dan mengurangi biaya trafik OSS Anda.

• Berbagi sumber daya lintas asal (CORS): Konfigurasikan aturan CORS

  Aplikasi halaman tunggal sering kali perlu memanggil API backend atau mengakses sumber daya pihak ketiga, yang dapat dibatasi oleh kebijakan asal sama browser. Dengan mengonfigurasi aturan Berbagi sumber daya lintas asal (CORS), Anda dapat menentukan origin, metode, dan header yang diizinkan untuk memastikan aplikasi Anda dapat mengakses layanan API dan sumber daya eksternal yang diperlukan.

• Manajemen versi: Terapkan rilis dan rollback

  Lingkungan produksi memerlukan kemampuan untuk merilis versi baru dengan cepat dan melakukan rollback darurat. Aktifkan fitur Pengendalian versi OSS dan integrasikan dengan alat otomatisasi seperti Jenkins untuk membuat alur kerja CI/CD lengkap. Hal ini meningkatkan efisiensi rilis dan stabilitas sistem.

Mitigasi risiko

• Pencegahan pencurian bandwidth: Konfigurasikan Perlindungan hotlink

  Saat website lain secara langsung menautkan ke sumber daya statis Anda, hal ini dapat menyebabkan biaya trafik tambahan dan beban server. Dengan mengonfigurasi Perlindungan hotlink berbasis Referer, Anda dapat membuat daftar putih domain yang diizinkan. Hal ini secara efektif mencegah website tidak sah menggunakan bandwidth Anda dan membantu mengendalikan biaya.

• Pemantauan akses: Aktifkan log akses

  Lingkungan produksi memerlukan catatan akses lengkap untuk audit keamanan, analisis kinerja, dan troubleshooting. Aktifkan kueri log waktu nyata untuk mencatat informasi detail untuk semua permintaan akses. Hal ini membantu Anda mengidentifikasi pola akses tidak biasa, menganalisis perilaku pengguna, dan mengoptimalkan kinerja website.

Error 404 saat menyegarkan halaman SPA

Dalam aplikasi halaman tunggal, semua rute ditangani oleh JavaScript sisi klien. Saat Anda mengakses langsung atau menyegarkan rute non-root, server tidak dapat menemukan file fisik yang sesuai. Untuk mengatasi hal ini, atur Default 404 Page menjadi index.html dan Error Page Status Code menjadi 200. Konfigurasi ini mengarahkan semua path "tidak ditemukan" ke titik masuk aplikasi, sehingga router sisi klien dapat menanganinya dengan benar.

Menonaktifkan hosting situs web statis

1. Buka halaman Buckets, klik nama bucket target, lalu di panel navigasi kiri, klik Data Management > Static Page.

2. Klik Settings, kosongkan pengaturan Default Homepage dan Default 404 Page, lalu klik Save untuk menonaktifkan fitur static website hosting.

Dukungan untuk konten dinamis

Static website hosting hanya mendukung file statis, seperti HTML, CSS, dan JavaScript. Fitur ini tidak mendukung bahasa dinamis sisi server seperti PHP, Python, atau Java. Jika Anda memerlukan fungsionalitas dinamis, Anda dapat menggunakan rendering sisi klien dengan framework frontend atau memanggil API backend menggunakan layanan arsitektur tanpa server seperti Function Compute.