2021-05-12 14:32:11
如何使用Angular CLI和PM2執行Angular應用程式
2020-06-16 16:34:10
Angular CLI是Angular框架的命令列介面，用於在開發過程中在本地建立，構建和執行應用程式。
它旨在在開發伺服器上構建和測試Angular專案。但是，如果要在生產中永久執行/保持應用程式處於活動狀態，則需要Node.js流程管理器，例如PM2。
PM2是Node.js應用程式的流行，高階且功能豐富的生產流程管理器，具有內建負載均衡器。其功能集包括對應用程式監視，微服務/進程的高效管理，執行應用程式叢集模式以及應用程式的正常重新啟動和關閉的支援。此外，它還支援輕鬆管理應用程式紀錄檔等等。
在本文中，我們將向您展示如何使用Angular CLI和PM2 Node.js流程管理器執行Angular應用程式。這允許您在開發期間連續執行應用程式。
要求
您必須在伺服器上安裝以下軟體包才能繼續：
- Node.js和NPM
- AngularCLI
- PM2
注意：如果您已在Linux系統上安裝了Node.js和NPM，請跳至步驟2。
第1步：在Linux中安裝Node.js
要安裝最新版本的Node.js，首先在系統上新增NodeSource儲存庫，如圖所示，然後安裝該軟體包。不要忘記為要在Linux發行版上安裝的Node.js版本執行正確的命令。
在Ubuntu上安裝Node.js.
$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - #對於 Node.js version 12
$ curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash - #對於 Node.js version 11
$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - #對於 Node.js version 10
$ sudo apt install -y nodejs
在Debian上安裝Node.js。
# curl -sL https://deb.nodesource.com/setup_12.x | bash - #對於 Node.js version 12
# curl -sL https://deb.nodesource.com/setup_11.x | bash - #對於 Node.js version 11
# curl -sL https://deb.nodesource.com/setup_10.x | bash - #對於 Node.js version 10
# apt install -y nodejs
# curl -sL https://rpm.nodesource.com/setup_12.x | bash - #對於 Node.js version 12
# curl -sL https://rpm.nodesource.com/setup_11.x | bash - #對於 Node.js version 11
# curl -sL https://rpm.nodesource.com/setup_10.x | bash - #對於 Node.js version 10
# yum -y install nodejs
# dnf -y install nodejs [在 RHEL 8 和 Fedora 22及以上版本]
此外，還要在系統上安裝開發工具，以便從NPM編譯和安裝原生外掛。
$ sudo apt install build-essential [在 Debian/Ubuntu]
# yum install gcc-c++ make [在 CentOS/RHEL]
# dnf install gcc-c++ make [在 Fedora]
安裝Node.js和NPM後，可以使用以下命令檢查其版本。
linuxidc@linuxidc:~/www.linuxidc.com$ node -v
v10.16.1
linuxidc@linuxidc:~/www.linuxidc.com$ npm -v
6.9.0
第2步：安裝Angular CLI和PM2
接下來，使用npm包管理器安裝Angular CLI和PM2，如圖所示。 在以下命令中，-g選項表示全域性安裝軟體包 - 可供所有系統使用者使用。
linuxidc@linuxidc:~/www.linuxidc.com$ sudo npm install -g @angular/cli #安裝Angular CLI
[sudo] linuxidc 的密碼：
/usr/local/bin/ng -> /usr/local/lib/node_modules/@angular/cli/bin/ng
> @angular/cli@8.2.0 postinstall /usr/local/lib/node_modules/@angular/cli
> node ./bin/postinstall/script.js
+ @angular/cli@8.2.0
added 240 packages from 185 contributors in 25.791s
linuxidc@linuxidc:~/www.linuxidc.com$ sudo npm install -g pm2 #安裝 PM2
第3步：使用Angular CLI建立Angular專案
現在進入伺服器的webroot目錄，然後使用Angular CLI建立，構建和提供Angular應用程式（稱為sysmon-app，將其替換為應用程式的名稱）。
$ cd /www.linuxidc.com/www/
$ sudo ng new linuxidc-app #按照提示
接下來，進入剛剛建立的應用程式（完整路徑為//www.linuxidc.com/www/linuxidc-app）目錄，並如圖所示為應用程式提供服務。
linuxidc@linuxidc:~/www.linuxidc.com/www$ cd linuxidc-app
linuxidc@linuxidc:~/www.linuxidc.com/www/linuxidc-app$ sudo ng serve
10% building 3/3 modules 0 active? ?wds?: Project is running at http://localhost:4200/webpack-dev-server/
? ?wds?: webpack output is served from /
? ?wds?: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 251 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.09 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.02 MB [initial] [rendered]
Date: 2019-08-06T02:34:59.415Z - Hash: 2ccc3c814b056e7d036e - Time: 21047ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
? ?wdm?: Compiled successfully.
從ng serve命令的輸出中，您可以看到Angular應用程式未在後台執行，您無法再存取命令提示字元。 因此，在執行時不能執行任何其他命令。
因此，您需要一個流程管理器來控制和管理應用程式：連續（永久地）執行它，並使其能夠在系統啟動時自動啟動，如下一節所述。
在轉到下一部分之前，按[Ctl + C]以釋放命令提示字元來終止該過程。
第4步：使用PM2永遠執行Angular專案
要使新應用程式在後台執行，請釋放命令提示字元，使用PM2為其提供服務，如圖所示。 PM2還可以幫助執行常見的系統管理任務，例如在故障時重新啟動，停止，重新載入設定而無需停機等等。
linuxidc@linuxidc:~/www.linuxidc.com/www/linuxidc-app$ pm2 start "ng serve" --name linuxidc-app
[PM2] Starting /bin/bash in fork_mode (1 instance)
[PM2] Done.
┌──────────────┬────┬──────┬────────┬────┬─────┬────────────┐
│ Name │ id │ mode │ status │ ? │ cpu │ memory │
├──────────────┼────┼──────┼────────┼────┼─────┼────────────┤
│ linuxidc-app │ 1 │ fork │ online │ 32 │ 0% │ 497.0 MB │
│ linuxidc-app │ 2 │ fork │ online │ 0 │ 0% │ 6.5 MB │
└──────────────┴────┴──────┴────────┴────┴─────┴────────────┘
Use `pm2 show <id|name>` to get more details about an app
接下來，要存取應用程式的Web介面，請開啟瀏覽器並使用地址http://localhost:4200進行導航，如以下螢幕截圖所示。
Angular CLI主頁：https://angular.io/cli
PM2主頁：http://pm2.keymetrics.io/
在本指南中，我們展示了如何使用Angular CLI和PM2流程管理器執行Angular應用程式。 如果您有任何其他想法可以分享或提出問題，請通過下面的留言欄聯絡我們。
相關文章