Deploy Aplikasi Node.js di Heroku

By Rizky Kurniawan - August 17, 2022 ~4 mins read

Halo… selamat datang di Ruang Developer Blog. Pada kesempatan ini kita akan belajar bagaimana cara mendeploy aplikasi Node.js kita di Heroku.

Bagi yang belum tahu, heroku itu adalah salah satu Platform as a Service (PaaS) yang menyediakan layanan untuk membangun, menjalankan, dan mengoperasikan aplikasi kita secara keseluruhan di cloud platform.

Persiapan

Sebelumnya kita persiapkan terlebih dahulu aplikasi yang ingin kita deploy. Masih ingat tutorial sebelumnya tentang Menjalankan Aplikasi Node.js di Docker? Kali ini kita akan kembali menggunakan hasil project dari tutorial tersebut untuk kita coba deploy di Heroku. Oleh karena itu, mari kita clone terlebih dahulu projectnya:

# Jika menggunakan http
git clone https://github.com/ruangdeveloper/nodejs-docker.git

# Jika menggunakan ssh
git clone [email protected]:ruangdeveloper/nodejs-docker.git

Setelah cloning selesai, buka root folder project kemudian tambahkan kode berikut ini pada file package.json:

"engines": {
    "node": "16.x"
},

Kode tersebut memberitahu Heroku bahwa kita akan menggunakan Node.js versi 16.x.

Berikutnya tambahkan start script:

"scripts": {
    "start": "node ./src/app.js"
},

Start script digunakan agar Heroku tahu bagaimana cara menjalankan aplikasi kita.

Sekarang file package.json kita akan menjadi seperti ini:

{
  "name": "book-api",
  "version": "1.0.0",
  "description": "Node.js Book REST API with Express, Sequelize, and MySQL",
  "main": "./src/app.js",
  "scripts": {
    "start": "node ./src/app.js"
  },
  "engines": {
    "node": "16.x"
  },
  "keywords": ["Node.js", "Express", "Sequelize", "MySQL", "REST", "API"],
  "author": "www.ruangdeveloper.com",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.1",
    "mysql2": "^2.3.3",
    "sequelize": "^6.21.3"
  }
}

Setelah semua perubahan disimpan, kita bisa commit dan push ke repositori di github. Aplikasi kita harus berada di github karena kita akan mendeploy aplikasinya menggunakan github.

Membuat Project Aplikasi di Heroku

Sekarang saya anggap kamu sudah mendaftar dan memiliki akun di Heroku ya. Kita tidak akan bahas cara registrasinya di sini. Kalo kamu belum memiliki akun, kamu bisa langsung daftar saja di Website Heroku dan ikuti langkah yang diberikan hingga selesai.

Setelah memiliki akun dan login ke dasboard Heroku, buatlah satu buah applikasi baru dengan nama bebas sesuai yang kamu inginkan (dan tersedia).

Membuat Aplikasi

Membuat dan Mengkonfigurasi Database Untuk Aplikasi

Kalau kamu masih ingat, aplikasi kita sebelumnya memerlukan database MySQL untuk menyimpan data buku. Di Heroku, kita bisa menambahkan database untuk aplikasi kita menggunakan add-on. Heroku menyediakan berbagai jenis add-on yang bisa kita tambahkan sesuai keperluan aplikasi kita.

Untuk menambahkan add-on, pergi ke bagian resource, kemudian pada kolom pencarian add-on carilah ClearDB MySQL.

Cari ClearDB MySQL

Klik add-on ClearDB yang muncul setelah itu maka akan muncul pop-up seperti berikut ini.

Tambahkan ClearDB MySQL

Pada bagian plan name pilihlah Ignite - Free karena ini adalah plan yang gratis (kecuali kamu mau bayar, silahkan pilih yang lain).

Setelah memilih plan, silahkan klik Submit Order Form. Setelah ditambahkan maka add-on ClearDB MySQL akan muncul pada daftar add-on di aplikasi kamu.

ClearDB Telah Ditambahkan

Setelah menambahkan database, saatnya kita konfigurasi juga environment variable untuk aplikasi kita. Kamu tentu masih ingat kan bahwa kita menggunakan environment variable untuk koneksi database? Untuk menambahkan environment variable di Heroku, kamu bisa pergi ke bagagian settings, lalu klik reveal config vars.

Environment Variable

Kamu akan melihat satu buah environment variable bernama CLEARDB_DATABASE_URL. Itu adalah url database yang berisi informasi host, username, password, dan nama database untuk aplikasi kita. Berikut ini adalah url yang saya dapatkan.

mysql://b7bb6e08f03abf:[email protected]/heroku_5e5f415bfad2425?reconnect=true

Dari url tersebut kita dapatkan informasi database berikut:

host: us-cdbr-east-06.cleardb.net
username: b7bb6e08f03abf
password: 749ff694
database: heroku_5e5f415bfad2425

Tambahkan host, username, password, dan database sebagai environment variable di aplikasi heroku kita sehingga menjadi seperti berikut ini.

Environment Variable

Note: Jangan pakai informasi database saya ya karena database dan project saya hapus setelah selesai menulis tutorial ini, jadi tidak akan berfungsi.

Mendeploy Aplikasi Menggunakan Metode GitHub

Setelah menyiapkan project di Heroku, dari bagian settings mari kita berpindah ke bagian deployment. Sebelumnya pastikan kamu sudah commit dan push perubahan di lokal kamu ke GitHub ya.

Pada bagian deployment -> deployment method, pilih GitHub. Jika pertama kali, kamu akan diminta mengkoneksikan akun GitHub kamu ke Heroku. Setelah GitHub terhubung, kamu akan diminta untuk memilih repositori mana yang ingin di deploy. Silahkan pilih akun github dan cari nama repositori kamu, kemudian klik connect.

Deployment

Setelah klik connect, maka akan muncul tampilan berikut ini.

Deployment

Klik Enable Automatic Deploys agar heroku secara otomatis mendeploy ulang ketika terjadi perubahan di GitHub.

Terakhir, plih branch mana yang ingin kamu deploy, lalu klik Deploy Branch.

Proses deployment akan dimulai.

Deployment

Proses deployment selesai.

Deployment

Setelah deployment selsai, klik View untuk melihat mengakses aplikasi kita.

Berikut ini adalah aplikasi yang telah saya deploy.

Deployment

Mengakses enpoint /api/books untuk melihat data buku.

Deployment

Di situ data bukunya masih kosong ya, karena memang belum ditambahkan data apapun.

Berikut ini hasilnya ketika saya telah menambahkan satu data buku. Kamu bisa mencoba semua API endpoint yang ada untuk menguji apakah aplikasi dapat berfungsi dengan baik.

Deployment

Selesai…

Selamat, sekarang kamu sudah bisa mendeploy aplikasi Node.js di Heroku. Paket gratis yang diberikan oleh Heroku dapat kamu manfaatkan untuk mencoba aplikasi yang sudah kamu buat.

Mencoba mendeploy aplikasi di server internet sangat bermanfaat untuk menguji apakah aplikasi kita benar-benar bisa berjalan saat diupload ke server. Selain Heroku, masih tersedia beberapa layanan gratis yang bisa di manfaatkan, silahkan eksplorasi dan bereksperiment yaa!

Sampai jumpa di postingan selanjutnya.

Source code untuk tutorial ini dapat kamu lihat di sini.

Ingin Berdiskusi?

Yuk bergabung di Grup Telegram Ruang Developer atau mulai diskusi melalui GitHub. See You!

Dapatkan contoh source code project backend, frontend, atau fullstack untuk kamu amati, tiru, dan modifikasi sesuka hati. Klik untuk melihat detail!
comments powered by Disqus

Berlangganan Gratis

Kamu akan menerima email update dari Ruang Developer

Beri Dukungan

Beri dukungan, dapatkan full source code project web untuk bahan referensi, tiru, dan modifikasi.
Lightbox