Object Storage Service：Hosting Situs Web Statis

Langkah 1: Konfigurasikan hosting situs web statis

Konfigurasikan halaman indeks default dan halaman kesalahan untuk menetapkan aturan akses dasar untuk situs web Anda. Ini memastikan bahwa pengguna dapat menjelajahi situs dan menerima pesan kesalahan langsung ketika terjadi kesalahan akses.

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

2. Klik Settings dan konfigurasikan parameter berikut:

   • Tetapkan Halaman Utama Default menjadi index.html.

   • Untuk Halaman Utama Subfolder, pilih apakah akan mengaktifkan halaman indeks terpisah untuk subdirektori berdasarkan struktur situs web Anda.

     • Nonaktif (Default): Opsi ini cocok untuk situs web sederhana tanpa halaman indeks terpisah untuk subdirektori. Dengan opsi ini, semua jalur URL yang diakhiri dengan garis miring (/) mengembalikan halaman indeks default dari direktori root.

     • Aktif: Opsi ini cocok untuk situs web kompleks yang berisi beberapa bagian konten independen (seperti /blog/ atau /docs/), masing-masing dengan halaman indeksnya sendiri. Saat halaman indeks terpisah diaktifkan, Anda juga harus mengonfigurasi Subfolder 404 Rule, yang mendefinisikan bagaimana sistem merespons ketika pengguna meminta file yang tidak ada.

       • Redirect (Default): Mengarahkan ulang ke direktori. Ketika file yang diminta tidak ditemukan, sistem memeriksa apakah halaman indeks ada di direktori yang sesuai. Jika halaman indeks ada, sistem mengembalikan 302 pengalihan ulang, dan bilah alamat browser diperbarui ke jalur direktori (misalnya, .../subdirmenjadi .../subdir/).

       • Index: Mengembalikan konten halaman indeks secara langsung. Mirip dengan Redirect, tetapi jika halaman indeks ditemukan di direktori yang sesuai, sistem mengembalikan konten halaman tersebut dengan kode status 200. Bilah alamat browser tetap tidak berubah.

       • NoSuchKey: Mengembalikan kesalahan 404 secara langsung. Jika file yang diminta tidak ada, sistem mengembalikan kesalahan 404, terlepas dari apakah halaman indeks ada di direktori yang sesuai.

         Deskripsi Rinci tentang Aturan 404 Subfolder

         Saat Halaman Utama Subfolder diaktifkan, aturan ini mendefinisikan respons sistem ketika permintaan menunjuk ke objek yang tidak ada. Ini memastikan bahwa routing situs web ditangani dengan benar.

         Mekanisme inti: Membedakan antara permintaan objek dan permintaan direktori

         Perilaku aturan bergantung pada struktur URL permintaan, khususnya apakah itu diakhiri dengan garis miring (/).

         • Permintaan Objek: URL tidak diakhiri dengan /, seperti .../subdir. Sistem menafsirkan ini sebagai permintaan untuk objek subdir.

         • Permintaan Direktori: URL diakhiri dengan /, seperti .../subdir/. Sistem menafsirkan ini sebagai permintaan untuk halaman utama default dalam direktori subdir.

         Aturan 404 Subfolder hanya dipicu saat permintaan objek gagal, yaitu objek tidak ada.

         Perilaku aturan rinci

         Tabel berikut merinci bagaimana setiap aturan berperilaku saat permintaan dibuat untuk objek yang tidak ada (misalnya, http://example.com/subdir).

         Aturan	Perilaku Inti	Prosedur	Efek (tergantung pada apakah subdir/index.html ada)
         Redirect (Default)	Mengarahkan ulang ke URL direktori: Memeriksa apakah halaman indeks ada di direktori yang sesuai. Jika ada, respons pengalihan ulang 302 dikembalikan.	Objek subdir tidak ditemukan, memicu aturan. Sistem memeriksa apakah subdir/index.html ada. Jika ada, 302 Found dengan header Location yang menunjuk ke .../subdir/ dikembalikan. Jika tidak ada, 404 Not Found dikembalikan.	Jika ada: Konten halaman indeks ditampilkan, dan bilah alamat browser diperbarui menjadi .../subdir/. Jika tidak ada: Halaman kesalahan 404 ditampilkan.
         Index	Mengembalikan konten halaman indeks secara langsung: Memeriksa apakah halaman indeks ada di direktori yang sesuai. Jika ada, kontennya dengan kode status 200 dikembalikan.	Objek subdir tidak ditemukan, memicu aturan. Sistem memeriksa apakah subdir/index.html ada. Jika ada, kontennya dikembalikan dengan kode status 200 OK. Jika tidak ada, 404 Not Found dikembalikan.	Jika ada: Konten halaman indeks ditampilkan, dan bilah alamat browser tetap .../subdir. Jika tidak ada: Halaman kesalahan 404 ditampilkan.
         NoSuchKey	Mengembalikan kesalahan 404 secara langsung: Tidak melakukan pemeriksaan tambahan direktori atau halaman indeks.	Objek subdir tidak ditemukan, memicu aturan. 404 Not Found segera dikembalikan.	Halaman kesalahan 404 selalu ditampilkan, terlepas dari apakah subdir/index.html ada.

   • Tetapkan Default 404 Page menjadi error.html.

   • Untuk Error Page Status Code, pilih 404.

3. Klik Save.

Langkah 2: Unggah file situs web

Unggah file HTML yang telah Anda siapkan untuk situs web Anda ke bucket.

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

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

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

Langkah 3: Tetapkan izin akses untuk bucket

Konfigurasikan izin baca-publik sehingga pengguna dapat mengakses situs web Anda.

1. Secara default, Blokir Akses Publik diaktifkan saat Anda membuat bucket OSS. Fitur ini mencegah Anda mengatur daftar kontrol akses (ACL) bucket ke baca-publik atau baca-tulis-publik. Anda harus menonaktifkan fitur ini terlebih dahulu.

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

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

2. Setel ACL bucket ke baca-publik.

   1. Beralihlah ke tab Access Control List dan klik Configure.

   2. Setel Bucket ACL ke Public Read. Di kotak dialog yang muncul, klik Continue.

   3. Klik Simpan.

Langkah 4: Verifikasi konfigurasi situs web

Lakukan uji akses untuk memastikan bahwa hosting situs web berfungsi.

• Verifikasi Akses Halaman Utama: Di browser, arahkan ke nama domain kustom Anda (contoh: http://example.com). Hasilnya harus muncul sebagai berikut.

  

• Verifikasi Halaman 404: Di browser, arahkan ke file yang tidak ada (contoh: http://example.com/missing-object). Hasilnya harus muncul sebagai berikut.

  

Langkah 1: Konfigurasikan hosting SPA

Konfigurasikan parameter hosting dan optimalkan pengaturan untuk karakteristik routing SPA untuk memastikan bahwa routing frontend bekerja dengan benar.

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

2. Klik Settings dan konfigurasikan parameter berikut:

   • Setel Default Homepage menjadi index.html.

   • Setel Subfolder Homepage menjadi Disabled. Dengan pengaturan ini, permintaan apa pun ke domain situs web statis atau URL apa pun di bawah domain tersebut yang diakhiri dengan garis miring (/) mengembalikan halaman utama direktori root.

   • Setel Default 404 Page menjadi index.html (Pengaturan penting ini mengarahkan ulang semua rute ke titik entri aplikasi).

   • Untuk Error Page Status Code, pilih 200 (untuk memastikan bahwa 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 di sebelah 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 unggah, klik Upload.

Langkah 3: Tetapkan izin akses untuk bucket

Konfigurasikan izin akses publik sehingga pengguna dapat mengakses SPA.

1. Nonaktifkan Blokir Akses Publik untuk bucket.

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

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

2. Setel ACL bucket ke baca-publik.

   1. Beralihlah ke tab Access Control List dan klik Configure.

   2. Setel Bucket ACL ke Public Read. Di kotak dialog yang muncul, klik Continue.

   3. Klik Simpan.

Langkah 4: Verifikasi penerapan aplikasi

Lakukan uji akses untuk memastikan bahwa SPA diterapkan dan dapat menangani transisi rute dengan benar.

• Verifikasi Akses Halaman Utama: Di browser, arahkan ke nama domain kustom Anda (contoh: http://example.com). Hasilnya harus muncul sebagai berikut.

  

• Verifikasi Halaman 404: Di browser, arahkan ke file yang tidak ada (contoh: http://example.com/missing-object). Permintaan dialihkan ke titik entri aplikasi dan mengembalikan 200 OK. Hasilnya harus muncul sebagai berikut.

  

Praktik terbaik

• Transmisi Aman: Aktifkan Akses HTTPS

  Browser modern menampilkan peringatan "Tidak Aman" untuk situs web HTTP, dan mesin pencari memberikan skor SEO lebih tinggi kepada situs web yang diaktifkan HTTPS. Paksa akses HTTPS untuk nama domain kustom yang Anda lampirkan untuk akses OSS melalui protokol HTTPS. Protokol HTTPS menggunakan TLS/SSL untuk mengenkripsi data dalam transit, mencegah pencurian atau pemalsuan data sambil meningkatkan keamanan situs web dan kepercayaan pengguna.

• Optimasi Kinerja: Konfigurasikan Percepatan CDN

  Jika situs web statis Anda melayani audiens global atau mengalami lalu lintas bersamaan tinggi, konfigurasikan percepatan CDN. Pendekatan ini menyimpan konten Anda pada node tepi di seluruh dunia, secara signifikan meningkatkan kecepatan akses dan mengurangi biaya lalu lintas OSS.

• Akses Lintas Domain: Konfigurasikan Aturan CORS

  SPA sering kali perlu memanggil API backend atau mengakses sumber daya pihak ketiga, yang dapat dibatasi oleh kebijakan asal sama browser. Dengan mengonfigurasi aturan CORS, Anda dapat menentukan asal, metode, dan header yang diizinkan untuk memastikan aplikasi frontend Anda dapat mengakses layanan API dan sumber daya eksternal yang diperlukan.

• Pengelolaan Versi: Implementasikan Rilis dan Rollback

  Lingkungan produksi memerlukan kemampuan untuk merilis versi baru dengan cepat dan melakukan rollback darurat. Aktifkan pengendalian versi dan integrasikan dengan alat otomatisasi seperti Jenkins untuk membuat Pipeline integrasi dan penyebaran berkelanjutan (CI/CD) yang lengkap. Ini meningkatkan efisiensi rilis dan stabilitas sistem.

Pencegahan risiko

• Perlindungan Pencurian Lalu Lintas: Konfigurasikan Perlindungan Hotlink

  Sumber daya statis yang dirujuk langsung oleh situs web lain menyebabkan biaya lalu lintas tambahan dan beban server. Konfigurasikan perlindungan hotlink dan atur daftar izin domain untuk mencegah pencurian bandwidth dari situs web lain yang melakukan hotlinking terhadap aset Anda dan untuk mengontrol biaya operasional.

• Pemantauan Akses: Aktifkan Log Akses

  Lingkungan produksi memerlukan catatan akses lengkap untuk audit keamanan, analisis kinerja, dan pemecahan masalah. Aktifkan Kueri Log Real-time untuk mencatat informasi mendetail untuk semua permintaan akses. Ini membantu Anda mengidentifikasi pola akses abnormal, menganalisis perilaku pengguna, dan mengoptimalkan kinerja situs web.

Bagaimana cara memperbaiki kesalahan 404 yang muncul saat saya menyegarkan halaman di SPA yang telah saya terapkan?

Dalam aplikasi halaman tunggal, JavaScript frontend menangani semua rute. Saat Anda mengakses atau menyegarkan rute non-halaman utama secara langsung, server tidak dapat menemukan file yang sesuai. Untuk menyelesaikan masalah ini, setel Default 404 Page menjadi index.html dan Error Page Status Code menjadi 200. Ini mengarahkan ulang semua jalur "tidak ada" ke titik entri aplikasi, memungkinkan router frontend menanganinya dengan benar.

Bagaimana cara menonaktifkan hosting situs web statis?

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

2. Klik Settings, hapus konfigurasi Default Homepage dan Default 404 Page, lalu klik Save untuk menonaktifkan hosting situs web statis.

Apakah hosting situs web statis mendukung konten dinamis?

Hosting situs web statis hanya mendukung konten statis sisi klien, termasuk HTML, CSS, dan JavaScript. Tidak mendukung bahasa dinamis sisi server seperti PHP, Python, atau Java. Jika Anda membutuhkan fungsionalitas dinamis, Anda dapat menggunakan teknik rendering sisi klien dengan kerangka kerja frontend atau memanggil API backend melalui layanan tanpa server seperti Alibaba Cloud Function Compute.