Apa Itu MEAN Stack dan Cara Instalasinya di VPS Ubuntu

Halo, DomaiNesians! Setelah sebelumnya kita belajar tentang cara instal MERN Stack di VPS, kali ini kita akan belajar cara instal MEAN Stack di VPS. Meskipun MEAN Stack menggunakan JavaScript di semua komponennya, ada beberapa komponen kunci yang membedakannya dari stack lainnya, terutama di bagian front-end framework-nya.

Daftar Isi

1 Mengenal MEAN Stack dan Komponennya

2 Bagaimana Cara Instal MEAN Stack di VPS Ubuntu?

2.1 1. Akses Server Menggunakan SSH

2.2 2. Update Sistem dan Package dalam Server

2.3 3. Instal Node.js dan NPM

2.4 4. Instal MongoDB

2.5 5. Instal Angular CLI

2.6 6. Instal dan Membuat Aplikasi Express.js

2.7 7. Menjalankan Server Aplikasi Express

2.8 8. Mengkonfigurasi Firewall

2.9 9. Menyiapkan Angular Front-End

3 Kesimpulan

Kali ini, kita akan fokus pada instalasi MEAN Stack di VPS untuk membangun aplikasi web full-stack yang powerful dan scalable. Penasaran bagaimana proses instalasinya? Yuk, kita pelajari bareng di tutorial kali ini!

Mengenal MEAN Stack dan Komponennya

MEAN Stack adalah kumpulan perangkat lunak open-source berbasis JavaScript yang populer untuk pengembangan aplikasi web dinamis. MEAN Stack merupakan singkatan dari MongoDB, Express.js, Angular, dan Node.js.

(Sumber: Ultrahost.com)

Dalam MEAN Stack, Angular digunakan untuk pengembangan frontend, sedangkan Node.js, Express.js, dan MongoDB digunakan untuk pengembangan backend. Dengan berbasis JavaScript di semua komponennya, MEAN stack memungkinkan pengembangan aplikasi secara full-stack dengan efisien.

MongoDB

MongoDB adalah database NoSQL yang berperan penting dalam MEAN Stack karena menawarkan fleksibilitas tinggi dan skalabilitas dalam pengelolaan data. Database ini dirancang untuk menangani data berukuran besar dengan performa yang andal.

Express.js

Express.js atau sering disebut Express, adalah framework backend untuk Node.js yang memberikan kemudahan dalam mengelola rute, permintaan, dan respon server.

Angular.js

Angular.js adalah framework frontend yang memperluas kemampuan HTML dengan fitur dinamis untuk membuat aplikasi satu halaman (SPA). Dengan Angular.js, kalian bisa mengelola pembaruan data secara langsung di halaman tanpa perlu reload, menciptakan pengalaman pengguna yang lebih responsif.

Node.js

Node.js adalah lingkungan runtime untuk JavaScript yang berjalan di server, menggunakan mesin V8 dari Chrome. Node.js terkenal dengan pendekatan non-blocking, yang memungkinkan server menangani banyak koneksi secara efisien.

Bagaimana Cara Instal MEAN Stack di VPS Ubuntu?

Dalam tutorial kali ini, kita akan membahas bagaimana cara menginstal MEAN Stack pada server Ubuntu. Sebelum memulai proses instalasi, pastikan kalian sudah memiliki server VPS dengan sistem operasi Ubuntu yang siap digunakan.

Jika kalian belum punya server VPS dengan OS Ubuntu, kalian bisa membeli Cloud VPS terlebih dahulu dan memilih sistem operasi Ubuntu atau sesuai dengan kebutuhan kalian.

Nah, setelah kalian punya server VPS dengan OS Ubuntu, kalian bisa memulai mengikuti tutorial cara instal MEAN Stack berikut ini:

1. Akses Server Menggunakan SSH

Langkah pertama untuk menginstal MEAN Stack di VPS Ubuntu pastinya adalah mengakses server terlebih dahulu. Kalian bisa menggunakan SSH melalui terminal yang ada di perangkat kalian.

a. Akses terminal atau shell kemudian login ke VPS menggunakan SSH perintah berikut:

1	ssh username@alamat_ip_server

Ganti username dan alamat_ip_server dengan alamat IP VPS kamu. Contoh: ssh root@172.0.1.1

b. Input password root VPS kamu. Saat memasukkan password, sistem biasanya tidak akan menampilkan karakter password yang kamu ketikkan untuk alasan keamanan. Setelah selesai mengetik password, ketik Enter pada keyboard.

2. Update Sistem dan Package dalam Server

Sebelum mulai menginstal apapun di VPS, pastikan kalian mengupdate sistem dan package terlebih dahulu. Tujuannya yaitu agar sistem dan package yang ada di server sudah menggunakan versi terbaru yang kompatibel dengan aplikasi atau teknologi yang akan kalian instal di VPS.

a. Update sistem di server menggunakan perintah berikut ini:

1	sudo apt update && sudo apt upgrade -y

Setelah semua sistem dan package diperbarui, langkah selanjutnya adalah memulai proses instalasi MEAN Stack.

3. Instal Node.js dan NPM

Node.js adalah komponen penting dalam MEAN Stack yang digunakan untuk menjalankan server aplikasi kita nantinya. Pada tahap ini, kita perlu menginstal Node.js dan NPM (Node Package Manager) sekaligus.

a. Untuk membuat aplikasi dalam MEAN Stack, kita membutuhkan Node.js dengan minimal versi 14 atau versi yang terbaru. Untuk menginstal Node.js dan NPM, kita perlu mengunduh repositorynya dari website resmi NodeSource. Untuk menjalankanya, gunakan perintah berikut ini:

1	curl -fsSL https://deb.nodesource.com/setup_18.x \| sudo -E bash -

b. Setelah berhasil mengunduh repository Node.js dari situs resminya, langkah selanjutnya yaitu lakukan instalasi dengan perintah berikut:

1	sudo apt install nodejs

c. Terakhir, cek versi Node.js dan NPM yang sudah terinstal dengan perintah berikut:

1 2	node -v npm -v

Jika versi Node.js dan NPM sudah keluar, maka proses instalasi tahap pertama yang kita lakukan sudah berhasil.

4. Instal MongoDB

Selanjutnya, kita juga perlu menginstal database untuk aplikasi kita nanti. Dalam MEAN Stack, kita menggunakan MongoDB sebagai database. Untuk menginstal MongoDB versi terbaru, kita perlu menambahkan repository resmi dari MongoDB.

a. Step pertama, tambahkan GPG key MongoDB menggunakan perintah berikut:

1	curl -fsSL https://www.mongodb.org/static/pgp/server-7.0.asc \| sudo gpg -o /usr/share/keyrings/mongodb-server-7.0.gpg --dearmor

Sebagai catatan: jika kalian menerima respon “sudo: unable to resolve host localhost.localdomain: Name or service not known” saat mengeksekusi perintah curl… tersebut, maka kalian bisa menyelesaikannya dengan langkah-langkah berikut:

Cek nama host kalian terlebih dahulu dengan perintah berikut:

hostname

Jika nama host yang keluar adalah localhost.localdomain, berarti itu adalah nama server kalian saat ini.

Selanjutnya, buka file /etc/hosts dengan perintah berikut:

1	sudo nano /etc/hosts

Copy script berikut dalam file tersebut kemudian tekan Enter:

1 2	127.0.0.1 localhost 127.0.1.1 localhost.localdomain

Catatan: ganti localhost.localdomain dengan nama host kalian sebelumnya.

Simpan dan keluar dari file tersebut dengan tekan CTRL + O, Enter, kemudian CTRL + X.
Jika sudah, ulangi perintah curl … sebelumnya.

b. Jika kalian mengalami error karena masalah dependensi, maka jalankan perintah berikut:

1	sudo apt install curl gnupg2 git -y

c. Selanjutnya, tambahkan repository MongoDB ke daftar package dengan menjalankan perintah berikut:

1	echo "deb [arch=amd64,arm64 signed-by=/usr/share/keyrings/mongodb-server-7.0.gpg] https://repo.mongodb.org/apt/ubuntu jammy/mongodb-org/7.0 multiverse" \| sudo tee /etc/apt/sources.list.d/mongodb-org-7.0.list

d. Reload daftar paket dengan perintah berikut:

1	sudo apt update

e. Jika sudah, instal MongoDB menggunakan perintah berikut:

1	sudo apt install mongodb-org -y

f. Setelah berhasil, jalankan MongoDB:

1	sudo systemctl start mongod

g. Supaya MongoDB bisa berjalan otomatis saat sistem dinyalakan, kalian bisa mengaturnya dengan perintah berikut ini:

1	sudo systemctl enable mongod

h. Terakhir, cek status MongoDB yang sudah terinstal:

1	systemctl status mongod

Jika statusnya “active (running)”, maka MongoDB sudah siap digunakan.

5. Instal Angular CLI

Angular CLI adalah framework frontend yang digunakan untuk membuat tampilan suatu aplikasi.

a. Instal Angular CLI menggunakan NPM:

1	sudo npm install -g @angular/cli

b. Setelah itu, verifikasi hasil instalasi Angular dengan perintah berikut:

1	ng version

Nah, Angular CLI sudah berhasil terpasang di server kalian.

6. Instal dan Membuat Aplikasi Express.js

Express.js adalah framework yang digunakan untuk membantu Node.js dalam pengembangan aplikasi dari sisi server.

a. Buat direktori proyek terlebih dahulu:

1	mkdir my-mean-app

Nama my-mean-app adalah nama folder tempat proyek kita disimpan. Kalian bisa mengubahnya sesuai kebutuhan.

b. Setelah itu, masuk ke direktori proyek yang sudah kita buat:

1	cd my-mean-app

c. Inisialisasi proyek Node.js dengan file package.json:

1	npm init -y

d. Instal software pendukung utama untuk aplikasi kita:

1	npm install express mongoose body-parser cors

e. Kemudian, buat file server.js untuk aplikasi Express kita:

1	nano server.js

Copy script berikut dalam file server.js tersebut:

const express = require('express');

const mongoose = require('mongoose');

const bodyParser = require('body-parser');

const cors = require('cors');

const app = express();

app.use(bodyParser.json());

app.use(cors());

mongoose.connect('mongodb://localhost:27017/my-mean-db', {

useNewUrlParser: true,

useUnifiedTopology: true

});

app.get('/', (req, res) => res.send('Hello, MEAN Stack!'));

app.listen(3000, () => console.log('Server running on port 3000'));

Simpan dan tutup file dengan Ctrl+O, Enter, lalu Ctrl+X.

7. Menjalankan Server Aplikasi Express

Setelah berhasil membuat aplikasi dengan Express.js, selanjutnya coba jalankan server kita dengan perintah berikut:

1	node server.js

Kalian akan melihat pesan seperti “Server running on port 3000”. Kalian dapat mengunjungi http://<IP-server>:3000 untuk melihat pesan “Hello, MEAN Stack!”.

Catatan: Ganti <IP-server> dengan alamat IP VPS kalian, misalnya http://127.15.15.127:3000

8. Mengkonfigurasi Firewall

Jika kalian menggunakan firewall seperti UFW, pastikan port 3000 terbuka dengan menjalankan perintah berikut ini:

1	sudo ufw allow 3000/tcp

9. Menyiapkan Angular Front-End

Sekarang buat aplikasi Angular di luar direktori my-mean-app untuk menjaga struktur proyek yang lebih rapi.

a. Masuk ke direktori home terlebih dahulu:

cd ~

b. Buat proyek Angular baru:

1	ng new my-angular-app

c. Masuk ke direktori proyek Angular kalian:

1	cd my-angular-app

d. Jalankan server development Angular:

1	ng serve --host 0.0.0.0 --port 4200

Angular akan berjalan pada http://<IP-server>:4200. Sama seperti sebelumnya, ganti <IP-server> dengan alamat IP VPS kalian, misalnya http://127.15.15.127:3000

Kesimpulan

Nah, selamat kamu sudah berhasil melakukan instalasi MEAN Stack di server VPS, mulai dari setup Node.js, MongoDB, Express.js, sampai Angular CLI. Dengan tutorial ini, kalian sudah siap untuk membangun aplikasi full-stack modern, mulai dari toko online, sistem reservasi, hingga aplikasi media sosial sederhana.

Agar, proses pengembangan aplikasi kalian lebih mudah dan cepat, kalian bisa menggunakan server Cloud VPS dari DomaiNesia yang aman dan handal. Jadi, tunggu apa lagi? Yuk, segera mulai aplikasi pertama kalian!

Apa Itu MEAN Stack dan Cara Instalasinya di VPS Ubuntu

Mengenal MEAN Stack dan Komponennya