ค้นหาเว็บไซต์

วิธีสร้างและเรียกใช้แอปเชิงมุมโดยใช้ Angular CLI และ PM2


Angular CLI เป็นอินเทอร์เฟซบรรทัดคำสั่งสำหรับเฟรมเวิร์ก Angular ซึ่งใช้เพื่อสร้าง สร้าง และรันแอปพลิเคชันของคุณภายในเครื่องขณะพัฒนา

ได้รับการออกแบบมาเพื่อสร้างและทดสอบโปรเจ็กต์ Angular บนเซิร์ฟเวอร์การพัฒนา อย่างไรก็ตาม หากคุณต้องการรัน/ทำให้แอปพลิเคชันของคุณคงอยู่ตลอดไปในการใช้งานจริง คุณต้องมีตัวจัดการกระบวนการ Node.js เช่น PM2

PM2 คือผู้จัดการกระบวนการผลิตที่ได้รับความนิยม ขั้นสูง และมีฟีเจอร์มากมายสำหรับแอปพลิเคชัน Node.js ที่มีตัวจัดสรรภาระงานในตัว

ชุดคุณลักษณะประกอบด้วยการสนับสนุนสำหรับการตรวจสอบแอปพลิเคชัน การจัดการไมโครบริการ/กระบวนการอย่างมีประสิทธิภาพ การรันโหมดคลัสเตอร์แอปพลิเคชัน และการรีสตาร์ทและปิดแอปพลิเคชันอย่างนุ่มนวล นอกจากนี้ยังรองรับการจัดการบันทึกแอปพลิเคชันที่ง่ายดายและอีกมากมาย

ในบทความนี้ เราจะแสดงวิธีเรียกใช้แอปพลิเคชัน Angular โดยใช้ตัวจัดการกระบวนการ Angular CLI และ PM2 Node.js สิ่งนี้ทำให้คุณสามารถรันแอปพลิเคชันของคุณได้อย่างต่อเนื่องในระหว่างการพัฒนา

ความต้องการ

คุณต้องมีแพ็คเกจต่อไปนี้ติดตั้งบนเซิร์ฟเวอร์ของคุณเพื่อดำเนินการต่อ:

  • Node.js และ NPM
  • CLI เชิงมุม
  • PM2

หมายเหตุ: หากคุณมี Node.js และ NPM ติดตั้งอยู่บนระบบ Linux ของคุณแล้ว ให้ข้ามไปที่ ขั้นตอนที่ 2

ขั้นตอนที่ 1: การติดตั้ง Node.js ใน Linux

หากต้องการติดตั้ง Node.js เวอร์ชันล่าสุด ขั้นแรกให้เพิ่ม พื้นที่เก็บข้อมูล NodeSource บนระบบของคุณตามที่แสดง และติดตั้งแพ็กเกจ อย่าลืมเรียกใช้คำสั่งที่ถูกต้องสำหรับเวอร์ชัน Node.js ที่คุณต้องการติดตั้งบน Linux ของคุณ

ติดตั้ง Node.js บน 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

ติดตั้ง Node.js บน 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

ติดตั้ง Node.js บนการกระจายแบบอิง 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

นอกจากนี้ ให้ติดตั้งเครื่องมือการพัฒนาบนระบบของคุณเพื่อให้คุณสามารถคอมไพล์และติดตั้งส่วนเสริมดั้งเดิมจาก NPM

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

เมื่อคุณติดตั้ง Node.js และ NPM แล้ว คุณสามารถตรวจสอบเวอร์ชันได้โดยใช้คำสั่งต่อไปนี้

node -v
npm -v

ขั้นตอนที่ 2: การติดตั้ง Angular CLI และ PM2

จากนั้น ติดตั้ง Angular CLI และ PM2 โดยใช้ ตัวจัดการแพ็คเกจ npm ดังที่แสดง ในคำสั่งต่อไปนี้ ตัวเลือก -g หมายถึงการติดตั้งแพ็คเกจทั่วโลก – ผู้ใช้ระบบทุกคนสามารถใช้งานได้

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

ขั้นตอนที่ 3: การสร้างโครงการเชิงมุมโดยใช้ Angular CLI

ตอนนี้ย้ายไปยังไดเร็กทอรี webroot ของเซิร์ฟเวอร์ของคุณ จากนั้นสร้าง สร้าง และให้บริการแอป Angular ของคุณ (เรียกว่า sysmon-app แทนที่สิ่งนี้ด้วยชื่อแอปของคุณ) โดยใช้ CLI เชิงมุม

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

จากนั้น ย้ายไปยังไดเรกทอรีแอปพลิเคชัน (เส้นทางแบบเต็มคือ /srv/www/htdocs/sysmon-app) ที่เพิ่งสร้างขึ้นและให้บริการแอปพลิเคชันดังที่แสดง

cd sysmon-app
sudo ng serve

จากผลลัพธ์ของคำสั่ง ng server คุณจะเห็นว่าแอป Angular ไม่ได้ทำงานในพื้นหลัง คุณจะไม่สามารถเข้าถึงพร้อมท์คำสั่งได้อีกต่อไป ดังนั้นคุณจึงไม่สามารถดำเนินการคำสั่งอื่นใดในขณะที่กำลังทำงานอยู่ได้

ดังนั้น คุณต้องมีตัวจัดการกระบวนการเพื่อควบคุมและจัดการแอปพลิเคชัน: รันอย่างต่อเนื่อง (ตลอดไป) และยังเปิดใช้งานให้เริ่มต้นอัตโนมัติเมื่อบูตระบบตามที่อธิบายไว้ในส่วนถัดไป

ก่อนที่คุณจะไปยังส่วนถัดไป ให้ยุติกระบวนการโดยกด [Ctl + C] เพื่อเพิ่มพรอมต์คำสั่ง

ขั้นตอนที่ 4: การดำเนินโครงการเชิงมุมตลอดไปโดยใช้ PM2

หากต้องการให้แอปพลิเคชันใหม่ของคุณทำงานในพื้นหลัง ทำให้พรอมต์คำสั่งว่างขึ้น ให้ใช้ PM2 เพื่อให้บริการดังที่แสดง PM2 ยังช่วยงานการดูแลระบบทั่วไป เช่น การรีสตาร์ทเมื่อเกิดความล้มเหลว การหยุด และการโหลดการกำหนดค่าใหม่โดยไม่ต้องหยุดทำงาน และอื่นๆ อีกมากมาย

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

ถัดไป เพื่อเข้าถึงเว็บอินเทอร์เฟซของแอปพลิเคชันของคุณ ให้เปิดเบราว์เซอร์แล้วนำทางโดยใช้ที่อยู่ http://localhost:4200 ดังที่แสดงในภาพหน้าจอต่อไปนี้

ในคู่มือนี้ เราได้แสดงวิธีเรียกใช้แอปพลิเคชัน Angular โดยใช้ตัวจัดการกระบวนการ Angular CLI และ PM2 หากคุณมีแนวคิดเพิ่มเติมที่จะแบ่งปันหรือมีคำถาม โปรดติดต่อเราผ่านแบบฟอร์มคำติชมด้านล่าง