STECHOQ TRAINING CENTER
Day 4 - Cloud Deployment
Pendahuluan
Pada materi kali ini, kita akan mempelajari cara melakukan deployment aplikasi backend dan frontend di Virtual Machine (VM) yang kita sewa atau rental di cloud. Deployment model ini adalah deployment yang lazim untuk aplikasi yang ditujukan untuk dikonsumsi oleh publik lewat internet. Selain melakukan deployment, kita juga akan mempelajari cara melakukan setup domain dan implementasi HTTPS ke kedua aplikasi frontend dan backend.
Dalam tutorial ini, kita akan memakai VM yang disewa dari Microsoft Azure. Selain Microsoft Azure, ada beberapa cloud provider dimana kita dapat merental VM, antara lain:
Digital Ocean (https://www.digitalocean.com/products/droplets)
Google Cloud Platform (GCP) (https://cloud.google.com/compute)
Amazon Web Service (AWS) (https://aws.amazon.com/ec2/instance-types/)
Alibaba Cloud (https://www.alibabacloud.com/product/ecs)
Dan lain-lain.
Microsoft Azure menawarkan akses gratis berjangka waktu melalui Azure Free Trial untuk publik dan Azure For Students untuk siswa/mahasiswa. Layanan ini tidak membutuhkan data kartu kredit seperti pada cloud provider lain. Jadi kalian dapat mencoba salah satunya.
Azure Free Trial: https://azure.microsoft.com/en-us/free/
Azure For Students: https://azure.microsoft.com/en-us/free/students/
Membuat Virtual Machine di Azure
Pada halaman home Azure, klik Create a resource.
Kemudian pada bagian Virtual Machine, klik Create.
Pada bagian Virtual Machine name, beri nama VM sesuai keinginan. Pastikan mudah diingat. Pada bagian Region, pilih region yang dekat, misalnya Australia East. Pemilihan region berpengaruh kepada biaya bulanan VM. Pada bagian Image, pilih Debian 11 “Bullseye” - Gen 2. Tentu saja, kita dapat memilih image yang lain, tapi dalam praktikum ini kita akan memakai Debian 11.
Pada bagian Size, pilih Standard_B1s. Ini adalah tipe yang paling kecil dan basic dengan 1 core CPU dan 1 GB RAM. Spesifikasi demikian sudah cukup untuk deployment pada praktikum ini. Selain itu, biaya bulanannya juga relatif lebih murah.
Pada bagian Administrator account, pilih SSH public key sebagai authentication type. Kemudian tentukan username yang diinginkan sebagai default user di VM. Sedangkan untuk SSH Public key source, pilih Generate new key pair.
Pada bagian Inbound port rules, pilih Allow selected ports dan centang ketiga pilihan yaitu HTTP, HTTPS, dan SSH.
Pada tahap ini, tidak lagi yang perlu dikonfigurasi pada tab lainnya. Jadi, kita dapat langsung menekan tombol Review + create.
Pada halaman Review + Create, tekan tombol create untuk membuat VM. Setelah itu, akan ada popup yang meminta kita mengunduh private key yang akan kita gunakan untuk terhubung ke VM melalui SSH. Pada bagian ini, pilih Download private key and create resource dan tempatkan filenya di folder C:\Users\<nama user>\.ssh (Windows) atau /home/<nama user>/.ssh (Linux).
Setelah itu, proses pembuatan VM akan berjalan dan tunggu sampai selesai. Setelah selesai, klik tombol Go to resource.
Setelah VM selesai dibuat, catat IP publik-nya yang berada di halaman Overview sebelah kanan. IP ini akan digunakan untuk mengakses VM melalui SSH.
Pada halaman resource atau detail VM, klik menu Networking pada bagian sidebar di sebelah kiri.
Pada halaman Networking, klik tombol Add inbound port rule di sebelah kanan.
Sejauh ini, hanya ada tiga port yang terbuka ke publik yaitu 80 (HTTP), 443 (HTTPS), dan 22 (SSH). Maka kita perlu menambahkan satu port lagi yaitu port 81. Port ini akan digunakan untuk port proxy ke aplikasi backend.
Akses VM Melalui SSH dan Setup Firewall
Setelah VM telah dibuat, maka kita akan mengaksesnya melalui SSH menggunakan file private key yang telah kita download dan tempatkan di folder .ssh sebelumnya.
Jika kalian memakai Windows, maka jalankan perintah berikut di CMD atau Powershell.
ssh -i C:\Users\<nama user>\.ssh\az-debian11_key.pem app@<ip publik>
Jika kalian memakai Linux, jalankan perintah berikut di terminal.
ssh -i /home/<name user>/.ssh/az-debian11_key.pem app@<ip publik>
Setelah SSH terhubung, langkah selanjutnya adalah setup firewall. Firewall digunakan untuk mengizinkan atau memblokir port tertentu di VM. Sebelumnya kita telah membuka port 81 di security group VM. Akan tetapi, hal itu belum cukup. Kita masih perlu mengizinkan port tersebut untuk diakses di VM. Firewall yang akan digunakan adalah UFW (Uncomplicated Firewall).
Pertama-tama mari instal UFW dengan perintah berikut.
sudo apt update && sudo apt upgrade -y
sudo apt install ufw
Setelah UFW terinstal, jalankan perintah berikut ini.
sudo ufw allow 22
sudo ufw allow 80
sudo ufw allow 443
sudo ufw allow 81
sudo ufw enable
sudo ufw status
Perintah di atas secara berurutan akan mengijinkan akses untuk port 22 (SSH), 80 (HTTP), 443 (HTTPS), 81 (backend).
Transfer File Ke VM
Pada tahap ini kita akan melakukan transfer aplikasi backend dan frontend ke VM melalui program scp. Secara default, program ini tersedia baik di Windows maupun Linux.
Sebelumnya, silakan download aplikasi demonya di link berikut.
https://drive.google.com/file/d/1mgMnR0inYk-v0j5HsUopH0oYuw44FBY1/view?usp=share_link
Setelah itu, ekstrak filenya dan copy folder app ke folder Download supaya mudah dicari.
Sebelum memulai transfer, putuskan koneksi SSH terlebih dahulu dengan perintah exit. Kemudian kita dapat memulai transfer dengan menggunakan perintah berikut ini.
Windows
scp -i C:\Users\<nama user>\.ssh\<key>.pem -r app app@<ip publik>
Linux
scp -i /home/<nama user>/.ssh/<key>.pem -r app app@<ip publik>
Setelah transfer selesai, akses kembali VM dengan SSH dan pastikan folder app telah berada di folder home.
Install dan Konfigurasi MariaDB
Sebelum memulai menginstal aplikasi apapun, kita harus mengupdate dan mengupgrade package dengan perintah berikut.
sudo apt update && sudo apt upgrade
Masukkan Y atau tekan ENTER saat muncul prompt konfirmasi.
Pada VM Debian versi 11 yang kita pakai, database server yang tersedia secara default di repository adalah MariaDB, yaitu fork atau versi cabang dari MySQL.Kita dapat langsung menginstal MariaDB dengan perintah berikut ini.
sudo apt install mariadb-server -y
Setelah itu, jalankan perintah "sudo mysql_secure_installation".
Pada prompt pertanyaan pertama, tekan ENTER dan selanjutnya masukkan jawaban Y.
Selanjutnya kita akan mengakses MariaDB server dan membuat user baru dengan nama "app" dan password "app", database baru dengan nama "pos_db", serta memberi hak akses kepada user app terhadap database pos_db.
Masukkan perintah berikut ini secara berututan.
mysql -u root -p
NOTE: Masukkan password root yang telah dibuat sebelumnyacreate user 'app'@'localhost' identified by 'app';
create database pos_db;
grant all privileges on pos_db.* to 'app'@'localhost';
Terakhir, kita akan mengimpor database dummy yang terdapat di dalam folder "~/app/backend/" dengan nama "pos_db.sql". Tujuannya adalah agar kita tidak perlu membuat skema tabel secara manual.
Untuk mulai mengimport database, tekan CTRL+C untuk keluar dari MariaDB server. Setelah itu jalankan perintah berikut ini.
cd ~/app/backend/
mysql -uapp -papp pos-db < pos_db.sql
Jika tidak ada error, berarti impor berhasil. Mari cek dengan login ke MariaDB server dengan user "app".
Kemudian masukkan perintah-perintah berikut ini.
show databases;
use pos_db;
show tables;
select * from product;
Jika terdapat tabel product dan datanya sejumlah tiga baris, maka import telah berhasil.
Instalasi Node.js
Aplikasi backend yang kita pakai dalam praktikum ini memakai framework Express JS yang berjalan di Node.js runtime. Oleh karena itu, kita harus memastikan Node.js terinstal sebelum menjalankan aplikasi backend.
Karena Node.js tidak terinstal secara default, maka kita harus menginstalnya terlebih dahulu. Cara instalasi yang kita pakai adalah dengan menggunakan NVM (Node Version Manager). Cara ini lebih praktis dan mengurangi kemungkinan kesalahan instalasi. Karena NVM juga belum terinstal, maka kita harus menginstal NVM dahulu kemudian menginstall Node.js.
Untuk melakukan instalasi, masukkan perintah berikut secara berurutan.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
bash
nvm install 16
Setelah itu masukkan perintah "node -v" untuk mengecek status instalasi. Jika outputnya menampilkan versi 16.x, maka instalasi berhasil.
Setup Aplikasi Backend Dengan PM2
Untuk menjalankan aplikasi backend, kita membutuhkan process manager yang akan memastikan aplikasi dapat berjalan terus menerus. Dalam hal ini, kita akan memakai process manager PM2.
Karena PM2 belum terinstal secara default, mari menginstalnya dengan perintah berikut ini.
npm install pm2 -g
pm2 -v
Setelah PM2 terinstal, langkah selanjutnya adalah mengubah konfigurasi database di file "~/app/backend/config/database.js". Edit file tersebut dengan perintah berikut ini.
nano ~/app/backend/config/database.js
Kemudian sesuaikan konfigurasinya dengan gambar berikut. Pada dasarnya, kita menyesuaikannya dengan nama user, password, dan database MariaDb yang kita buat sebelumnya.
CATATAN:
Tekan CTRL+W untuk menyimpan perubahan, lalu klik CTRL+X untuk exit di nano editor.
Selanjutnya kita harus mengubah file "~/app/backend/index.js" khususnya di bagian method .listen(). Untuk mengedit file tersebut jalankan perintah berikut ini.
nano ~/app/backend/index.js
Kemudian sesuaikan isinya dengan gambar berikut ini dengan menambahkan “127.0.0.1” di app.listen().
Setelah itu, kita harus menginstal dependency atau package yang aplikasi backend butuhkan untuk berjalan. Jalankan perintah berikut ini.
cd ~/app/backend
npm install
Terakhir, mari kita jalankan aplikasi backend dengan perintah berikut ini.
pm2 start index.js
Untuk mengecek apakah aplikasi backend benar-benar berjalan dengan baik, jalankan perintah berikut. Jika hasilnya muncul berupa tiga item produk, maka artinya aplikasi backend berjalan dengan baik.
curl localhost:5000/products/
Setup Aplikasi Frontend
Pada tahap ini, kita akan melakukan konfigurasi dan build aplikasi frontend agar dapat dijalankan dengan nginx.
Langkah pertama, instal dependency aplikasi frontend dengan perintah berikut.
cd ~/app/frontend/
npm install
Kemudian, kita lakukan perubahan di file "~/app/frontend/main.js" dengan perintah berikut ini.
nano ~/app/frontend/src/main.js
Kemudian ganti localhost dengan IP publik VM dan ganti port dari 5000 ke 81 pada variabel axios.defaults.baseUrl. Simpan perubahannya kemudian exit.
Selanjutnya, kita build aplikasi frontend dengan perintah berikut ini.
npm run build
Hasil dari proses build adalah folder yg bernama "dist" yang berisi source code yang siap untuk di-serve dengan nginx.
Langkah selanjutnya adalah menyalin folder dist ke folder "/var/www/" dan mengubah namanya menjadi "app". Jalankan perintah berikut ini.
sudo mkdir -p /var/www
sudo cp -R dist/ /var/www/app
sudo chown -R app:app /var/www/app
CATATATAN:
Langkah di atas adalah opsional. Folder dist dapat berada dimanapun termasuk di lokasinya saat ini di dalam "~/app/frontend/dist". Kita hanya cukup memberitahu nginx lokasi folder dist tersebut.
Instalasi dan Konfigurasi NGINX
Nginx adalah aplikasi web server dan proxy yang digunakan untuk menjalankan aplikasi frontend dan menghubungkannya dengan backend melalui proxy. Nginx tidak terinstal di VM secara default, maka kita harus menginstalnya dengan perintah berikut ini.
sudo apt install nginx -y
Setelah terinstal, nginx akan berjalan secara otomatis. KIta dapat mengeceknya dengan perintah berikut ini.
/etc/init.d/nginx status
Selanjutnya, kita akan melakukan konfigurasi server nginx. Pertama, lakukan navigasi direktori ke "/etc/nginx/sites-available" dengan perintah berikut ini.
cd /etc/nginx/sites-available
Di dalam folder "sites-available", terdapat file konfigurasi server yang akan kita ubah. Namun ada baiknya kita, backup file "default" terlebih dahulu dengan perintah berikut.
sudo cp default default.ori
Setelah itu, edit file default menggunakan "nano". Hapus seluruh isinya dan kemudian sesuaikan dengan gambar berikut. Konfigurasi yang paling penting di sini adalah konfigurasi lokasi source code frontend. Di sini, kita mengarahkannya ke folder "/var/www/app" yang kita buat sebelumnya.
sudo nano default
CONFIG
server {
server_name _;
root /var/www/app;
index index.html;
location / {
try_files $uri $uri/ =404;
}
listen 80 default_server;
}
Setelah itu, kita harus membuat file config untuk aplikasi backend. Dalam hal ini kita akan namakan dengan api. Jalankan perintah berikut ini dan sesuaikan konfigurasinya dengan gambar.
sudo nano api
CONFIG
server {
server_name _;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://127.0.0.1:5000;
proxy_set_header Host $http_host;
proxy_cache_bypass $http_upgrade;
proxy_redirect off;
}
listen 81 default_server;
}
Konfigurasi "proxy_pass http://127.0.0.1:5000" berarti bahwa segala request yang masuk ke port 81 akan dialihkan ke port 5000, yaitu aplikasi backend. Aplikasi yang akan melakukan request demikian adalah aplikasi frontend.
Setelah itu, kita harus mengecek syntax konfigurasi server default dan api dengan perintah berikut ini. Jika hasilnya OK, maka kita lanjut ke proses selanjutnya.
sudo nginx -t
Selanjutnya, kita link file api ke folder "/etc/nginx/sites-enabled". Folder sites-enabled adalah folder yang berisi file config server yang akan dijalankan. Hal ini tidak kita lakukan ke file default karena file tersebut telah di-link secara default. Jalankan perintah berikut ini.
sudo ln -s /etc/nginx/sites-available/api /etc/nginx/sites-enabled/
Setelah itu, kita restart server nginx dengan perintah berikut ini.
sudo systemctl restart nginx
Terakhir, mari kita cek apakah aplikasi frontend berjalan dengan baik dengan mengunjungi IP address publik dari VM di browser.
Jika item produk berhasil tampil, maka deployment backend dan frontend berhasil. Hal ini dapat diverifikasi lebih lanjut dengan mengedit, menghapus, serta menambah item produk lalu cek apakah datanya sama dengan hasil di url "http://<ip>:81/products/".
Setup Domain Name (Optional)
Saat ini, untuk mengakses aplikasi, kita masih menggunakan IP address publik dari VM. Namun, kita juga dapat mengakses aplikasi menggunakan domain name. Domain name adalah nama yang mengidentifikasi server atau layanan di internet, misalnya facebook.com, google.com, dan lain-lain. Domain name diasosiasikan dengan satu IP address publik di dalam sebuah DNS server.
Untuk mendapatkan domain name, kita harus membelinya di domain provider seperti namecheap.com, godaddy.com, name.com, dan masih banyak lagi. Di dalam praktikum ini, kita akan menggunakan domain name yang dibeli dari name.com. Pada tahap ini, kami mengasumsikan bahwa kalian telah melakukan checkout pembelian domain name di name.com.
Pada halaman homepage, klik menu My Domains.
Setelah itu, pilih atau klik nama domain yang telah dibeli.
Pada bagian Domain Details di halaman selanjutnya, pilih menu Manage DNS Records
Pada halaman ini, kita akan membuat satu record dengan tipe A. Pada record yang tersebut, kolom host dikosongkan isinya. Kemudian pada bagian value, isi dengan IP address publik dari VM. Kemudian tekan tombol ADD RECORD.
Tunggu beberapa menit sampai propagasi DNS record selesai. Kemudian, kunjungi alamat domain di browser dengan protokol http, misalnya "http://febri.live". Jika berhasil, maka browser akan menampilkan aplikasi frontend.
Setup HTTPS (Optional)
Protokol HTTP (Hypertext Transfer Protocol) adalah protokol yang tidak aman untuk aplikasi web. Hal ini dikarenakan protokol tersebut mengirim informasi secara plaintext dan enkripsi dari server ke client dan sebaliknya. Hal ini mengakibatkan orang lain dapat mengetahui dan mencegat informasi yang kita kirim ke aplikasi web. Hal ini berbahaya apabila informasi yang dikirim tersebut adalah username dan password.
Oleh karena itu, untuk aplikasi web yang ditujukan untuk konsumsi publik dan orang banyak, disarankan (atau bahkan diharuskan) memakai protokol HTTPS (Hypertext Transfer Protocol Secure). HTTPS adalah protokol HTTP yang berjalan di atas protokol TLS (Transport Layer Secure). Singkatnya, HTTPS mengenkripsi segala informasi yang dikirim dari server ke client maupun sebaliknya.
Untuk melakukan setup HTTPS, kita akan menggunakan program yang bernama "certbot". Pertama-tama, kita instal certbot dengan perintah berikut.
sudo apt install certbot python3-certbot-nginx -y
CATATAN:
python3-certbot-nginx adalah plugin untuk konfigurasi certbot di nginx.
Selanjutnya, kita ubah nilai server_name pada file config "default" dan api di folder "/etc/nginx/sites-available" dengan nama domain yang telah kita beli. Gunakan editor nano untuk mengedit kedua file tersebut.
sudo nano /etc/nginx/sites-available/default
sudo nano /etc/nginx/sites-available/api
Setelah itu, mari kita setup HTTPS dengan perintah perintah berikut ini.
sudo certbot –nginx
Kita akan diberikan beberapa pertanyaan yang harus diisi dengan benar. Pada keterangan nomor 2, kita memasukkan email yang akan dipakai untuk mengirimkan notifikasi terkait pembaharuan certificate. Pada pertanyaan nomor 3 dan 4, jawab dengan Yes. Pada pertanyaan nomor 5, isi dengan nama domain yang akan diaktivasi dengan HTTPS. Setelah itu, tunggu proses berjalan sampai selesai.
Saat kita buka URL "https://<domain>" di browser, browser akan menampilkan aplikasi web kita dengan logo gembok. Namun, data item produk tidak tampil. Mengapa demikian?
Hal ini terjadi karena yang hanya diaktivasi dengan HTTPS adalah aplikasi frontend, sedang aplikasi backend masih memakai HTTP. Sedangkan koneksi antara frontend dan backend harus memakai protokol yang sama. Misalnya HTTP<>HTTP atau HTTPS<>HTTPS. Untuk membuktikannya, perhatikan file config dari default dan api di folder /etc/nginx/sites-available.
/etc/nginx/sites-available/default
/etc/nginx/sites-available/api
Jika diperhatikan, pada file "/etc/nginx/sites-available" terdapat tambahan konfigurasi dari certbot yang menyatakan protokol 443 (HTTPS), certificate dan private key yang diperlukan oleh protokol HTTPS.
Untuk mengatasi masalah ini, kita harus melakukan dua hal. Pertama, menambahkan parameter SSL di file "/etc/nginx/sites-available/api" secara manual.. Kedua, mengubah protokol dan IP address pada variabel axios.defaults.baseUrl di file "~/app/frontend/src/main.js".
Untuk langkah pertama, salin empat baris konfigurasi SSL yang ada di file "/etc/nginx/sites-available/default" dan tambahkan ke file "/etc/nginx/sites-available/api". Kemudian ganti default_server dengan ssl pada bagian listen.
sudo nano /etc/nginx/sites-available/api
Langkah kedua, ubah protokol http ke https dan ganti IP address dengan domain name pada file "~/app/frontend/src/main.js"
nano ~/app/frontend/src/main.js
Setelah itu, lakukan build ulang pada aplikasi frontend.
Kemudian update folder "/var/www/app" dengan source hasil build terbaru. Jalankan perintah berikut ini.
sudo cp -rT dist/ /var/www/app
Terakhir, reload aplikasi frontend di browser. Jika berhasil, maka item produk akan muncul. Hal ini menandakan aplikasi backend dan frontend telah menggunakan HTTPS.
Konfigurasi Tambahan
Aplikasi kita hanya dapat diakses melalui domain name tanpa www. Akan tetapi pengunjung terkadang menambahkan www di depan domain name, misalnya www.febri.live. Karena domain name yang kita punya tidak memiliki record untuk www, maka saat dibuka di browser, kita akan melihat error. Baiknya, pengunjung yang memakai www saat membuka aplikasi website kita diarahkan ke domain name yang tanpa www. Misalnya saat pengunjung memasukkan "www.febri.live", maka mereka akan dialihkan ke febri.live.
Untuk merealisasikan hal tersebut, kita harus menambahkan satu server blok di file "/etc/nginx/sites-available/default".
CATATAN:
Parameter konfigurasi SSL di dalam blok server atau domain yang baru harus sama dengan parameter konfigurasi SSL yang dipakai di domain utama, dalam hal ini adalah febri.live.
Last modified: Monday, 1 May 2023, 9:07 AM
