Pendahuluan

Pada materi kali ini, kita akan mempelajari cara melakukan deployment aplikasi Frontend dan Backend di local environment menggunakan VM yang telah didownload pada materi Day 1. Local deployment adalah deployment aplikasi di local server yang hanya dapat diakses dari jaringan lokal (LAN) dan tidak dapat diakses dari internet. Tujuan dari pembelajaran ini adalah supaya peserta dapat memahami langkah-langkah dasar melakukan deployment aplikasi Frontend dan Backend dan kemudian menerapkannya di real environment (cloud) yang akan dipelajari pada materi Day 4. 

Di dalam materi ini, kita akan berkenalan dengan konsep SSH, Nginx, dan pm2.

Download Demo App

Aplikasi yang akan digunakan di dalam deployment adalah aplikasi sederhana yang terdiri dari frontend dan backend. Aplikasi frontend dibuat dengan framework Vue JS, sedangkan aplikasi backend dibuat dengan framework Express JS.

Pertama-tama, silakan download aplikasinya di link berikut: https://drive.google.com/file/d/1mgMnR0inYk-v0j5HsUopH0oYuw44FBY1/view?usp=sharing

Setelah berhasil didownload, ekstrak filenya menggunakan aplikasi ekstraktor yang tersedia di komputer kalian. Setelah diekstrak, maka akan muncul folder yang bernama app yang berisi dua folder aplikasi dengan nama frontend dan backend.

Transfer App Ke VM

Setelah mengekstrak file aplikasi, kita harus memindahkannya ke VM. Ada beberapa cara yang dapat dilakukan, namun pada tutorial ini kita akan menggunakan metode scp. Scp adalah program yang memungkinkan kita melakukan transfer file dari satu komputer ke komputer lain melalui SSH. Syarat utamanya adalah komputer destinasi harus menjalankan SSH server. Untungnya, VM Debian 9 STC yang kita gunakan di dalam tutorial ini telah terinstal dengan SSH server jadi kita hanya tinggal menjalankan scp saja.

Langkah pertama adalah jalankan VM Debian 9 STC. Setelah VM berjalan, minimize windows VM-nya dan buka aplikasi CMD bagi kalian yang menggunakan Windows, atau terminal bagi kalian yang menggunakan Linux. Kemudian pindah ke direktori ke tempat folder app berada. Jika folder app berada di folder Downloads, maka jalankan perintah berikut ini:

• Windows : cd C:\Users\<nama user>\Downloads

• Linux : cd ~/Downloads

Setelah itu, jalankan perintah "scp -r app user@192.168.56.100:~" . Saat pertama kali menggunakan scp ke VM, akan ada pertanyaan untuk konfirmasi koneksi, jawab dengan yes. Setelah itu masukkan password dari user "user".

Jika password benar, maka proses transfer akan berjalan hingga selesai.

Setelah selesai, cek hasilnya dengan perintah ls di VM. Pastikan folder app ada di dalam list.

Akses VM Dengan SSH

Karena SSH server telah terinstal di VM, kita dapat memanfaatkannya. Dengan SSH, kita dapat mengakses VM (CLI) dari CMD di Windows atau Terminal di Linux. Manfaat dari mengakses VM dengan SSH antara lain, ukuran tampilan CLI yang lebih fleksibel dan dapat melakukan copy paste langsung dari host.

Untuk mengakses VM lewat ssh, jalankan perintah "ssh user@192.168.56.100". Kemudian masukkan password dari user user. 

Setelah berhasil login, maka kita akan mendapat prompt CLI dari VM. Untuk mengonfirmasi bahwa kita telah berada di VM, jalankan perintah ls dan pastikan folder app yang kita transfer sebelumnya berada di sana.

Untuk langkah selanjutnya kita akan terus mengakses VM dengan SSH dari host.

Install dan Konfigurasi MYSQL

Aplikasi backend yang kita punya menggunakan database MySQL. Karena MySQL belum terinstal, maka kita harus menginstalnya terlebih dahulu dengan perintah "sudo apt install mysql-server". Jika ada pertanyaan untuk konfirmasi instalasi, jawab dengan "y". Tunggu prosesnya hingga selesai.

Setelah itu, jalankan perintah "sudo mysql_secure_installation" untuk melakukan konfigurasi keamanan terhadap mysql, seperti menetapkan password untuk user "root". Langkah ini bukan hal wajib akan tetapi sangat dianjurkan.

Selain membuat password untuk user "root", akan ada pertanyaan keamanan lain dan jawab dengan "Y".

Setelah itu, kita akan coba mengakses MySQL server dengan perintah "sudo mysql -u root -p". Masukkan password untuk user "root" yang telah dibuat pada langkah sebelumnya. 

Setelah berhasil login, kita akan disuguhi prompt yang dapat kita gunakan untuk melakukan operasi seperti:

• Menampilkan database dan tabel.

• Menampilkan, menambah, mengubah, dan menghapus data dari table.

• Membuat dan menghapus user.

• Dan lain-lain.

Kalian tidak akan kesulitan pada tahap ini karena kalian sudah pasti mempelajari tentang MySQL di materi Backend dan Database.

Hal pertama yang akan kita lakukan adalah membuat database dan mengimport tabel yang berisi data-data dummy aplikasi backend. Hal ini dilakukan agar kita dapat menghemat waktu dari pembuatan tabelnya secara manual. Namun, untuk aplikasi backend yang memakai ORM seperti Prisma, proses ini tidak perlu dilakukan karena tabel akan dibuat otomatis. Namun, ORM tidak akan dibahas di sini.

Table yang akan diimport berada di dalam folder app/backend dengan nama pos_db.sql. 

Sebelum melakukan import, kita harus membuat database terlebih dahulu dengan nama yang sama yaitu "pos_db". Untuk membuat database pos_db, jalankan perintah "CREATE DATABASE pos_db;". Jika perintahnya benar, maka akan ada tulisan OK. Kemudian cek database yang telah dibuat dengan perintah "SHOW DATABASES;".

NOTE: 

Perintah di dalam MySQL server bersifat case insensitive, artinya huruf kecil dan huruf besar tidak dipermasalahkan dan menghasilkan output yang sama.

Database baru yang dibuat tidak memiliki data apapun alias kosong. Hal ini dapat kita konfirmasi dengan perintah "USE pos_db;" dan "SHOW TABLES;" secara berurutan.

Selanjutnya, kita akan melakukan import file pos_db.sql ke dalam database yang telah kita buat sebelumnya. Sebelum itu, kita harus keluar dari prompt MySQL server dengan perintah "exit". Kemudian masuk ke direktori "app/backend" dengan perintah "cd". Setelah itu, jalankan perintah "sudo mysql -u root -p pos_db < pos_db.sql". Perhatikan bahwa kita akan dimintai password dua kali. Password yang pertama adalah password untuk user "user" karena telah menggunakan perintah sudo. Password yang kedua adalah password dari user root di database MySQL.

Jika tidak ada pesan error maka import berhasil. Mari kita cek dengan masuk ke MySQL server dan menjalankan perintah berikut "USE pos_db;" untuk mengakses data database pos_db. Kemudian jalankan perintah "SHOW TABLES;" dan akan terlihat bahwa ada tabel baru yang bernama "product". Untuk melihat seluruh data di dalam table product, jalankan perintah "SELECT * FROM pos_db;"

Selanjutnya, kita akan membuat user baru. Saat ini, hanya ada satu user di dalam database yaitu "root".

User baru yang akan kita buat ini adalah user yang akan dipakai oleh aplikasi backend untuk mengakses database. Untuk membuat user baru, masukkan perintah "CREATE USER 'app'@'localhost' IDENTIFIED BY 'app';". Nama app yang pertama adalah nama user sedangkan app yang kedua adalah passwordnya. 

Setelah itu, kita akan memberikan hak ke user app untuk dapat mengakses database pos_db dengan perintah "GRANT ALL PRIVILEGES ON pos_db.* TO 'app'@'localhost';".

Setelah itu, kita coba login ke MySQL server dengan user "app". Silakan exit terlebih dahulu kemudian masukkan perintah "mysql -u app -p". Di sini kita tidak menggunakan sudo lagi. Setelah login, konfirmasi kehadiran database pos_db dengan perintah "SHOW DATABASES;".

Instalasi Node.js

Aplikasi demo yang kita pakai di dalam praktikum ini membutuhkan node.js untuk dapat berjalan. Akan tetapi node.js belum terinstal secara default di dalam VM. Oleh karena itu kita harus menginstal node.js terlebih dahulu.

Untuk menginstal node.js, kita akan memakai tool NVM (Node Version Manager), yaitu tool yang memungkinkan kita untuk menginstal node.js dengan versi yang kita inginkan dengan mudah. Dalam hal ini kita akan menginstal node.js versi 16. Untuk itu, kita harus menginstal NVM terlebih dahulu dengan perintah "wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash"

Untuk mengecek instalasi NVM, silakan keluar dari koneksi SSH dengan perintah exit lalu masuk kembali dengan membuat koneksi SSH yang baru. Setelah berhasil masuk kembali, masukkan perintah "nvm –version". Jika tidak ada error, maka versi nvm akan muncul dan artinya instalasi nvm berhasil.

Kemudian, kita dapat menginstal node.js versi 16 dengan perintah "nvm install 16".

Untuk mengecek instalasi node.js, jalankan perintah "node -v" dan "npm -v". Jika berhasil, kita akan mendapat output versi dari node.js dan npm yang terinstal. npm (Node Package Manager) adalah perintah yang akan kita pakai untuk menginstal dependensi aplikasi backend-nya..

Namun, saat VM di-reboot, maka node.js akan hilang atau ter-reset sehingga harus diaktifkan kembali dengan perintah "nvm use 16".

Untuk mengaktifkan node.js secara otomatis saat booting, jalankan perintah "nvm alias default 16".

Setup dan Konfigurasi Backend Dengan PM2

Selanjutnya, kita akan melakukan testing aplikasi. Testing yang dimaksud di dalam hal ini adalah testing untuk memastikan aplikasi backend dan frontend dapat berjalan dengan semestinya dan tidak terdapat error.

Hal pertama yang dilakukan adalah menjalankan backend. Akan tetapi, kita harus melakukan konfigurasi terhadap koneksi databasenya. Jalankan perintah "nano ~/app/backend/config/database.js" dan pastikan value dari key user dan password adalah "app" dan nama database adalah "pos_db".

Setelah itu, kita harus menginstal package yang diperlukan untuk menjalankan aplikasi backend dengan perintah "npm i" atau "npm install". Package yang akan diinstal tersebut tertera di dalam file "package.json".

Setelah itu, kita dapat menjalankan aplikasi backend dengan perintah "npm run start" atau "node index.js". Kedua perintah tersebut melakukan hal yang sama.

Untuk memastikan aplikasi backend telah berjalan dengan baik, maka kita dapat mengeceknya dengan perintah atau tool yang bernama "curl". Karena curl belum terinstal, maka kita instal terlebih dahulu. Namun sebelum itu, kita harus buka terminal baru dan konek ke VM dengan SSH. Setelah itu, jalankan perintah "sudo apt install curl".

Setelah curl terinstal, jalankan perintah "curl http://localhost:5000/products | json_pp". Jika yang muncul adalah list produk seperti gambar di bawah ini, maka aplikasi backend telah bekerja.

Meskipun aplikasi backend telah berfungsi dengan baik, namun cara yang kita gunakan untuk menjalankannya tidak disarankan untuk digunakan untuk production. Untuk men-deploy aplikasi backend ke production, maka kita memerlukan tool yang bernama PM2. PM2 adalah tool process manager yang akan menjalankan aplikasi backend kita. Kelebihan dari PM2 adalah ia dapat melakukan restart aplikasi secara otomatis saat terjadi downtime sehingga menjamin aplikasi backend akan berjalan secara terus menerus.

PM2 belum terinstal di VM, oleh karena itu mari menginstalnya dengan perintah "npm install pm2 -g".

Setelah itu, cek instalasinya dengan perintah "pm2 -v". Jika versinya muncul maka instalasi berhasil.

Sebelum menjalankan pm2, kita harus menghentikan proses backend yang kita jalankan sebelumnya (di terminal yang pertama) dengan menekan "CTRL+C".

Setelah itu, kita harus melakukan sedikit perubahan pada file "index.js" di dalam folder app/backend. Pada method listen, tambahkan “127.0.0.1” di argumen kedua. Perhatikan gambar di bawah ini. Gunakan perintah nano untuk mengedit : "nano ~/app/backend/index.js".

Setelah itu, mari jalankan kembali aplikasi backend dengan perintah "pm2 start ~/app/backend/index.js".

Untuk memastikan aplikasi backend berjalan, gunakan perintah curl seperti sebelumnya.

Dengan begitu, aplikasi backend telah di-deploy ke production. 

Setup dan Konfigurasi Frontend Dengan Nginx

Sekarang kita pindah ke direktori frontend dengan perintah "cd ~/app/frontend". Sebelum melakukan deploy aplikasi frontend, mari kita menginstal package yang dibutuhkan aplikasi terlebih dahulu dengan perintah "npm i" atau "npm install" dan tunggu proses sampai selesai.

Setelah itu, kita perlu melakukan perubahan base url pada file ~/app/frontend/src/main.js. Jalankan perintah "nano ~/app/frontend/src/main.js" dan ubah nilai variable baseUrl menjadi IP address dari VM yaitu "192.168.56.100" dan dengan port 8081.

NOTE:

Angka port 8081 dapat diganti dengan angka apa saja selama tidak dipakai oleh aplikasi lain dan berada dalam range 1025 ke atas.. Perhatikan gambar di bawah.

Langkah selanjutnya adalah melakukan build aplikasi frontend agar siap untuk di-deploy ke production. Untuk melakukan build, jalankan perintah "npm run build".

Hasil dari build tersebut adalah sebuah folder yang bernama "dist" yang berisi source code frontend yang telah dioptimasi untuk deployment.

Folder dist tersebut selanjutnya kita salin ke folder "/var/www/html" dengan perintah "sudo cp -r dist/* /var/www/html".

Selanjutnya, kita menginstal program "nginx". Nginx adalah aplikasi web server dan proxy yang digunakan untuk menjalankan aplikasi frontend dan menghubungkannya dengan backend melalui proxy. Namun, di VM telah ada web server lain yang terinstal, yaitu apache2. Oleh karena itu, kita harus menghapus apache2 terlebih dahulu kemudian menginstal nginx setelahnya.

Untuk menghapus apache2, jalankan perintah "sudo apt purge apache2". 

Setelah itu, instal nginx dengan perintah "sudo apt install nginx".

Selanjutnya kita melakukan konfigurasi nginx. Di terminal, pindah ke direktori "/etc/nginx/sites-available". Kemudian backup file default dengan menyalinnya dengan nama baru, misalnya "default.ori".

Edit file "default" dengan perintah "sudo nano default", hapus semua isinya dan ganti dengan konfigurasi berikut ini.

Penjelasan:

1. Server akan menggunakan port 80 secara default untuk menerima request HTTP.

2. Alamat yang digunakan untuk mengakses web server atau aplikasi frontend. Dalam hal ini kita isi dengan IP address. Namun, untuk deployment di cloud atau di internet, biasanya bagian ini diisi dengan domain name.

3. Menyatakan bahwa lokasi source code atau file berada di /var/www/html.

4. Index halaman yang digunakan sebagai tampilan awal aplikasi adalah index.html.

5. Untuk setiap request yang masuk, server akan mengecek path $uri dan $uri/ secara berurutan. Jika path tersebut tidak ada, maka server akan merespon dengan eror 404.

Selanjutnya, kita check syntax konfigurasi tersebut dengan perintah "sudo nginx -t". Jika hasilnya ok, maka kita lanjut ke langkah berikutnya.

Selanjutnya kita membuat satu file server dengan nama "api" di folder yang sama dengan "default". Jalankan perintah sudo nano api, kemudian masukkan konfigurasi berikut ini. File api ini akan menjadi server proxy ke aplikasi backend.

Penjelasan:

1. Server akan menggunakan port 8081 untuk merespon request yang masuk dari aplikasi frontend.

2. Setiap request yang masuk akan diarahkan atau diteruskan ke aplikasi backend yang berjalan di port 5000.

Simpan perubahannya lalu check syntaxnya dengan perintah "sudo nginx -t". Pastikan tidak ada error.

Selanjutnya kita harus melakukan linking file api ke folder "/etc/nginx/sites-enabled". Folder inilah yang menentukan server apa saja yang akan dijalankan. File default tidak perlu di-link lagi karena sudah di-link secara dari awal.

Jalankan perintah "sudo ln -s /etc/nginx/sites-available/api  /etc/nginx/sites-enabled/"

Selanjutnya kita restart nginx dengan perintah "sudo service nginx restart". Hal ini dilakukan karena nginx telah berjalan dari awal setelah instalasi.

Terakhir, mari kita cek apakah aplikasi frontend telah tampil dan berjalan dengan baik. Minimize VM dan buka browser di host dan kunjungi alamat "192.168.56.100". Jika tiga product list muncul, maka artinya deployment telah berhasil.

Selanjutnya silakan bereksperimen dengan mengedit, menghapus, dan menambah product kemudian cocokkan dengan entry di backend pada alamat "http://192.168.56.100:8081/products".