Selamat datang teman teman, kali ini saya akan mendokumentasikan bagaimana cara deploy web statis ecara gratis di Heroku dengan menggunakan Nginx sebagai web-servernya. Tanpa berlama lama, langsung saja ke praktik.

Environment :

1. Heroku Account

2. Heroku CLI

3. Text Editor (VS Code, etc)

4. Your Static WEB Project

Practice :

1. Instalasi Heroku CLI :

Digunakan untuk push berbagai kebutuhan aplikasi yang akan dideploy ke Heroku. Disini saya menggunakan Linux sebagai OS dan menggunakan VSCode sebagai Text Editor nya.

$ curl https://cli-assets.heroku.com/install-ubuntu.sh | sh

2. Login akun Heroku :

Silahkan login terlebih dahulu menggunakan credentials Heroku yang kalian miliki.

$ heroku login -i

Silahkan masukkan username, password kalian. Jika kalian menggunakan MFA kalian bisa gunakkan API Key yang ada pada akun setting kalian sebagai Password.

3. Siapkan Project WEB Statis :

Disini saya sudah menyiapkan project web statis saya untuk di-deploy menggunakan nginx nantinya. Setelah disiapkan, kita akan menambahkan beberapa file konfigurasi tambahan.

$ cd your_web_static_project

$ heroku create yourapps

$ heroku buildpacks:add heroku-community/nginx

$ touch Procfile

$ nano Procfile

 — -

web: bin/start-nginx-solo

 — -

Tambahkan direktori config lalu buat file bernama unicorn.rb dan nginx.conf.erb .

$ mkdir config
$ cd config/
$ touch unicorn.rb
$ nano unicorn.rb



$ touch nginx.conf.erb

4. Deploy :

Langkah terkahir adalah melakukan deploy dengan cara push ke GIT Repository yang disediakan oleh Heroku.

$ cd ..

$ git init

$ heroku git:remote -a yourapp

$ git add *

$ git commit -m “make it better”

$ git push heroku master

$ heroku ps:scale web=1

$ heroku open

5. Akses :

Silahkan akses pada https://yourapp.herokuapp.com

CheatSheet :

Jika setelah cek $ heroku ps lalu dyno tidak menjalankan web server secara otomatis, lakukan :

$ heroku ps:scale web=1

Jika ingin scalling dyno :

$ heroku ps:resize web=standard-2x

Jika ingin melihat logs proses :

$ heroku ps

Jika ingin melihat logs proses web :

$ heroku logs — ps worker

Jika ingin melihat log keseluruhan :

$ heroku logs — tail

Terima kasih kepada para pembaca, sekian dari saya.