Menggunakan Alibaba Cloud Object Storage sebagai Web Hosting Statis

Published in Literasi

September 10, 2023

2 min read

Menggunakan Alibaba Cloud Object Storage sebagai Web Hosting Statis

Banyak website modern tidak lagi memerlukan server web tradisional seperti Apache atau Nginx untuk menampilkan halaman statis. Jika website Anda hanya terdiri dari HTML, CSS, JavaScript, gambar, atau file statis lainnya, Anda dapat meng-host seluruh website tersebut menggunakan layanan object storage.

Salah satu layanan yang menyediakan fitur ini adalah Alibaba Cloud Object Storage Service (OSS). OSS memungkinkan Anda menyimpan file statis di dalam bucket dan mengaktifkan fitur static website hosting sehingga file tersebut dapat diakses langsung melalui internet. Pendekatan ini sering digunakan untuk landing page, dokumentasi, blog statis, atau frontend aplikasi SPA.

Beberapa keuntungan menggunakan OSS sebagai hosting statis antara lain:

Biaya lebih rendah dibandingkan server VPS atau hosting tradisional
Tidak perlu mengelola server
Skalabilitas tinggi
Reliabilitas tinggi dengan durabilitas data hingga 99.9999999999%
Mudah dikombinasikan dengan CDN untuk performa global

Pada artikel ini kita akan membahas bagaimana cara menggunakan Alibaba Cloud Object Storage Service (OSS) sebagai hosting untuk website statis.

Prasyarat

Sebelum memulai proses deployment website statis menggunakan OSS, pastikan beberapa kebutuhan berikut telah tersedia.

1. Akun Alibaba Cloud

Anda harus memiliki akun di Alibaba Cloud yang sudah aktif dan dapat mengakses Alibaba Cloud Console. Jika Anda baru pertama kali menggunakan OSS, biasanya Anda perlu:

Mengaktifkan layanan OSS
Mengisi metode pembayaran
Melakukan verifikasi akun

2. Website statis

Website yang akan di-host harus berupa file statis, umumnya namun tidak wajib memiliki beberapa file berikut:

index.html
style.css
app.js
gambar (png, jpg, svg)
font atau asset lainnya

Jika website menggunakan backend seperti PHP, Node.js, atau database, maka metode hosting ini tidak cocok, karena OSS hanya menyajikan file statis.

3. Domain (opsional)

Secara default OSS memberikan endpoint domain seperti: bucket-name.oss-region.aliyuncs.com Namun untuk produksi biasanya kita perlu untuk branding sehingga ingin menggunakan domain sendiri seperti: `example.com www.example.com’ Hal ini dapat dilakukan dengan menambahkan CNAME record pada DNS yang mengarah ke endpoint OSS.

4. Pengetahuan dasar OSS

Konsep	Penjelasan
Bucket	Container tempat menyimpan file
Object	File yang disimpan dalam bucket
Region	Lokasi data center OSS
Endpoint	URL akses bucket

Bucket pada OSS berfungsi mirip seperti top-level directory yang menampung semua object (file) di dalamnya.

Prosedur

Saya menganggap teman-teman sudah memiliki akun Alibaba Cloud dan telah memiliki bucket di Alibaba Cloud Object Storage Services dengan Access Control List mode read-only. Saat ini kita sudah bisa langsung unggah file web statis, saya coba unggah 1 buah file index.html dengan isi sebagai berikut:

<!doctype html>
<title>Site Maintenance</title>
<style>
  body { text-align: center; padding: 150px; }
  h1 { font-size: 50px; }
  body { font: 20px Helvetica, sans-serif; color: #333; }
  article { display: block; text-align: left; width: 650px; margin: 0 auto; }
  a { color: #dc8100; text-decoration: none; }
  a:hover { color: #333; text-decoration: none; }
</style>

<article>
    <h1>We'll be back soon!</h1>
    <div>
        <p>Sorry for the inconvenience but we're performing some maintenance at the moment. If you need to you can always <a href="mailto:#">contact us</a>, otherwise we'll be back online shortly!</p>
        <p>- The Team</p>
    </div>
</article>

Silahkan mengunggah dengan cara apa pun bisa menggunakan Alibaba Cloud CLI, Filezilla, atau langsung dari konsol. Saya sendiri saat ini unggah menggunakan konsol biar mudah, sekarang kita bisa lihat ada 1 berkas bernama index.html yang berada di bucket kita.

Tampilan index.html yang sudah diunggah ke OSS

Mengaktifkan Static Web Hosting

Sekarang pada menu sebelah kiri pilih Data Management > Static Pages, klik Configure. Pada halaman ini kita akan mengkonfigurasi dengan mengisi Default Homepage dengan index.html yang mengartikan ketika bucket ini diakses maka index.html.

Mengakses Website

Sekarang tinggal coba akses bucket, jika muncul tampilan dari index.html yang sudah kita buat tadi maka kita telah berhasil menjadikan Alibaba Cloud Object Storage Services menjadi sebuah hosting untuk web statis. Kita juga bisa mengakses menggunakan custom domain atau dikonfigurasi dengan CDN.