Tutorial Custom CMS dengan Strapi + Heroku (Part 1)

Membuat CMS dan API biasanya menjadi salah satu hal yang painfull dalam proses development sebuah aplikasi, tapi hal ini bisa dilakukan cukup cepat dengan menggunakan Strapi. Tutorial kali ini adalah bagian pertama dalam rangkaian Tutorial CMS Strapi.

Strapi adalah headless CMS open-source yang menggunakan Node.js, kita akan bahas lebih lengkap lagi tentang headless CMS itu seperti apa di lain waktu.

Membuat Custom CMS dengan Strapi

Langkah pertama kita perlu membuat CMS dengan Strapi, berikut ini adalah langkah-langkah untuk membuat custom CMS dengan Strapi:

Buat project Strapi dengan command dibawah ini:

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

Buat file .gitignore yang berisi

package-lock.json

Inisialisasi git repository dan commit project Strapi

cd my-project
git init
git add .
git commit -m "Initial Commit"

Membuat Project di Heroku

Setelah membuat CMS dengan konfigurasi default, selanjutnya perlu untuk membuat project baru di Heroku sebelum dilakukan deployment. Berikut langkah-langkahnya:

Install CLI Heroku

Ubuntu

sudo snap install --classic heroku

Mac

brew tap heroku/brew && brew install heroku

Windows

• 64-bit installer
• 32-bit installer

Login ke Heroku

heroku login

Membuat Project Baru di Heroku

heroku create

kamu bisa membuat nama project sendiri dengan command heroku create nama-custom-project dan url project heroku yang kamu buat adalah nama-custom-project.heroku.com

Konfigurasi Database di Heroku

Selanjutnya perlu menambahkan database di project Heroku, kali ini kita menggunakan postgres untuk databasenya.

Tambah addons Postgres ke project heroku dengan command berikut:

heroku addons:create heroku-postgresql:hobby-dev

Kemudian untuk mendapatkan informasi credentials database tersebut gunakan perintah ini:

heroku config

Perintah ini akan memberikan informasi kredensial database tersebut dalam bentuk seperti berikut:
DATABASE_URL: postgres://ebitxebvixeeqd:dc59b16dedb3a1eef84d4999sb4baf@ec2-50-37-231-192.compute-2.amazonaws.com: 5432/d516fp1u21ph7b

(This url is read like so: *postgres:// USERNAME : PASSWORD @ HOST : PORT / DATABASE_NAME*)

Konfigurasi Database di Project Strapi

Kita akan melakukan konfigurasi database postgres untuk environment production pada project Strapi.

Install Package

npm install pg pg-connection-string --save

Buat File Config Database
Buat file config pada path berikut ini ./config/env/production/database.js pada file database.js ini hanya untuk environment production, sedangkan untuk environment development akan tetap menggunakan database SQLLite. Isi konfigurasi database.js adalah sebagai berikut:

// path: ./config/env/production/database.js

const parse = require('pg-connection-string').parse;
const config = parse(process.env.DATABASE_URL);

module.exports = ({ env }) => ({
  connection: {
    client: 'postgres',
    connection: {
      host: config.host,
      port: config.port,
      database: config.database,
      user: config.user,
      password: config.password,
      ssl: {
        rejectUnauthorized: false
      },
    },
    debug: false,
  },
});

Jangan lupa set environment pada Heroku dengan production

heroku config:set NODE_ENV=production

Buat File Server Strapi untuk Production
Buat file server.js pada path ./config/env/production/server.js dan isi file server.js adalah sebagai berikut:

// Path: ./config/env/production/server.js`

module.exports = ({ env }) => ({
  url: env('MY_HEROKU_URL'),
});

Deployment Project Strapi ke Heroku

Setelah melakukan instalasai project baru, konfigurasi database, selanjutnya tinggal melakukan deployment project ke Heroku.

Konfigurasi ENV
Ada beberapa variable env yang perlu diset ke project Heroku, kita bisa menggunakan command berikut:

heroku config:set MY_HEROKU_URL=$(heroku info -s | grep web_url | cut -d= -f2)
heroku config:set APP_KEYS=$(cat .env | grep APP_KEYS | cut -d= -f2-)
heroku config:set API_TOKEN_SALT=$(cat .env | grep API_TOKEN_SALT | cut -d= -f2)
heroku config:set ADMIN_JWT_SECRET=$(cat .env | grep ADMIN_JWT_SECRET | cut -d= -f2)
heroku config:set JWT_SECRET=$(cat .env | grep -w JWT_SECRET | cut -d= -f2)

Generate value env diatas dengan perintah berikut:

heroku config:set APP_KEYS=$(openssl rand -base64 32)
heroku config:set API_TOKEN_SALT=$(openssl rand -base64 32)
heroku config:set ADMIN_JWT_SECRET=$(openssl rand -base64 32)
heroku config:set JWT_SECRET=$(openssl rand -base64 32)

Commit Perubahan

git add .
git commit -m "Update database config"

Deploy

git push heroku HEAD:main

Setelah dilakukan perintah deploy pada akhir logs kita akan menerima pesan URL project kita (cth: https://mighty-taiga-80884.herokuapp.com). Jika anda ingin membuka project tersebut bisa menggunakan perintah

heroku open

Custom CMS dengan Strapi sukses dideploy dan siap untuk digunakan.
Akses Admin: https://URL_PROJECT/admin

Pada environment live production di Heroku, kita tidak bisa melakukan custom scheme atau membaut collection baru. Hal ini hanya bisa dilakukan pada environment development, jadi setiap setelah membuat custom scheme baru kita perlu melakukan deploy perubahan soruce code terbaru ke Heroku.

Untuk memudahkan proses ini kita perlu membuat CI/CD sehingga proses development dan deployment bisa berjalan lebih cepat. Selanjutnya Tutorial Membuat CI/CD dengan Github, Strapi, dan Heroku (Part 2).

Source Code

Untuk source code lengkap bisa diakses melalui link github ini.

Thank you for reading and learning.
More Learn, More Earn.
Have a great day ^ _ ^