Cara Deploy AGC Nodejs Di Situs Heroku

Langsung saja tanpa basa basi, silahkan ikuti step by step berikut ini :

1. Buat Akun Github

untuk step ini saya rasa tidak perlu saya jelaskan. silahkan buat akun baru github. Bagi yang sudah ada akun silahkan login.

2. Buat Repository

Nah, disini kamu harus membuat repository baru sebagai tempat wadah penyimpanan file agc nodejs yang nantinya semua file ini akan di jalankan di situs heroku. Berikut ini cara membuat repository bagi yang baru mengenal github.

  • Silahkan klik icon profil di pojok kanan atas, lalu klik "your repository"

step 1 - cara buat repository github.jpg

  • Selanjutnya, klik tombol "New" seperti pada gambar berikut :

step 2 - cara buat repository github

  • Selanjutnya di bagian "Repository Name", isikan dengan nama yang kamu inginkan. Lalu klik tombol "create repository".

step 3 - cara buat repository github

3. Download Aplikasi Github Dekstop, Lalu Kaitkan ke Akun Github Kamu.

Aplikasi Github Dekstop ini akan kita gunakan untuk melakukan upload file-file agc nodejs kita ke repository github yang sebelumnya telah kita buat. Selain itu, Aplikasi Github Dekstop ini juga akan kita gunakan untuk melakukan perubahan file-file agc nodejs nantinya. sehingga ketika file-file agc ini kita rubah melalui pc maka, file-file yang ada di repository github juga ikut berubah.

Nah silahkan ikuti panduan berikut ini untuk melakukan instalasi aplikasi akun github dekstop serta mengaikan akun github kita ke aplikasi ini.

  • Silahkan download Aplikasi Akun Dekstop DISINI.

step 1 - cara mengaitkan akun github ke aplikasi github dekstop

  • Disini saya menggunakan windows 10 (64 bit). Silahkan kamu download sesuai versi pc kamu.
  • Setelah terinstal, silahkan klik tombol "Sign in to Github.com".

step 2 - cara mengaitkan akun github ke aplikasi github dekstop

  • Selanjutnya kamu akan diarahkan menuju browser untuk membuka halaman autorisasi. Silahkan klik tombol "Authorize Desktop".

step 3 - cara mengaitkan akun github ke aplikasi github dekstop
  • Lalu klik tombol "Finish".
step 4 - cara mengaitkan akun github ke aplikasi github dekstop

3. Upload File AGC Nodejs Ke Repositor

  • Di bagian kolom pencarian, silahkan cari repository yang sebelumnya telah kamu buat (Lihat poin nomor 2 di atas). Karena sebelumnya saya telah membuat repository bernama "agcnodejs", maka saya akan mencari nama repository ini di bagian search.
step 5 - cara mengaitkan akun github ke aplikasi github dekstop
  • Jika sudah ketemu, silahkan kamu klik repository tersebut, lalu klik tombol di bawahnya yang bertuliskan "Clone .....bla bla bla....".
step 6 - cara mengaitkan akun github ke aplikasi github dekstop
  • Lalu akan muncul tampilan popup seperti gambar di bawah, lalu klik lagi tombol "Clone".
step 7 - cara mengaitkan akun github ke aplikasi github dekstop

  • Setelah itu, silahkan klik tombol "Show in Explorer" seperti gambar berikut :

step 8 - cara mengaitkan akun github ke aplikasi github dekstop

  • Setelah itu akan terbuka sebuah jendela explorer tempat dimana file-file repository yang telah kita clone sebelumnya. Lihat gambar berikut.

step 9 - cara mengaitkan akun github ke aplikasi github dekstop

  • Setelah itu, silahkan kamu buka file bernama "AGC NODEJS HEROKU.zip" yang telah kamu dapatkan atau kamu beli dari developer. Jika kamu belum mendapatkan filenya, silahkan minta ke developer atau ke reseler.
  • Setelah itu extrac isinya dan pindahkan ke folder yang kita buka sebelumnya. Lihat gambar berikut.

step 10 - cara mengaitkan akun github ke aplikasi github dekstop

  • Setelah itu, kita kembali ke aplikasi github dekstop dan kamu akan melihat tampilan seperti berikut :

step 11 - cara mengaitkan akun github ke aplikasi github dekstop

  • Selanjutkan silahkan kamu isi di bagian kolom input "summary" dan "description". Isi dengan teks apa saja. Lalu klik tombol "Commit to main". Lihat gambar berikut.

step 12 - cara mengaitkan akun github ke aplikasi github dekstop

  • Lalu tunggu sampai loading yang ada di tombol selesai.
  • Jika loading pada tombol sudah selesai, silahkan kamu klik tombol "Publish branch". Lihat gambar berikut.

step 13 - cara mengaitkan akun github ke aplikasi github dekstop

  • Lalu silahkan tunggu sampai prsen loading pada tombol tersebut mencapai 100%. 

step 15 - cara mengaitkan akun github ke aplikasi github dekstop

  • Jika sudah selesai maka pada tahap ini kamu telah berhasil mengupload file agc nodejs versi heroku ke github. 
  • Untuk mengecek apakah file agc ini telah terupload atau belum, silahkan kamu buka repository github kamu di browser. Jika file telah terisi maka file telah sukses terupload. Lihat gambar berikut.

step 16 - cara mengaitkan akun github ke aplikasi github dekstop

Nah, nantinya file agc nodejs ini akan kita jalankan di website heroku. Sekarang silahkan kamu baca step selanjutnya dibawah ini.

4. Buat Akun Heroku

  • Silahkan buka situs untuk mendaftar heroku DISINI.
  • Lengkapi formulir pendaftaran, lalu klik tombol "CREATE FREE ACCOUNT".
  • Lalu verifikasi email. Klik link verifikasi yang ada di email kamu.
  • Lalu kamu akan di arahkan ke halaman untuk mengatur password login.
  • Isi password yang kamu inginkan lalu klik tombol "SET PASSWORD AND LOGIN".
  • Lalu klik lagi tombol "Click here to proceed".
  • Scrool ke bawah lalu tekan tombol "Accept".

step 1 - cara buat akun heroku

  • Selesai. Kamu telah berhasil membuat akun heroku.

step 3 - cara buat akun heroku

5. Buat Aplikasi Baru Di Heroku

  • Klik tombol "Create new app".
  • Masukkan nama aplikasi di bagian kolom input "App Name". Lalu klik tombol "Create App".

step 1 - cara buat aplikasi baru heroku
  • Scrool kebawah, Lalu di bagian "Deployment method" silahkan klik "icon Github". Lihat gambar berikut.
step 2 - cara buat aplikasi baru heroku
  • Lalu klik tombol "Connect to github". Lihat gambar berikut.
step 3 - cara buat aplikasi baru heroku
  • Lalu akan muncul tampilan popup autorisasi. Lalu klik tombol "Authorize Heroku".
step 4 - cara buat aplikasi baru heroku
  • Lalu di bagian area "Connect to GitHub" tepatnya di bagian kolom input "repo-name", silahkan kamu masukkan nama repository yang sebelumnya telah kamu buat di akun github. Karena sebelumnya saya telah membuat repository bernama "agcnodejs", maka saya masukkan nama repository ini kedalam kolom input tersebut. Lalu tekan tombol "Search". Lihat gambar berikut.
step 5 - cara buat aplikasi baru heroku

  • Setelah kamu klik tombol "search", jika repository ada, maka repository akan muncul dibawahnya, lihat gambar berikut.

step 6 - cara buat aplikasi baru heroku

  • Setelah itu, silahkan klik tombol "Connect" di samping nama repository. Lihat gambar berikut.

step 7 - cara buat aplikasi baru heroku

  • Setelah itu, Silahkan kamu scrool ke bagian atas, lalu klik menu "setting". Lihat gambar berikut.

step 8 - cara buat aplikasi baru heroku
  • Setelah itu, Scrool lagi kebawah menuju area "Buildpacks". Nah di bagian ini, silahkan kamu klik tombol "Add buildpacks". Lihat gambar berikut.
step 9 - cara buat aplikasi baru heroku

  • Lalu akan muncul tampilan popup. Lalu pilih klik icon "NODEJS", lalu klik tombol "Save Changes". Lihat gambar berikut.


  • Setelah itu, Srool lagi ke atas, lalu klik menu "Deploy". Lihat gambar berikut.

step 11 - cara buat aplikasi baru heroku


  • Setelah itu, scrool lagi ke bagian paling bawah yaitu bagian "Manual deploy". Lalu klik tombol "Deploy Branch". Lihat gambar berikut.

step 12 - cara buat aplikasi baru heroku

  • Setelah itu, tunggu sampai proses deploy selesai.
  • Setelah selesai, silahkan kamu klik tombol "view" untuk melihat hasilnya. Untuk posisi tombol "view" nya silahkan lihat gambar berikut.

step 13 - cara buat aplikasi baru heroku
  • Setelah kamu klik tombol "view". maka web agc kita pun sudah berjalan.
step 14 - cara buat aplikasi baru heroku

  • Setelah itu, silahkan balik lagi ke dashboard heroku. lalu scrool sedikit ke atas menuju bagian "Automatic deploys". Lalu silahkan klik tombol "Enable Automatic Deploy". Lihat gambar berikut.

step 15 - cara buat aplikasi baru heroku

    • Selesai. Kini kamu sudah berhasil menjalankan web agc ini menggunakan hosting gratis dari situs HEROKU.

Nah, bagaimana untuk melakukan settingan lain seperti costom domain, merubah target web, dll ?

Silahkan kamu simak panduan selanjutnya berikut ini.

6. Cara Costom Domain Di Heroku

  • Silahkan pergi ke menu "setting".Lihat gambar berikut.

step 1 - cara costom domain heroku

  • Lalu scrool ke bawah menuju area "Domains". Silahkan klik tombol "Add domain". lihat gambar berikut.

  • Setelah kamu klik, maka akan muncul area box slideshow di sebelah kanan. Silahkan kamu masukkan nama domain kamu di bagian kolom input "Domain name". Lalu klik tombol "next". Disini saya coba mengaitkan subdomain "agc-heroku.maskoding.com". Lihat gambar berikut.
step 3 - cara costom domain heroku

  • Setelah kamu klik tombol "Next". maka akan muncul tampilan error seperti berikut.

step 4 - cara costom domain heroku

  • Hal ini terjadi karena kamu belum memverifikasi metode pembayaran. Silahkan pergi ke menu "Account Setting > Billing" lalu masukkan informasi pemayaran.
  • Setelah kamu menambahkan informasi pembayaran, maka setelah kamu menekan tombol "next" pada step sebelumnya akan muncul tampilan seperti gambar berikut.

step 5 - cara costom domain heroku

  • Selanjutnya copy "DNS target" lalu klik "Back to domains".
  • Lakukan pointing "CNAME" di tempat kamu membeli domain (domainesa,rumahweb,cname,dll).
  • Setelah itu, silahkan tunggu sektar 1 jam. lalu coba buka domain yang baru kamu kaitkan barusan.
  • Selesai.