Membuat Proyek Pertama di Heroku
Efendi Hariyadi 7 Maret 2017
Heroku adalah sebuah cloud platform yang menjalankan bahasa pemrograman tertentu, Heroku mendukung bahasa pemrograman seperti Ruby, Node.js, Python, Java, PHP, dan lain-lain.
Heroku termasuk ke dalam kriteria Platform As A Service (PaaS), sehingga bagi anda yang ingin melakukan deploy aplikasi ke heroku cukup hanya dengan melakukan konfigurasi aplikasi yang ingin di deploy dan menyediakan platform yang memungkinkan pelanggan untuk mengembangkan, menjalankan, dan mengelola aplikasi tanpa kompleksitas membangun dan memelihara infrastruktur yang biasanya terkait dengan pengembangan dan peluncuran aplikasi
Manfaat Heroku
Manfaat menggunakan Heroku adalah layanannya yaitu menjalankan script app langsung tanpa memerlukan setting yang sangat rumit, memungkinkan pengembang aplikasi lebih fokus pada kode aplikasi mereka, tanpa terlalu dipusingkan dengan arsitektur dan server.
Akan lebih mudah jika kita coba menyederhanakan seperti ini :
- saya ingin live test aplikasi saya tapi tidak menggunakan domain dulu karena ini untuk testing karena masih dalam tahap developing ada testing online sebelum menuju production.
- Saya tidak punya vps untuk mencoba app saya
- Vps saya tidak ada service atau library yang dibutuhkan oleh app saya
- saya mau demo dengan client dan app nya harus onlinekan, saya tapi saya tidak punya server/vps maklum masih baru-baru menjadi freelance
- Perusaahan tempat saya bekerja meminta sebelum di deploy atau di install ke dalam server utama diharuskan untuk berjalan dengan lancar dalam server testing dengan kriteria server tertentu
- dan lain lain.
Dari mana harus memulai
Yang jelas di dalam komputer atau laptop yang kita gunakan sudah terinstall git karena app kita terhubung Heroku melalui git. Skenario penggunaan Heroku dapat dijelaskan seperti berikut:
- Register User di Heroku
- Instalasi heroku tolbet / Heroku CLI
- Kita akan clone projek kita di git server seperti github, bitbucket atau gitlab terserah saja, atau kita buat projek baru untuk di running di heroku
- Menghubungkan git lokal dengan heroku
- Deploy dan Testing
Baca juga: Belajar Git Secara Interaktif Lewat Dua Situs Ini
Tahap 1 Register User
Buat User di Heroku
Tahap 2 Instalasi Heroku
Download and install Heroku
- OS X Homebrew
brew install heroku - OS X Installer : download di https://cli-assets.heroku.com/branches/stable/heroku-osx.pkg
- Debian / Ubuntu
sudo apt-get install software-properties-common # debian only sudo add-apt-repository "deb https://cli-assets.heroku.com/branches/stable/apt ./" curl -L https://cli-assets.heroku.com/apt/release.key | sudo apt-key add - sudo apt-get update sudo apt-get install heroku
bila selesai instalasi cek di console atau command prompt dengan command heroku --version. Pada laptop saya resultnya heroku-cli/5.6.28-2643c0a (linux-amd64) go1.7.5. Laptop saya linux jadi bisa saja hasil nya berbeda dengan komputer lainnya. Jika instalasi berjalan lancar akan muncul hasil dari command heroku --version adalah heroku-cli/x.y.z dimana x.y.z adalah versi dari heroku-cli
Tahap 3 Buat Projek atau clone
Kita akan membuat projek sederhana dengan nodejs dan npm serve static file with nodejs (menampilkan halaman statis dengan node js). Pastikan komputer telah terinstall nodejs dan npm di dalam console. Buat folder baru di komputer untuk proyek kita. Pada tutorial ini saya menggunakan nama codepolitan-heroku untuk nama folder dan juga nama aplikasi. Gunakan nama lain selain nama ini, karena nama aplikasi akan digunakan sebagai subdomain aplikasi di Heroku. Kemudian masuk ke dalam folder tersebut melalui console. Kemudian ketikkan perintah npm init -y. Console akan menampilkan output dari inisiasi project oleh npm.
fendi@alfariz-laptop:~/codepolitan-heroku$ npm init -y Wrote to /home/fendi/codepolitan-heroku/package.json: { "name": "codepolitan-heroku", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "description": "" } fendi@alfariz-laptop:~/codepolitan-heroku$
Penjelasan : Pada contoh di atas kita meng-generate package.json di dalam direktori code /codepolitan-heroku. Tahap selanjutnya melalui npm kita akan menambahkan library pendukung melakukan serve static file dengan node js yaitu library pendukung node-static. Jalankan perintah npm install node-static --save.
fendi@alfariz-laptop:~/codepolitan-heroku$ npm install node-static --save codepolitan-heroku@1.0.0 /home/fendi/codepolitan-heroku └─┬ node-static@0.7.9 ├── colors@1.1.2 ├── mime@1.3.4 └─┬ optimist@0.6.1 ├── minimist@0.0.10 └── wordwrap@0.0.3 npm WARN codepolitan-heroku@1.0.0 No description npm WARN codepolitan-heroku@1.0.0 No repository field.
Perintah npm install node-static --save dengan opsi --save akan membuat dependencies otomatis di sertakan dalam file package.json kita sehingga json hasil generate dari npm init -y tadi akan berubah menjadi
{ "name": "codepolitan-heroku", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "description": "", "dependencies": { "node-static": "^0.7.9" } }
Kemudian kita akan membuat file index.js yang nantinya akan di start dari npm. Kamu dapat menggunakan editor kesukaan seperti Atom atau Sublime Text. Isi file index.js seperti ini:
var static = require('node-static'); var file = new static.Server(); require('http').createServer(function(request, response) { request.addListener('end', function() { file.serve(request, response); }).resume(); }).listen(process.env.PORT || 5000);
Baca juga: 10 Text Editor yang Free (dan Berbayar) untuk Pemrograman
Pada bagian var file = new static.Server(); saya isi default. Kita dapat melakukan serve static file custom misalnya "halaman.html" maka ditulis menjadi var file = new static.Server('halaman.html'); dengan asumsi ada file halaman.html dalam direktori proyek kita. Karena kita menggunakan nilai default maka berarti harus ada file index.html. Buat dulu file index.html dan isi dengan kode berikut ini, atau apapun yang Kamu inginkan:
<h1>codepolitan</h1>
Setelah itu kita uji terlebih dahulu di lokal sebelum di hubungkan dengan heroku. Jalankan perintah berikut untuk menjalankan file:
node index.js
Bila tidak ada muncul error di console, coba buka pada browser dengan alamat http://localhost:5000. Maka seharusnya pada browser akan tampil tulisan seperti isi file index.html.
Selanjutnya masih tahap uji coba, kita akan merubah package.json untuk menambahkan start script. Ini adalah bagian penting karena heroku memahami script start application dari npm. Ubah package.json menjadi seperti ini:
{ "name": "codepolitan-heroku", "version": "1.0.0", "main": "index.js", "scripts": { "start": "node index.js" }, "keywords": [], "author": "", "license": "ISC", "description": "", "dependencies": { "node-static": "^0.7.9" } }
seperti kita lihat ada perubahan pada bagian script "start": "node index.js" karena ini akan dibutuhkan oleh heroku untuk menjalankan app kita.
Tahap 4 menghubungkan git lokal dengan heroku
ini bagian penghubung app kita dengan heroku cloud. Masih di dalam folder proyek kita tadi codepolitan-heroku, pada console jalankan perintah berikut untuk menginisiasi repositori git:
git init
Kemudian login ke Heroku dengan perintah heroku login:
~/codepolitan-heroku$ heroku login Enter your Heroku credentials. Email: efendi.hariyadi@gmail.com Password (typing will be hidden): Logged in as efendi.hariyadi@gmail.com
Terakhir buat instance di Heroku dengan perintah heroku create nama-app. Ganti nama-app dengan nama aplikasimu sendiri:
~/codepolitan-heroku$ heroku create codepolitan-heroku Creating ⬢ codepolitan-heroku... done https://codepolitan-heroku.herokuapp.com/ | https://git.heroku.com/codepolitan-heroku.git
Seperti yang telah saya sampaikan sebelumnya heroku cli terhubung dengan git. Pada saat kita membuat app dengan perintah heroku create nama-app secara otomatis heroku manambahkan git remote dengan url reponya adalah https://git.heroku.com/codepolitan-heroku.git dan webapp-nya adalah https://codepolitan-heroku.herokuapp.com/. Seperti sudah saya jelaskan di awal, nama codepolitan-heroku adalah nama folder sekaligus nama aplikasi yang saya gunakan untuk tutorial ini. Karena nama aplikasi akan menjadi subdomain dari URL proyek kita di Heroku.
Namun kita masih perlu melakukan push proyek kita ke server heroku. Pastikan dulu apa nama remote kita dengan memanggil perintah git remote -v. Seharusnya akan muncul seperti ini:
heroku https://git.heroku.com/codepolitan-heroku.git (fetch) heroku https://git.heroku.com/codepolitan-heroku.git (push)
Seperti pada umumnya git, kita bisa saja misalnya manambahkan remote misalnya ke github contoh git remote add github https://github.com/nama-user/codepolitan-heroku.git. Lalu apakah kita bisa clone app kita di heroku dengan git clone https://git.heroku.com/codepolitan-heroku.git coba-heroku-clone? Tentu saja bisa, dengan asumsi kita sudah login dengan heroku login.
Tahap 5 Push app ke Heroku dan Testing
Saya menggunakan istilah push karena untuk mengirimkan ke heroku kita melakukan push app kita. Perhatikan bahwa pada saat kita mem-push aplikasi kita ke Heroku, Heroku akan melakukan proses instalasi package (menjalankan perintah npm install) untuk aplikasi kita. Sehingga kita harus membuat file .gitignore untuk meng-ignore folder node_modules. Buat file .gitignore pada root folder aplikasi dan isi dengan konten seperti ini:
/node_modules
Seperti saat menggunakan git pada umumnya, kita harus add file lokal kita dan semua perubahannya menggunakan perintah git add . . Kemudian commit dengan perintah git commit -m "push proyek ke heroku". Pada console saya tampil seperti ini:
~/codepolitan-heroku$ git add . ~/codepolitan-heroku$ git commit -m "push proyek ke heroku" [master (root-commit) e2ea87a] push codepolitan-heroku ke heroku 4 files changed, 25 insertions(+) create mode 100644 .gitignore create mode 100644 index.html create mode 100644 index.js create mode 100644 package.json ~/codepolitan-heroku$
Ingat karena nama remote kita adalah heroku (dapat dicek di git remote -v) maka kita akan push dengan perintah git push heroku master (saya juga pernah kelupaan karena terbiasa dengan git push origin master).
fendi@alfariz-laptop:~/codepolitan-heroku$ git push heroku master Counting objects: 3, done. Delta compression using up to 4 threads. Compressing objects: 100% (3/3), done. Writing objects: 100% (3/3), 324 bytes | 0 bytes/s, done. Total 3 (delta 2), reused 0 (delta 0) remote: Compressing source files... done. remote: Building source: remote: remote: -----> Node.js app detected remote: remote: -----> Creating runtime environment remote: remote: NPM_CONFIG_LOGLEVEL=error remote: NPM_CONFIG_PRODUCTION=true remote: NODE_VERBOSE=false remote: NODE_ENV=production remote: NODE_MODULES_CACHE=true remote: remote: -----> Installing binaries remote: engines.node (package.json): unspecified remote: engines.npm (package.json): unspecified (use default) remote: remote: Resolving node version 6.x via semver.io... remote: Downloading and installing node 6.10.0... remote: Using default npm version: 3.10.10 remote: remote: -----> Restoring cache remote: Loading 2 from cacheDirectories (default): remote: - node_modules remote: - bower_components (not cached - skipping) remote: remote: -----> Building dependencies remote: Installing node modules (package.json) remote: remote: -----> Caching build remote: Clearing previous node cache remote: Saving 2 cacheDirectories (default): remote: - node_modules remote: - bower_components (nothing to cache) remote: remote: -----> Build succeeded! remote: -----> Discovering process types remote: Procfile declares types -> (none) remote: Default types for buildpack -> web remote: remote: -----> Compressing... remote: Done: 13.5M remote: -----> Launching... remote: Released v4 remote: https://codepolitan-heroku.herokuapp.com/ deployed to Heroku remote: remote: Verifying deploy... done. To https://git.heroku.com/codepolitan-heroku.git e2ea87a..16de7c1 master -> master
Tahap 4 Test di Browser
Silakan buka browser dengan URL nama-app.herokuapp.com, seperti contoh hasil proyek tutorial ini https://codepolitan-heroku.herokuapp.com. Kamu juga dapat membuka aplikasi dengan memanggil perintah heroku open pada console dan aplikasi akan otomatis dibukakan di browser.
Bila sukses dan tidak muncul application error di browser berarti push kita berhasil. Bila tidak, coba kembali ke console dan cek logs dengan perintah heroku logs dan lihat error apa yang tercatat di log. Contoh error karena lupa membuat start script 2017-03-02T18:18:42.555362+00:00 app[web.1]: npm ERR! missing script: start. Error tersebut muncul karena kita lupa menambahkan "start": "node index.js" di file package.json.
Heroku mendungkung berbagai macam platform, serta pengolahan database beraneka macam sesuai dengan kebutuhan app kita. Heroku juga mendukung Continuous delivery, Continuous delivery dengan Heroku Flow dan pipelinenya. Tidak salah rasanya kita menjadikan heroku salah satu environment kita dalam mengerjakan projek.
Referensi: