Cara mudah hosting gratis dengan Heroku

UPDATE:

Mulai 28 November 2022, Heroku akan menghapus versi gratis. Jadi tip dan trik di bawah ini kelak tidak akan bisa digunakan lagi.

Baca : Heroku akan hentikan versi gratis

Heroku adalah sebuah layanan berbasis komputasi awan, yang menyediakan Platform as a Service. Bahasa sederhananya adalah, Heroku menyediakan platform yang sudah siap untuk digunakan tanpa perlu banyak kerumitan. Artinya pengguna hanya perlu fokus bagaimana membuat aplikasi kemudian mengatur bagaimana aplikasi tersebut di deploy, tanpa perlu direpotkan dengan infrastruktur atau sejenisnya. Jadi, secara umum Heroku sebenarnya sama saja dengan penyedia hosting lain yang basisnya Cpanel atau sejenisnya. Yang berbeda hanya cara deploy-nya saja. Deploy di sini maksudnya adalah, proses build (jika perlu) dan upload aplikasi/web ke server secara otomatis.

Sampai tulisan ini ditulis, Heroku masih menyediakan service gratis, sehingga Anda masih bisa menggunakan Heroku untuk hosting secara gratis web statis Anda atau bahkan webapp dinamis yang menggunakan database. Tentu saja karena gratis, maka ada beberapa ketentuan khusus yang harus Anda terima. Kali ini kita hanya akan membahas bagaimana cara meng-hosting sebuah web statis di Heroku secara gratis.

0. Install Git

Pastikan Anda sudah meng-install git di komputer Anda. Hal ini dikarenakan proses deploy aplikasi/web dan beberapa operasional lain di Heroku dilakukan dengan menggunakan git dan heroku-cli. Silahkan unduh dan install git dari : git-scm.com/downloads . Pastikan Anda meng-install Git sesuai dengan sistem operasi Anda.

Cara mudah hosting gratis dengan Heroku, PHP, Node.js

1. Install heroku-cli

Untuk mempermudah pengguna dalam melakukan operasional dan deploy aplikasi/web, maka Heroku menyediakan heroku-cli. Silahkan anda install heroku-cli yang sesuai dengan sistem yang Anda gunakan di sini : devcenter.heroku.com/articles/heroku-cli#download-and-install.

2. Mendaftar ke Heroku

Jika Anda belum memiliki akun di Heroku, maka silahkan daftar terlebih dahulu. Pastikan Anda tidak lupa melakukan aktivasi akun Heroku menggunakan link yang dikirim ke email Anda.

Seperti inilah kira-kira tampilan depan Heroku jika pendaftaran heroku Anda berhasil.

3. Menyiapkan kode

Sampai dengan tulisan ini ditulis, Heroku hanya men-support aplikasi/web yang berupa server based, seperti node.js, php, ruby, go, java dan lain-lain. Jadi, jika aplikasi Anda hanya berupa web statis, maka secara default tidak bisa dijalankan di Heroku. Web/aplikasi Anda tersebut harus dibuat sedemikian sehingga menjadi server based. Salah satu cara yang paling mudah adalah dengan menggunakan php. Anda cukup meng-include file html anda ke dalam file index.php. Seperti contoh di bawah ini.

Misalkan web yang kita buat hanyalah landing page saja yang terdiri atas file index.html dan beberapa file css atau js, seperti contoh di bawah ini.

index.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
  </body>
</html>

Silahkan buat file index.php di dalam folder yang sama dengan file index.html. Kemudian include file index.html tersebut.

index.php

<?php
include_once("index.html");

Kemudian buat file composer.json seperti layaknya anda membuat aplikasi server based yang menggunakan framework php, seperti laravel. Untuk keperluan ini, maka file composer.json ini minimal berisi object kosong. File composer.json ini yang akan memberitahu server Heroku bahwa aplikasi/web yang kita buat menggunakan "server php".

composer.json

{}

Kira-kira struktur hasil akhirnya seperti ini.

4. Deploy

4.1 Heroku Login

Langkah pertama untuk memulai deploy adalah dengan login ke dalam Heroku dengan menggunakan heroku-cli yang sudah Anda download dan install di atas. Jika belum, maka silahkan kembali ke poin nomor 1 di atas. Silahkan buka terminal Anda. Jika anda menggunakan editor seperti VSCode atau yang sejenis, maka Anda bisa langsung membuka terminal di sana. Untuk VSCode, silahkan klik menu view > terminal.

Agar selanjutnya lebih mudah, maka di dalam terminal tersebut, silahkan change dir ke dalam folder aplikasi/web anda (jika Anda menggunakan terminal VSCode, maka secara otomatis akan berapa di dalam folder project Anda). Kemudian jalankan perintah heroku login.

heroku login

Kemudian tekan sembarang tombol pada saat tulisan : Press any key to open up the browser to login or q to exit

Setelah anda menekan sembarang tombol, maka browser default anda akan terbuka (jika saat itu belum terbuka), dan menuju halaman login. Silahkan klik tombol login tersebut.

Jika pada browser tersebut ternyata Anda sudah login, maka Anda tidak perlu lagi memasukkan username dan password, dan secara otomatis Anda akan login ke heroku-cli. Jika pada browser tersebut Anda belum login, maka silahkan masukkan username dan password seperti biasa.

Jika proses login berhasil, silahkan tutup tab browser tersebut. Berikut ini contoh hasil di terminal jika proses login Anda berhasil. Tertera email dari akun yang Anda gunakan untuk login.

4.2 Init git

Jika anda belum meng-inisialisasi git di dalam folder web Anda, maka silahkan jalankan perintah git init.

git init

4.3 Create Heroku App

Masih di dalam terminal dan di dalam folder aplikasi/web, jalankan perintah heroku create untuk membuat project/aplikasi baru di Heroku.

heroku create

Perintah diatas akan membuat project baru di server heroku, dimana hasil dari perintah di atas jika berhasil adalah dua buah url dari project tersebut. Yang pertama adalah url dari aplikasi/web, biasanya url dalam format <id unique>.herokuapp.com. Sedangkan url yang lainnya, adalah url dari repository git project Anda di server Heroku.

Pada contoh diatas, aplikasi/web yang saya buat akan dapat diakses pada url : https://rocky-reaches-14701.herokuapp.com . Jika url tersebut dibuka di Browser, maka kurang lebih tampilannya adalah tampilan default seperti contoh di bawah ini.

Kenapa tampilannya masih default, hal ini dikarenakan kita belum men-deploy aplikasi/web ke heroku, baru sekedar membuat project baru.

Seperti disebutkan diatas, perintah heroku create sekaligus akan menambahkan remote baru yang mengarah ke repositori git di heroku. Untuk mengecek lebih jelas remote git tersebut, Anda bisa menggunakan perintah git remote -v.

git remote -v

4.4 Push project ke Heroku

Setelah project siap, maka langkah selenjutnya adalah mem-push aplikasi/web yang kita buat ke repositori git di heroku. Silahkan commit semua perubahan yang anda inginkan untuk di push dengan perintah git add . dan git commit -m.

git add .
git commit -m "Pesan dari commit yang anda inginkan"

Kemudian push perubahan Anda ke heroku untuk memulai proses deploy, dengan perintah git push heroku master.

git push heroku master

Perintah git push ini selain mem-push perubahan ke repository heroku, juga akan secara otomatis men-trigger proses deployent di heroku (dimana bisa Anda tentukan proses apa saja yang musti dilakukan pada saat proses deploy di server heroku).

Jika proses deploy berjalan lancar, maka dalam aplikasi/web Anda akan secara otomatis terupdate.

5. Update dan redeploy

Sampai di sini, maka Anda sudah berhasil melakukan hosting dan deployment secara otomatis ke Heroku. Selanjutnya, seperti biasanya, Anda dapat melakukan update dan commit aplikasi/web seperti biasa. Dan jika dirasa sudah waktunya di deploy, Anda hanya perlu. mengulang poin nomor 4.4 di atas, yaitu melakukan commit (jika belum) dan push ke heroku.

CATATAN.

Jika Anda masih kesulitan terhadap perintah-perintah git, maka sangat disarankan untuk mempelajari lebih lanjut perintah perintah dasar dari git. Sehingga penjelasan di atas bisa lebih mudah dipahami. Cukup dimulai dengan apa itu git, git init, git add, git commit dan git push.

Kesimpulan.

Service gratis yang disediakan Heroku sangat cukup untuk memenuhi kebutuhan eksperimen atau sekedar mencoba-coba framework atau demo portal atau sejenisnya.
Proses deployment aplikasi/web mudah dipahami dan dapat dijalankan dengan mudah dan cepat.
Kecepatan akses aplikasi/web versi gratis ini termasuk sangat cepat jika dibandingkan dengan penyedia hosting gratisan pada umumnya.

Sekian tip dan trik kali ini, selama mencoba dan semoga yang sedikit ini bermanfaat.

Sumber :

devcenter.heroku.com