PM2+Apache部署Angular Universal服务器渲染项目

前言

如果直接通过node app来启动，如果报错了可能直接停在整个运行，所以我选择了好评度较高的pm2来管理我的ssr服务。pm2是一个进程管理工具，维护一个进程列表，可以用它来管理你的node进程，负责所有正在运行的进程，并查看node进程的状态，也支持性能监控，负载均衡等功能。

PM2的主要有以下特性:

• 内建负载均衡（使用Node cluster 集群模块）
• 后台运行
• 0秒停机重载
• 具有Ubuntu和CentOS 的启动脚本
• 停止不稳定的进程
• 控制台检测
• 提供 HTTP API
• 远程控制和实时的接口API ( Nodejs 模块,允许和PM2进程管理器交互 )

我的一些基础配置信息：

主机系统为：Ubuntu_16.04_64
项目Angular版本为：5.2.7

第1步：安装Apache

Apache在Ubuntu的默认软件库中可用，因此我们将使用传统的软件包管理工具进行安装。
我们将从更新本地包索引开始，以反映最新的上游更改。 之后，我们可以安装apache2包：

sudo apt-get update
sudo apt-get install apache2

第2步：安装node

sudo apt-get install nodejs
sudo apt-get install nodejs-legacy
sudo apt-get install npm 

查看node和npm版本

由于默认安装的版本过低，需要升级一下node版本，下面我用nvm来更新node的版本到10.15.3

安装nvm

sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash 
sudo source ~/.bashrc
sudo nvm install v10.15.3

升级后的版本如下：

第3步：全局安装angular

npm install -g @angular/cli

第4步：上传项目

这里，我在/var/www/html下创建一个文件夹ngssr来存放我的项目，把项目上传到ngssr下:

进入项目目录:

cd /var/www/html/ngssr

安装项目依赖:

npm install

我的package.json中的scripts部分命令如下：

"scripts": {
    "ng": "ng",
    "start": "run-p build:dev nodemon",
    "build": "run-s build:client build:aot build:server",
    "build:client": "ng build --prod --app 0",
    "build:aot": "ng build --aot --app 1",
    "build:server": "webpack -p",
    "build:dev": "run-p build:dev:client build:dev:aot build:dev:server",
    "build:dev:client": "ng build -w --aot --app 0",
    "build:dev:aot": "ng build -w --aot --delete-output-path=false --app 1",
    "build:dev:server": "webpack -w",
    "nodemon": "sleep 25 && nodemon --watch dist/browser/index.html --watch dist/server.js dist/server.js",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
}

执行命令进行打包：

npm run build

第5步：安装PM2

使用npm使用以下命令安装PM2：

npm install pm2 -g

运行项目:

pm2 start dist/server.js

PM2常用的命令行如下：

pm2 start app_name|app_id 启动应用
pm2 logs 显示所有进程日志
pm2 list 查看所有进程
pm2 status 查看所有的进程状态
pm2 stop all 停止所有进程
pm2 stop app_name|app_id 停止指定的进程
pm2 restart all 重启所有进程
pm2 reload all 0秒停机重载进程
pm2 restart app_name|app_id 重启指定的进程
pm2 startup 产生 init 脚本保持进程活着
pm2 delete app_name|app_id 删除指定的进程
pm2 delete all 删除全部进程

想了解更多关于PM2的用法，请请前往官网http://pm2.keymetrics.io/。

第6步：配置Apache代理

要从Web访问Node服务项目，我们需要安装Apache模块代理和proxy_http，命令如下：

sudo a2enmod proxy
sudo a2enmod proxy_http

安装完成后，需要重启Apache以使更改生效：

sudo service apache2 restart

接下来，我们需要添加Apache代理配置。需要将这些指令插入站点主Apache配置文件中的VirtualHost命令块。这个Apache配置文件通常是Ubuntu上的/etc/apache2/sites-available/node.efly.cc.conf。
注意：站点的Apache配置文件的位置和文件名可能有所不同。这里我不分域名配置文件了，直接修改我的主机主配置文件，进入配置文件：

vi /etc/apache2/apache2.conf

配置文件如下：

<VirtualHost *:80>
   DocumentRoot /var/www/html/ngssr/dist/
   ServerName node.efly.cc
   ProxyRequests Off
   ProxyPreserveHost On
   <Proxy *>
      Order Deny,Allow
      Allow from all
   </Proxy>

    ProxyPass / http://localhost:3000/
    ProxyPassReverse / http://localhost:3000/

    <Directory "/">
        AllowOverride All
    </Directory>
</VirtualHost>

重启服务：

service apache2 restart

通过浏览器访问node.efly.cc可以正常访问项目，效果如下:

至此，Angular universal 的node项目在服务器部署就结束了，希望能给你们带来参考价值。后期一些PM2优化配置请参考https://github.com/jawil/blog/issues/7。