Cara Membuat dan Menjalankan Aplikasi Angular Menggunakan Angular CLI dan PM2


Angular CLI adalah antarmuka baris perintah untuk kerangka Angular, yang digunakan untuk membuat, membangun, dan menjalankan aplikasi Anda secara lokal saat pengembangan.

Ini dirancang untuk membangun dan menguji proyek Angular di server pengembangan. Namun, jika Anda ingin menjalankan/menjaga aplikasi Anda tetap hidup selamanya dalam produksi, Anda memerlukan manajer proses Node.js seperti PM2.

PM2 adalah manajer proses produksi yang populer, canggih, dan kaya fitur untuk aplikasi Node.js dengan penyeimbang beban bawaan.

Rangkaian fiturnya mencakup dukungan untuk pemantauan aplikasi, manajemen layanan/proses mikro yang efisien, menjalankan mode cluster aplikasi, dan memulai ulang dan mematikan aplikasi dengan baik. Selain itu, ini mendukung pengelolaan log aplikasi yang mudah, dan banyak lagi.

Dalam artikel ini, kami akan menunjukkan cara menjalankan aplikasi Angular menggunakan Angular CLI dan manajer proses PM2 Node.js. Ini memungkinkan Anda menjalankan aplikasi secara terus-menerus selama pengembangan.

Persyaratan

Anda harus menginstal paket berikut di server Anda untuk melanjutkan:

  • Node.js dan NPM
  • CLI sudut
  • PM2

Catatan: Jika Anda sudah menginstal Node.js dan NPM di sistem Linux Anda, lompat ke Langkah 2.

Langkah 1: Menginstal Node.js di Linux

Untuk menginstal Node.js versi terbaru, pertama-tama, tambahkan repositori NodeSource di sistem Anda seperti yang ditunjukkan dan instal paketnya. Jangan lupa untuk menjalankan perintah yang benar untuk versi Node.js yang ingin Anda instal pada distribusi Linux Anda.

Instal Node.js di Ubuntu

------------- For Node.js v19.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_19.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v18.x -------------
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v16.x -------------
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v14.x -------------
curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

Instal Node.js di Debian

------------- For Node.js v19.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_19.x | bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v18.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_18.x | bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v16.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_16.x | bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v14.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_14.x | bash - &&\
sudo apt-get install -y nodejs

Instal Node.js pada Distribusi berbasis RHEL

------------- For Node.js v19.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_19.x | sudo bash -
sudo yum install -y nodejs

------------- For Node.js v18.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs

------------- For Node.js v16.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_16.x | sudo bash -
sudo yum install -y nodejs

------------- For Node.js v14.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_14.x | sudo bash -
sudo yum install -y nodejs

Selain itu, instal juga alat pengembangan di sistem Anda sehingga Anda dapat mengkompilasi dan menginstal add-on asli dari NPM.

sudo apt install build-essential  [On Debian/Ubuntu]
yum install gcc-c++ make          [On CentOS/RHEL]
dnf install gcc-c++ make          [On Fedora]

Setelah Anda menginstal Node.js dan NPM, Anda dapat memeriksa versinya menggunakan perintah berikut.

node -v
npm -v

Langkah 2: Menginstal Angular CLI dan PM2

Selanjutnya, instal Angular CLI dan PM2 menggunakan npm package manager seperti yang ditunjukkan. Dalam perintah berikut, opsi -g berarti menginstal paket secara global – dapat digunakan oleh semua pengguna sistem.

sudo npm install -g @angular/cli        #install Angular CLI
sudo npm install -g pm2                 #install PM2

Langkah 3: Membuat Proyek Angular Menggunakan Angular CLI

Sekarang pindah ke direktori webroot di server Anda, lalu buat, bangun, dan sajikan aplikasi Angular Anda (disebut sysmon-app, ganti ini dengan nama aplikasi Anda) menggunakan CLI sudut.

cd /srv/www/htdocs/
sudo ng new sysmon-app        #follow the prompts

Selanjutnya, pindah ke direktori aplikasi (path lengkapnya adalah /srv/www/htdocs/sysmon-app) yang baru saja dibuat dan menyajikan aplikasi seperti yang ditunjukkan.

cd sysmon-app
sudo ng serve

Dari output perintah ng serve, Anda dapat melihat bahwa aplikasi Angular tidak berjalan di latar belakang, Anda tidak dapat mengakses command prompt lagi. Oleh karena itu Anda tidak dapat menjalankan perintah lain saat sedang berjalan.

Jadi, Anda memerlukan manajer proses untuk mengontrol dan mengelola aplikasi: menjalankannya secara terus menerus (selamanya) dan juga mengaktifkannya untuk memulai secara otomatis saat boot sistem seperti yang dijelaskan di bagian selanjutnya.

Sebelum Anda melanjutkan ke bagian berikutnya, hentikan proses dengan menekan [Ctl + C] untuk mengosongkan command prompt.

Langkah 4: Menjalankan Proyek Angular Selamanya Menggunakan PM2

Untuk membuat aplikasi baru Anda berjalan di latar belakang, kosongkan command prompt, gunakan PM2 untuk menyajikannya, seperti yang ditunjukkan. PM2 juga membantu tugas umum administrasi sistem seperti memulai ulang jika terjadi kegagalan, menghentikan, dan memuat ulang konfigurasi tanpa waktu henti, dan banyak lagi.

pm2 start "ng serve" --name sysmon-app

Selanjutnya, untuk mengakses antarmuka web aplikasi Anda, buka browser dan navigasikan menggunakan alamat http://localhost:4200 seperti yang ditunjukkan pada tangkapan layar berikut.

Dalam panduan ini, kami telah menunjukkan cara menjalankan aplikasi Angular menggunakan Angular CLI dan manajer proses PM2. Jika Anda memiliki ide tambahan untuk dibagikan atau pertanyaan, hubungi kami melalui formulir umpan balik di bawah.