Deploy WEB Statis dengan NGINX pada Heroku

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
$ cp -r ../your_html_project/* ./app/
$ heroku create yourapps
$ heroku buildpacks:add heroku-community/nginx -a yourapps
$ 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

Setelah unicorn.rb terbuat, silahkan buat 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 yourapps
$ 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

6. GIT Repository :

Jika kalian menginginkan source code silahkan kunjungi github saya.

$ git clone https://github.com/gilangvperdana/Nginx-Heroku

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 web

Jika ingin melihat log keseluruhan :
$ heroku logs --tail

Kesimpulan :

Heroku adalah platform Public Cloud Service berbasis PAAS yang mana bisa hosting berbagai macam aplikasi web/framework dengan menggunakan/memanfaatkan “build-pack” yang bisa kalian cari pada GitHub Heroku dengan repositori yang menyangkut nama heroku-buildpack. Sesuaikan dengan kebutuhan kalian, karena pada dasarnya konsep kerjanya seperti buildpack nginx ini.

Terima kasih kepada para pembaca, sekian dari saya.