Menginstal Strapi Headless CMS di Cloud Raya – Bag. 1

How can we help?
< All Topics
Print

Menginstal Strapi Headless CMS di Cloud Raya – Bag. 1

Dalam era pengembangan web yang terus berkembang, perluasan kemampuan CMS (Content Management System) menjadi penting. Meskipun CMS tradisional telah lama digunakan, munculnya pendekatan baru seperti headless CMS menawarkan solusi yang lebih sesuai dengan kebutuhan pengembangan web modern.

Tantangan dengan CMS Tradisional

Penggunaan CMS tradisional seperti WordPress dapat melibatkan beberapa tantangan yang perlu diperhatikan. Meskipun CMS tradisional menyediakan kelebihan dalam mengelola konten sekaligus menampilkannya, terdapat beberapa hal yang perlu dipertimbangkan, seperti pemeliharaan yang kompleks dan keharusan untuk melakukan pembaruan secara teratur.

Sebagai contoh, ketika sebuah CMS tradisional meminta pembaruan, ada banyak aspek yang harus diperhatikan, seperti kompatibilitas dengan plugin, tema, dan bahkan versi PHP. Jika tidak dilakukan pembaruan, dapat muncul celah keamanan yang berpotensi membahayakan website.

Dalam konteks ini, perlu adanya pemahaman dan pengetahuan yang cukup dalam bidang IT untuk memastikan kesesuaian pembaruan tersebut dengan plugin, tema, dan elemen lainnya dalam website. Pemeliharaan yang rumit ini dapat memakan waktu dan energi yang signifikan.

Solusi dengan Hadirnya Konsep Headless CMS

Dalam mengatasi tantangan yang dihadapi oleh CMS tradisional, hadirnya konsep headless CMS dapat memberikan solusi yang lebih fleksibel dan efisien. Berikut adalah beberapa poin yang perlu ditekankan dalam solusi tersebut:

  1. Pemisahan Backend dan Frontend: Konsep headless CMS memisahkan antarmuka backend (pengelolaan konten) dan frontend (tampilan pengguna). Dengan demikian, fokus utama adalah pada pengelolaan konten tanpa mempengaruhi tampilan pengguna.
    Sementara tampilan dan antarmuka pengguna dapat dikembangkan secara terpisah menggunakan teknologi yang diinginkan. Di sisi lain, data dapat diakses oleh frontend melalui Application Programming Interface (API), sehingga headless CMS sering digunakan oleh developer untuk membuat API dengan cepat.

  2. Kebebasan Memilih Teknologi Frontend: Dalam headless CMS, kita memiliki kebebasan untuk memilih teknologi frontend yang paling sesuai dengan kebutuhan project, seperti React, Angular, atau Vue.js. Hal ini memungkinkan kita untuk menghasilkan pengalaman pengguna yang unik dan sesuai dengan tujuan bisnis.

  3. Skalabilitas dan Perluasan: Dengan headless CMS, kita dapat dengan mudah mengintegrasikan konten ke berbagai platform dan perangkat, termasuk aplikasi mobile, situs web, atau layanan pihak ketiga. Memberikan fleksibilitas dalam mengembangkan dan memperluas jangkauan bisnis digital kita.

  4. Optimalisasi Kinerja dan KeamananSitus web WordPress yang berat dengan banyak plugin dapat mengalami masalah kinerja yang dapat merugikan pengalaman pengguna. Strapi, sebagai headless CMS, dapat memberikan lapisan keamanan yang lebih tinggi dan performa yang lebih baik dengan mengurangi beban backend dan mempercepat waktu muat halaman.

Dalam tutorial ini, kita akan membangun headless CMS menggunakan Strapi di dalam VM Cloud Raya untuk memenuhi kebutuhan pengelolaan konten yang lebih modern, fleksibel, dan aman.

Pengenalan Strapi

Sesuai penjelasan dari dari website resminya, Strapi adalah CMS open-source yang menggunakan arsitektur headless.

  • Dibangun dengan menggunakan 100% JavaScript dan sepenuhnya dapat disesuaikan.
  • Strapi mendukung RESTful dan GraphQL. Memberikan fleksibilitas kepada pengguna dalam memilih cara mereka berinteraksi dengan CMS dan mengakses data.
  • Kompatibel dengan berbagai database seperti PostgreSQL, MySQL, MariaDB, dan SQLite.
  • Strapi dapat dijalankan secara self-hosted atau menggunakan layanan cloud-based yang disediakan oleh Strapi.

Pra-instalasi

Berdasarkan dokumentasi Strapi, berikut adalah persyaratan yang harus dipenuhi di dalam VM kita:

  • Spesifikasi VM (CPU, RAM, Storage)
    • CPU: 2+ core (disarankan), minimal 1 core
    • RAM: 4GB+ (disarankan), minimal 2GB
    • Storage: 32GB+ (disarankan), minimal 8GB
  • Node.js
    • Disarankan menggunakan Node.js v18.x untuk Strapi v4.3.9 ke atas. Tutorial akan menggunakan ini
    • Disarankan menggunakan Node.js v16.x untuk Strapi v4.0.x hingga v4.3.8.
    • Versi LTS Node.js juga sudah menyertakan NPM.
  • Versi Database yang Didukung
    • MySQL: 8.0 (disarankan), minimal 5.7.8
    • MariaDB: 10.6 (disarankan), minimal 10.3 Tutorial akan menggunakan ini
    • PostgreSQL: 14.0 (disarankan), minimal 11.0
    • SQLite: versi 3 (disarankan dan minimal)
  • Sistem Operasi yang Didukung
    • Ubuntu (LTS): 22.04 (disarankan), minimal 20.04 Tutorial akan menggunakan ini
    • Debian: 11.x (disarankan), minimal 10.x
    • CentOS/RHEL: 9.x (disarankan), minimal 8.x
    • Windows Server: versi 2022 (disarankan), minimal 2019
  • Buka port TCP 1337 dalam ACL firewall pada profil VPC karena server Strapi nantinya akan berjalan pada port tersebut.

    Untuk petunjuk cara menambahkan port di VPC Cloud Raya, silakan merujuk ke KB berikut.

VM Cloud Raya

Untuk tutorial ini, kita akan menggunakan spesifikasi VM berikut:

Instal Node.js

Strapi ditulis dalam JavaScript, oleh karena itu diperlukan Node.js beserta manajer paket npm.

Node.js merupakan runtime environment untuk menjalankan JavaScript di server-side, sementara npm adalah standar manajer paket untuk Node.js. npm menyediakan repositori publik dengan ribuan software packages yang dikembangkan oleh komunitas Node.js.

Tambahkan repositori Node.js ke VM kita dengan perintah berikut:

				
					curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -
				
			

Setelah proses download selesai, jalankan perintah berikut untuk menginstal Node.js dan npm:

				
					sudo apt-get install nodejs -y
				
			

Sebenarnya, Strapi telah menyediakan skrip instalasi yang memudahkan kita untuk menginstal dengan satu perintah saja. Perintah yang dapat digunakan adalah:

				
					npx create-strapi-app@latest my-project --quickstart
				
			

Namun, dalam instalasi quickstart ini, Strapi menggunakan database SQLite, dalam tutorial ini akan digunakan MariaDB karena saya sudah lebih terbiasa dengan itu.

Oleh karena itu, langkah pertama yang perlu dilakukan adalah menginstal server MariaDB.

Instal MariaDB

Instalasi MariaDB di Ubuntu

				
					sudo apt install mariadb-server -y

				
			

Untuk memastikan MariaDB berjalan setiap kali sistem dinyalakan, jalankan perintah berikut:

				
					sudo systemctl enable mariadb
				
			

Buat Database dan User untuk Strapi

Login ke MariaDB:

				
					sudo mariadb -u root
				
			

Buat database untuk Strapi. Dalam tutorial ini, akan digunakan nama “strapi_db“, tetapi Anda dapat menyesuaikannya sesuai kebutuhan:

				
					CREATE DATABASE strapi_db;

				
			

Selanjutnya, buat user ‘admin‘ untuk database ini. Anda juga dapat menyesuaikan username dan password sesuai kebutuhan:

				
					CREATE USER 'admin'@'localhost' IDENTIFIED BY 'password-anda';

				
			

Berikan hak akses penuh pada semua tabel dalam database “strapi_db” kepada user ‘admin‘:

				
					GRANT ALL PRIVILEGES ON strapi_db.* TO 'admin'@'localhost';

				
			

Terapkan perubahan yang baru saja dibuat dan keluar dari MariaDB:

				
					FLUSH PRIVILEGES;
EXIT;
				
			

Instal Strapi

Sekarang kita dapat mulai menginstal Strapi. Caranya sama seperti yang saya sebutkan sebelumnya, tetapi kali ini kita tidak akan menggunakan --quickstart.

				
					npx create-strapi-app@latest backend-strapi
# npx menjalankan perintah dari paket npm.
# create-strapi-app adalah paket Strapi.
# @latest menunjukkan bahwa kita akan menggunakan versi terbaru Strapi untuk membuat proyek ini.
# backend-strapi adalah nama proyek Strapi kita.
				
			
  • Pada jenis instalasi, pilih Custom (manual settings).
  • Pada preferensi bahasa, pilih JavaScript.
  • Pada pengaturan default database client, pilih tipe database MySQL dan masukkan nama database, user, dan password seperti ini:
  • Pada Enable SSL connection, penting untuk mempertimbangkan penggunaan SSL Connection tergantung pada kebutuhan dan tingkat keamanan yang diinginkan. Jika backend Strapi tidak diakses oleh publik secara luas, maka kita bisa pilih No

Kita tunggu proses instalasi selesai, hingga setelahnya akan muncul informasi berikut jika proses telah sukses.

Sekarang kita buat panel admin Strapi terlebih dahulu dengan pertama masuk ke direktori instalasi Strapi:

				
					cd /root/backend-strapi/
npm run build
				
			

Proses ini biasanya tidak memakan waktu lama (tergantung pada spesifikasi VM kita). Jika sudah selesai, pesan berikut akan ditampilkan:

Menjalankan Servis Strapi

Untuk memulai aplikasi Strapi, jalankan perintah berikut di dalam folder proyek. Dan pastikan selalu menjalankan perintah ini terlebih dahulu setiap kali VM Anda dihidupkan setelah berada dalam kondisi mati.

				
					cd /root/backend-strapi/
npm run develop
				
			

Informasi berikut akan ditampilkan:

Mari kita mulai dengan membuat user admin untuk Strapi ini. Untuk mengaksesnya, buka browser dan kunjungi http://localhost:1337/admin. Namun, karena kita menginstal Strapi di dalam VM Cloud Raya, kita akan mengaksesnya melalui IP Publiknya di http://163.53.195.233:1337/admin.

Selanjutnya, kita akan diarahkan ke panel admin Strapi, di mana kita dapat mulai mengelola konten dan mengkonfigurasi aplikasi kita sesuai dengan kebutuhan.

Ekstensi Fungsional

Strapi juga menyediakan banyak plugin tambahan di dalam ‘Marketplace’ untuk meningkatkan produktivitas dan kemudahan dalam pengelolaan kontennya.

Kesimpulan

Dalam tutorial ini, kita telah mempelajari bersama tentang tantangan yang dihadapi oleh CMS tradisional dan solusi yang ditawarkan oleh konsep Headless CMS, dengan Strapi sebagai salah satu pilihan yang cocok.

Kita juga telah mengetahui langkah-langkah dalam instalasi Strapi di dalam VM Cloud Raya. Dengan demikian, kita telah mendapatkan pemahaman tentang apa itu Strapi dan bagaimana memulai menggunakan platform ini.

Kita akan melanjutkan seri tutorial Strapi ini dengan topik-topik menarik, seperti membuat dan mengelola konten backend dengan Strapi, membuat frontend dengan React, dan menggunakan S3 dari Storage Raya untuk penyimpanan aset backend Strapi.

Table of Contents

Leave a Reply

Your email address will not be published. Required fields are marked *

Post comment

Ready, Set, Cloud

Ready, Set, Cloud