Object Storage Service:Static Website Hosting

Step 1: Configure static website hosting

Konfigurasikan halaman utama default dan halaman error untuk menetapkan aturan akses dasar.

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

2. Klik Settings dan konfigurasikan parameter berikut:

   • Default Homepage: Atur ke index.html.

   • Subfolder Homepage: Pilih apakah akan mengaktifkan halaman utama terpisah untuk subfolder sesuai 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 dengan 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 menjadi 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.

         Subfolder 404 rule

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

         Core mechanism: Object vs. directory requests

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

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

         • Directory request: URL diakhiri dengan /, 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).

         Rule behavior

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

         Rule	Core behavior	Processing flow	Final result (depends on whether subdir/index.html exists)
         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 ini. 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 ini. 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 ini. Respons 404 Not Found dikembalikan segera.	Tidak peduli apakah ada atau tidak: Selalu mengembalikan halaman error 404.

   • Default 404 Page: Atur ke error.html.

   • Error Page Status Code: Pilih 404.

3. Klik Save.

Step 2: Upload website files

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

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

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

3. Tarik file contoh atau file proyek yang sudah ada ke jendela unggah. Setelah file ditambahkan ke daftar, klik Upload Object.

   Catatan

   Saat Anda memperbarui konten website, mengunggah objek dengan nama yang sama akan langsung menimpa objek yang ada. Anda tidak perlu menghapus objek lama terlebih dahulu. Penimpaan mengganti seluruh objek, dan konten sebelumnya tidak lagi disimpan. Jika versioning diaktifkan untuk bucket, penimpaan akan menyimpan versi sebelumnya yang dapat Anda gunakan untuk rollback. Jika versioning tidak diaktifkan, penimpaan tidak dapat dibatalkan.

Step 3: Set bucket permissions

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 sebelah kiri, klik Permission Control > Block Public Access.

   2. Klik 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 ke Public Read. Di kotak dialog yang muncul, klik Continue.

   3. Klik Save.

Step 4: Verify the website configuration

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, berjudul Welcome to OSS dengan subjudul This is a static homepage, dan 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 telah dikonfigurasi dengan benar.

Step 1: Configure SPA hosting

Konfigurasikan parameter hosting untuk memastikan routing sisi klien berfungsi dengan benar.

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

2. Klik Settings dan konfigurasikan parameter berikut:

   • Default Homepage: Atur ke index.html.

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

   • Default 404 Page: Atur ke 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.

Step 2: Upload application files

Unggah file SPA Anda ke bucket untuk menyelesaikan penerapan.

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

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

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

Step 3: Set bucket permissions

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

1. Nonaktifkan Block Public Access untuk bucket.

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

   2. Klik 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 ke Public Read. Di kotak dialog yang muncul, klik Continue.

   3. Klik Save.

Step 4: Verify application deployment

Uji website Anda untuk memastikan SPA menangani transisi rute dengan benar.

• 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.

Best practices

• Secure transport: Enable HTTPS access

  Browser modern menampilkan peringatan "not secure" untuk website HTTP, dan mesin pencari memberi peringkat lebih tinggi pada situs HTTPS. Terapkan akses HTTPS untuk nama domain kustom Anda dengan mengikuti panduan access OSS over HTTPS. HTTPS menggunakan TLS/SSL untuk mengenkripsi data saat transit, mencegah pencurian atau perubahan data.

• Performance optimization: Configure CDN acceleration

  Jika website statis Anda melayani audiens global atau menangani traffic konkurensi tinggi, konfigurasikan akselerasi CDN untuk menyimpan cache konten di node tepi di seluruh dunia. Ini meningkatkan kecepatan akses dan mengurangi biaya traffic OSS.

  Setelah akselerasi CDN diaktifkan, halaman disajikan dari konten yang di-cache di edge nodes. Setelah Anda menimpa file, permintaan masih dapat mengembalikan versi sebelumnya hingga cache kedaluwarsa. Oleh karena itu, setelah memperbarui konten website, refresh cache CDN untuk file atau direktori yang diperbarui, dan verifikasi website hanya setelah proses refresh selesai. Hal ini mencegah halaman kedaluwarsa disalahartikan sebagai kegagalan rilis.

• Cross-origin resource sharing (CORS): Configure CORS rules

  SPA sering kali memanggil API backend atau mengakses sumber daya pihak ketiga, yang dapat dibatasi oleh kebijakan asal sama browser. Konfigurasikan aturan CORS untuk menentukan origin, metode, dan header yang diizinkan agar aplikasi Anda dapat mengakses API dan sumber daya eksternal yang diperlukan.

• Version management: Implement releases and rollbacks

  Aktifkan versioning OSS dan integrasikan dengan alat otomatisasi seperti Jenkins untuk membuat alur kerja CI/CD guna rilis cepat dan rollback darurat.

Risk mitigation

• Bandwidth theft prevention: Configure hotlink protection

  Website lain yang langsung menautkan ke sumber daya statis Anda meningkatkan biaya traffic dan beban server. Konfigurasikan Perlindungan hotlink berbasis Referer untuk membuat daftar putih domain yang diizinkan dan mencegah penggunaan bandwidth tidak sah.

• Access monitoring: Enable access logs

  Aktifkan kueri log waktu nyata untuk mencatat semua permintaan akses. Ini membantu Anda mengidentifikasi pola akses tidak biasa, menganalisis perilaku pengguna, dan mengoptimalkan kinerja website.

404 error on SPA page refresh

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

Disabling static website hosting

1. Buka halaman Buckets, klik nama bucket target, lalu di panel navigasi sebelah 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.

Support for dynamic content

Static website hosting hanya mendukung file statis seperti HTML, CSS, dan JavaScript. Bahasa sisi server seperti PHP, Python, atau Java tidak didukung. Untuk fungsionalitas dinamis, gunakan rendering sisi klien dengan framework antarmuka depan atau panggil API backend melalui layanan arsitektur tanpa server seperti Function Compute.