Konfigurasikan gateway cloud-native MSE untuk hosting website statis di OSS - Microservices Engine

Dalam arsitektur pemisahan antarmuka depan dan backend, aset statis (HTML, CSS, JavaScript) disimpan di penyimpanan objek, sedangkan layanan backend berjalan secara independen. Jika aplikasi Anda sudah menggunakan Microservices Engine (MSE) cloud-native gateway untuk mengarahkan lalu lintas API, Anda dapat menambahkan Object Storage Service (OSS) sebagai layanan backend pada gateway yang sama. Pendekatan ini menyediakan satu titik masuk tunggal untuk konten statis maupun API backend, dengan kebijakan penulisan ulang URL, manipulasi header, dan pengaturan routing tingkat gateway yang diterapkan pada seluruh lalu lintas.

Tutorial ini menjelaskan cara menyimpan file statis di bucket OSS dan mengonfigurasi gateway cloud-native MSE untuk menyajikannya. Setelah selesai, gateway akan mengarahkan permintaan seperti example.com/index.html ke file di OSS dan permintaan seperti example.com/app ke layanan backend.

Kapan menggunakan pendekatan ini

Gunakan gateway cloud-native MSE untuk menyajikan konten statis dari OSS ketika:

Aplikasi Anda sudah menggunakan gateway cloud-native MSE untuk routing API backend, dan Anda menginginkan satu titik masuk untuk aset statis maupun API.
Anda memerlukan penulisan ulang URL, manipulasi header, atau kebijakan tingkat gateway lainnya untuk konten statis.

Untuk website statis mandiri tanpa layanan backend, hosting situs web statis OSS merupakan alternatif yang lebih sederhana.

Cara kerja

Diagram berikut menunjukkan alur permintaan:

Permintaan klien
     |
     v
Gateway cloud-native MSE
     |
     |-- /index.html, /style.css, ...  -->  Bucket OSS (file statis)
     |
     +-- /app, /api/...               -->  Layanan backend

Gateway mencocokkan setiap permintaan masuk terhadap aturan rute yang telah ditentukan. Permintaan file statis diarahkan ke titik akhir internal bucket OSS, dengan header Host ditulis ulang agar OSS dapat mengenali bucket yang benar. Header respons content-disposition dihapus sehingga browser me-render file secara inline alih-alih mengunduhnya.

Prasyarat

Sebelum memulai, pastikan Anda telah memiliki:

Gateway cloud-native MSE. Untuk informasi lebih lanjut, lihat Buat gateway cloud-native MSE.

Langkah 1: Buat bucket OSS dan unggah halaman statis

Buat bucket OSS dengan ACL baca-publik dan unggah contoh halaman HTML.

Masuk ke Konsol OSS.
Di panel navigasi kiri, klik Buckets, lalu klik Create Bucket.

Di panel Create Bucket, konfigurasikan parameter berikut dan biarkan nilai default untuk parameter lainnya. Lalu klik OK.

ACL baca-publik memungkinkan siapa saja membaca objek dalam bucket ini. Untuk beban kerja produksi, pertimbangkan apakah ACL yang lebih ketat dengan URL yang ditandatangani sesuai dengan kebutuhan keamanan Anda.

Parameter	Nilai
Bucket Name	Masukkan nama bucket. Tutorial ini menggunakan `static-demo-0`.
Storage Class	Pilih Standard.
ACL	Klik Public Read. Saat muncul konfirmasi Are you sure you want to select Public Read?, klik Continue.

Di halaman Buckets, klik nama bucket yang telah Anda buat. Di panel Objects, klik Upload Object.

Atur Object ACL menjadi Inherited from Bucket dan unggah file index.html berikut:

   <html>
      <head>
          <title>Hello OSS!</title>
          <meta charset="utf-8">
      </head>
      <body>
          <p>Configure static website hosting for Alibaba Cloud OSS.</p>
          <p>This is the index page.</p>
      </body>
   </html>

Klik Upload Object. Setelah proses unggah selesai, nama file, ukuran, dan kelas penyimpanan akan muncul di direktori tujuan.

Langkah 2 (opsional): Atur halaman utama default dan halaman error 404

Konfigurasikan halaman utama default agar permintaan ke / mengembalikan index.html. Anda juga dapat mengonfigurasi halaman 404 khusus untuk path yang tidak cocok.

Atur halaman utama default

Di Konsol OSS, buka pengaturan bucket Anda dan tetapkan index.html sebagai halaman utama default.

Atur halaman 404 khusus

Unggah file 404.html ke bucket:

   <html>
      <head>
          <title>The page you visited does not exist</title>
          <meta charset="utf-8">
      </head>
      <body>
          <p>The page you visited does not exist.</p>
          <p>You can try to visit the homepage.</p>
      </body>
   </html>

Di pengaturan hosting situs web statis bucket, tetapkan 404.html sebagai halaman error.

Untuk instruksi lengkap, lihat Konfigurasi hosting situs web statis.

Langkah 3: Dapatkan titik akhir internal bucket OSS

Setiap bucket OSS memiliki nama domain default. Anda memerlukan titik akhir internal untuk mengonfigurasi layanan gateway pada langkah berikutnya.

Di Konsol OSS, buka halaman Overview bucket dan temukan titik akhir internal di bagian Port. Titik akhir tersebut mengikuti format <bucket-name>.oss-<region>-internal.aliyuncs.com.

Untuk informasi lebih lanjut, lihat Akses OSS dari instans ECS melalui titik akhir internal.

Langkah 4: Tambahkan bucket OSS sebagai layanan gateway

Gateway cloud-native MSE memperlakukan setiap bucket OSS sebagai layanan yang ditemukan melalui DNS. Daftarkan titik akhir internal bucket sebagai layanan pada gateway.

Masuk ke Konsol MSE.
Di panel navigasi kiri, pilih Cloud-native Gateway > Gateways. Klik nama gateway Anda.
Di panel navigasi kiri, klik Routes. Di halaman yang muncul, klik tab Services.

Klik Add Service dan konfigurasikan parameter berikut di panel Add Service. Lalu klik OK.

Parameter	Nilai
Service Source	Pilih DNS Domain Name.
Service Name	Masukkan nama layanan. Tutorial ini menggunakan `static`.
Service Port	Masukkan `80`.
Domain Names	Masukkan titik akhir internal dari Langkah 3, misalnya, `static-demo-0.oss-cn-hangzhou-internal.aliyuncs.com`.
TLS mode	Pilih Disabled.

Langkah 5: Buat rute dan konfigurasi kebijakan

Buat rute yang meneruskan permintaan file statis ke layanan OSS, lalu tambahkan kebijakan rewrite dan kebijakan header.

Buat rute

Masuk ke Konsol MSE.
Di panel navigasi kiri, pilih Cloud-native Gateway > Gateways. Klik nama gateway Anda.
Di panel navigasi kiri, klik Routes, lalu klik tab Routes.
Klik Add Route. Atur aturan pencocokan ke Prefix, path ke /, dan layanan tujuan ke static. Untuk informasi lebih lanjut, lihat Buat rute.

Tambahkan kebijakan rewrite

Kebijakan rewrite menulis ulang header Host agar OSS dapat mengenali bucket yang benar saat gateway meneruskan permintaan.

Di tab Routes, klik nama rute yang telah Anda buat. Klik tab Policies.
Di panel navigasi kiri tab Policies, klik Rewrite. Masukkan titik akhir internal bucket OSS (misalnya, static-demo-0.oss-cn-hangzhou-internal.aliyuncs.com) di bidang Destination Host, lalu klik Save. Untuk informasi lebih lanjut, lihat Konfigurasi kebijakan rewrite.

Hapus header respons content-disposition

Secara default, OSS menetapkan header content-disposition yang menyebabkan browser mengunduh file alih-alih me-render-nya. Hapus header ini agar halaman statis ditampilkan dengan benar di browser.

Di panel navigasi kiri tab Policies, klik Edit Header. Tambahkan kebijakan untuk menghapus header content-disposition dari respons OSS, lalu aktifkan kebijakan tersebut. Untuk informasi lebih lanjut, lihat Konfigurasi kebijakan pengaturan header.

Verifikasi hasil

Uji konfigurasi dengan mengunjungi URL berikut di browser. Ganti example.com dengan nama domain layanan Anda.

URL	Hasil yang diharapkan
`example.com`	Mengembalikan `index.html` (halaman utama default yang dikonfigurasi di Langkah 2).
`example.com/index.html`	Mengembalikan `index.html` secara langsung.
`example.com/test`	Mengembalikan `404.html` (halaman error khusus yang dikonfigurasi di Langkah 2).

Pertimbangan untuk lingkungan produksi

Setelah memverifikasi fungsionalitas dasar, pertimbangkan hal-hal berikut sebelum melayani lalu lintas produksi:

HTTPS: Konfigurasikan sertifikat SSL pada gateway cloud-native MSE untuk menyajikan konten statis melalui HTTPS.
Cache: Tambahkan Alibaba Cloud CDN di depan gateway, atau konfigurasikan kebijakan cache pada gateway, untuk mengurangi latensi dan biaya akses OSS.
Kontrol akses: Perketat ACL bucket dan gunakan URL yang ditandatangani atau otentikasi tingkat gateway alih-alih akses baca-publik.