Publish : 04 Mei 2020
Kode : T-021

Disclaimer : tutorial ini dibuat untuk testing web apps secara online, seluruh keterbatasan paket gratis tidak termasuk pembahasan pada tutorial ini. Silahkan untuk berlangganan paket berbayar agar lebih sesuai dengan kebutuhan apabila web apps tidak untuk testing.

Selain menggunakan hosting gratis seperti 000webhost, kita juga bisa menggunakan satu layanan cloud yang sudah terkenal di kalangan software engineer dan perusahaan-perusahaan ternama. Heroku (heroku.com) adalah salah satu cloud server yang menyediakan layanan gratis untuk mempublish aplikasi web yang sudah di deploy pada local. Tipe cloud server gratis ini memang tidak seunggul paket-paket yang berbayar di layanannya, tapi masih cukup untuk kebutuhan yang terbilang minim dan hanya sebagai uji coba web application yang sudah kita develop.

Untuk penjelasan lebih detail bisa kunjungi website heroku.com.

1.    Register Account

Jika kita merupakan pengguna awal tentu saja kita harus registrasi account seperti pada layanan hosting biasanya. Silahkan kunjungi website heroku.com, kemudian pada halaman utama akan terlihat tombol “SIGN UP” di slider ataupun di dalam menu.

Silahkan pilih salah satu saja sampai kita diarahkan ke halaman untuk daftar akun baru. Isi semua informasi yang dibutuhkan, namun pada form Role silahkan isi dengan Hobbyist dan Primary development language dengan bahasa pemrograman yang akan digunakan. Sebagai contoh permulaan kita akan coba publish website yii2, jadi kita memilih Primary development language adalah PHP.  

Setelah terisi semua form silahkan klik tombol “Create Free Account”.

Sesaat setelah itu kita akan ditujukan ke satu pemberitahuan untuk melakukan pengecekan akun yang sudah terdaftar di email. Hal ini berkaitan untuk memverifikasi alamat email dan kebenaran dari akun yang terdaftar di heroku.

Silahkan check email kamu, kemudian verify akun dengan mengklik tautan pada pesan yang diterima.

Setelah klik tautan, jangan di close tab tersebut karena kita akan memasukan password untuk login. Silahkan masukan password yang paling aman menurut kamu, tentunya berdasarkan rekomendasi dari heroku.com. Kalau saya sendiri menggunakan layanan password generator online, dengan syarat ada beberapa karakter yang saya tambahkan di depan atau belakang password yang sudah di generate. Silahkan googling dengan kata kunci password generator. Jika sudah silahkan klik tombol Set Password and Log in.

Pada halaman notifikasi silahkan klik tombol “Click here to proceed”, dan selamat anda akan secara otomatis login ke halaman dashboard dari heroku.com

2.    Create App

Create app adalah istilah yang biasa kita gunakan untuk membuat suatu project, didalamnya terdiri dari konfigurasi yang kita perlukan pada satu cloud server. Pada halaman dashboard silahkan anda klik tombol Create New App.

Pada bagian App Name, silahkan isi berdasarkan ketersediaan yang ada pada heroku, jika tidak tersedia kamu bisa membuat app name dengan kata yang lebih unik lagi. Pilih United States sebagai region dari server kita, kemudian klik Create app.

Selanjutnya kita akan diarahkan ke halaman deploy, yang mana adalah halaman untuk mempublish website local kita ke heroku. Sebelumnya kita tidak tahu method apa yang akan kita gunakan untuk mendeploy aplikasi web kita, sehingga kita disarankan pada 3 pilihan yaitu dengan Heroku Cli, Github dan Container Registry. Cara termudah yang bisa saya sarankan adalah menggunakan Heroku CLI karena cukup menginstall software heroku ke sistem operasi dan terhubung pada akun kita secara otomatis.

Silahkan download software heroku cli dengan klik tombol yang tersedia pada bagian Deploy using Heroku Git, atau click link ini :https://devcenter.heroku.com/articles/heroku-cli

Silahkan download berdasarkan sistem operasi yang kamu gunakan saat ini, pastikan sesuai agar tidak ada masalah saat instalasi software.

3.    Install Heroku CLI

Setelah berhasil terdownload, silahkan install software tersebut. Dalam hal ini karena saya menggunakan windows jadi saya akan memberikan tutorial pada sistem operasi windows saja.

Pilih semua komponen, kemudian klik next.

Secara default, destinasi folder instalasi adalah folder program files apabila kamu ingin mengubah folder instalasi silahkan browse dan  buat folder baru sesuai dengan keinginan kamu. Selanjutnya tekan tombol Install, tunggu hingga proses instalasi selesai.

Setelah instalasi selesai, klik tombol Close.

Sebelum lanjut ke tutorial di bawah, ada satu software yang wajib untuk di install yaitu git. Silahkan untuk download dan install secara pribadi, karena cara instalasi sangat mudah namun jika ragu silahkan baca dokumentasinya. Download software git pada link ini https://git-scm.com/.

4.    Upload Website Yii2

Kembali pada dashboard, secara default saat install sebenarnya website kita sudah bisa dilihat namun masih dalam format yang diberikan heroku pada paket penginstalan. Kamu bisa klik Open App pada tombol di samping kanan layar.

Lihat web pertama anda sudah ada, seperti gambar di bawah. Kita akan coba replace dengan web yang pernah kita develop di localhost laptop kita.

Silahkan kamu menuju folder website yii2 ataupun website PHP yang pernah kamu buat di local pc. Kemudian pada explorer pilih menu File, pilih Open Windows PowerShell.

Selanjutnya coba ketikan heroku pada terminal tersebut, jika benar akan tampil informasi software heroku cli.

Selanjutnya adalah login ke akun kita, dengan mengetikan heroku login. Akan terlihat pemberitahuan untuk menekan sembarang keyboard, tapi saya sarankan untuk menekan Enter saja.

Selanjutnya kita akan di arahkan ke halaman web utnuk login, lihatlah dan klik tombol login.

Login berhasil, sesuai dengan pemberitahuan yang ada pada page kamu dapat close tab tersebut..

Kembali pada terminal, jika masih ada pesan untuk login kamu cukup tekan enter beberapa kali sampai keluar dan yang hanya terlihat adalah alamat folder dari project yang kamu buat. Untuk mengecek apa benar sudah login ke akun kita, cukup ketikan saja heroku apps di dalam terminal akan terlihat apps yang pernah dibuat sebelumnya.

Untuk selanjutnya kamu boleh lihat halaman deploy di heroku, dan lihat pada bagian Deploy using Heroku Git, disitu ada cara yang cukup copy paste saja syntax nya ke terminal.

Karena kita sekarang sudah pada project localhost, kita tidak perlu lagi masuk ke folder lain (cd). Ketikan git init pada terminal untuk generate repository pada project kita ke git, atau kita bisa sebut inisialisasi repository.

Secara otomatis semua konfigurasi git sudah terisi di dalamnya, selanjutnya tambahkan repository project kita di heroku ke dalam project kita yang local dengan cara copy paste saja syntax heroku git:remote -a wfh-predatech yang ada di page deploy ke terminal.

.

Jika sukses akan tampil seperti gambar di bawah.

Selanjutnya pada terminal ketikan semua code berikut, tergantung pada apa yang terlihat di page deploy apps kamu. Seharusnya semua sama.

Sampai pada step 3 berhasil artinya sudah selesai terupload secara online. Karena saya mengupload framework yii2, maka heroku secara otomatis akan menginstall kebutuhan yang dibutuhkan untuk menjalankan yii2. Tapi tidak sepenuhnya otomatis, kita perlu juga menambah konfigurasi bila kita mengupload web framework ataupun website dengan dependency tertentu.

Setelah tahap ini selesai, kamu bisa buka kembali app kamu di heroku. Pada tutorial ini web yii2 saya sudah online namun butuh sentuhan lain yang bersifat optional untuk di ikuti.

 

5.    Optional Configuration

Karena ada error saat publish pertama kali web yii2, maka saya akan melakukan konfigurasi khusus untuk Yii2 framework. Masalah pada error tersebut adalah karena beberapa dependency tidak terupload ke server. Karena berkaitan dengan dependency, maka ada software yang perlu terinstal di OS kamu yaitu Composer. Composer berguna untuk menginstal secara otomatis library dari pihak ke-3 ataupun library yang dibutuhkan pada suatu web apps. Silahkan download dan install composer dari web https://getcomposer.org/ .

Selanjutnya saya akan update code composer.json pada project yii2 saya, kemudian memindahkan 2 dependency dari development ke require. Sebelumnya adalah seperti gambar berikut.

Lihat line 26 dan 27, dependency tersebut merupakan hal yang wajib ada di dalam yii2, sehingga ketika di deploy ke heroku akan ter-ignore secara otomatis. Caranya adalah dengan memindahkan 2 dependency tersebut ke element require seperti terlihat pada gambar berikut.

Selanjutnya adalah update file project yii2 agar dapat menginstall dependency tersebut, dengan cara ketikan composer update pada terminal.

Gambar diatas menyatakan kalau semua sudah terinstall, kemudian kita update repository git heroku dengan cara menambah file composer yang sudah kita update tadi menggunakan git. Cukup ketikan git add composer.lock composer.json kemudian enter dan git commit -m ‘updated composer.json’ kemudian enter.

Selanjutnya deploy project local dengan melakukan push ke repository heroku, ketikan git push heroku master pada terminal dan tunggu hingga proses build selesai.

Check kembali web app pada heroku, waaaahhhhh web sudah berjalan semestinya, dan tutorial untuk upload web berhasil.

6.    Db4free Mysql Database Integration

Saya memastikan web apps kita semua menggunakan database, dalam kasus ini saya anggap semua menggunakan database Mysql karena sangat familiar dan banyak digunakan oleh mahasiswa maupun akademis kampus. Akan tetapi untuk mengaktifkan layanan mysql di heroku harus memiliki credit card, maka dari itu saya akan menyarankan kamu menggunakan layanan database mysql gratis dari https://db4free.net/ .

Silahkan buka web tersebut dan register menggunakan email yang sama pada heroku saja. Register bisa mengikuti tautan berikut : https://db4free.net/signup.php .

Klik tombol Sign up setelah semua form terisi, dan akan ada notifikasi “Thank you for your registration! You will receive an email to confirm the registration.” yang menandakan registrasi berhasil. Silahkan check inbox di email yang terdaftar.

Dari email yang diterima, selanjutnya akan verifikasi akun kembali, silahkan klik tautan yang ada pada email seperti gambar diatas. Sehingga akan diarahkan ke informasi bahwa database sudah selesai dibuat.

Selanjutnya kita login ke phpmyadmin pada web tersebut, silahkan klik tautan berikut : https://db4free.net/phpMyAdmin/. Masukan username dan password yang sudah di regsiter pada form registration sebelumnya.

Setelah login anda akan melihat list database yang sudah dibuat, lihat gambar dibawah ini.

Selanjutnya adalah upload database yang kamu punya dan akan digunakan pada web apps di heroku.

Tahap selanjutnya adalah integrasi (konfigurasi) database di db4free ke web apps yang ada di heroku. Perlu kita ketahui, cara ini adalah melakukan remote database yang mana posisi server web apps berbeda dengan server untuk database.

Silahkan buka file konfigurasi database pada web apps kamu di lokal, kemudian set seperti berikut:

Host : db4free.net
Port : 3306
Database Name : nama database yang ada pada db4free
Username : nama user untuk login phpmyadmin di db4free
Password : password yang sudah di set ketika sign up/ password login phpmyadmin db4free

Dari konfigurasi diatas silahkan gunakan sesuai kebutuhan yang ada di file konfigurasi database project kamu di lokal. Berikut ini jika saya konfigurasi di yii2,

Simpan konfigurasi dan deploy kembali web lokal kita ke heroku dengan cara menggunakan git. Ketikan git add config/db.php kemudian enter, untuk config/db.php adalah alamat file yang diubah, jika kamu bingung kamu boleh ketikan git add  (symbol titik artinya add semua file) kemudian enter. Selanjutnya kita commit file yang ada perubahan tadi dengan cara ketikan git commit -m “update database” , ini adalah perintah untuk memberi komentar pada perubahan file.

Terakhir adalah deploy dengan cara ketik git push heroku master pada terminal dan tunggu proses deploy selesai.

Conclusion

Tutorial ini saya buat untuk orang yang hanya akan melakukan testing deploy pada web apps yang dibuat dan tidak diperuntukan pada hal-hal komersial. Karena ada keterbatasan layanan pada fitur gratis terutama limit dan masa penggunaan. Ada beberapa hal yang tidak saya jelaskan dalam tutorial terutama penggunaan git. Saya harapkan dapat mempelajari git lebih lanjut secara mandiri.

Original Create by: Hady Eka Saputra

Sumber Gambar