Angular+Express平台部署

发表于 更新于 本文字数： 2.1k 阅读时长 ≈ 3 分钟
本文是作者对Angular+Express平台部署的介绍，包括Angular+Express平台部署的优势、实现细节、相关资料等，这些步骤可以帮助作者提高Angular+Express平台部署的效率。

最近需要在云服务器部署下Web应用，这里简单Mark下，同需求的人姑且一看

部署背景

生产服务器:CentOS release 6.8 (Final)
网络环境:已联网
工作机器:Windows

废话不说，开始部署

终端连接

使用putty开启会话连接目标服务器

安装NVM

直接安装node，其实可以，但使用NVM安装node更为方便，版本变更也方便。

1
2
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

NVM官方仓库地址:点击这里

注意NVM安装后，会话需关闭重开启，才生效。

安装Node

1
nvm install 6

我这里安装的是6.x最新版。

安装NRM

NRM是何物，管理npm源的，由于我们身处上不去谷歌的自由国度，NPM下载包还是慢的很，所以安装NRM，切换到国内源，还是会快很多。

1
2
3
$ npm i nrm -g
$ npm ls
$ nrm use taobao

NRM官方网址:点击这里

部署项目

创建项目文件夹

1
2
3
mkdir /var/www
mkdir /var/www/projectName

根据Linux目录标准，var下存放经常变动的文件

拷贝web应用[前端dist文件夹+后端程序文件+第三方node_modules包]

Angular前端就是个dist文件夹，直接丢到该文件夹即可。后端应用也一样直接丢进去即可。
上传这些文件，可以用WinSCP直接上传。

由于后端是expressJS，牵扯到node_modules，可以直接将生产依赖的包，上传，或者直接在项目根路径下，执行npm i，即可将依赖的包安装上去。

安装PM2

PM2是何物,产品级进程管理器，官方网站:点击这里

PM2讲解，除官网外，可以看这里，我翻译的

1
2
$ npm i pm2 -g

环境变量

我的后端本身在开发和生产环境下，会走不同的一些配置，所以这里需要设定下NODE_ENV

1
2
3
4
5
6
7
8

$ vi /etc/profile

# 尾部加入
$ export NODE_ENV="production"

# 退出vi执行，加载配置命令，立即生效
$ source /etc/profile

启动应用

1
2
3
4
5
6
7
8
9
$ cd /var/www/projectName

# pm2启动应用，自定义名称
$ pm2 start app.js --name='projectName'

# 系统级服务设定，机器重启，自启动
$ pm2 save
$ pm2 startup

安装Nginx

1
2
yum -y install nginx

代理配置

nginx的配置文件在/etc/nginx/conf.d/default.conf,因为我的应用对外是80访问，所以这里直接在这里修改，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
server {
    listen       80 default_server;
    listen       [::]:80 default_server;
    server_name  _;
    root         /usr/share/nginx/html;

    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;

    location / {
         proxy_pass http://localhost:3001;
    }

    error_page 404 /404.html;
        location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }

}

注意:我是利用nginx直接代理了3001的web服务，web服务本身的静态、动态内容都是在3001下。当然也可以利用nginx管理静态资源，动态内容反向代理，均可。

启动nginx

由于是YUM安装nginx,所以可以直接使用nginx命令

1
2
3
4
5
6
7
8
9
# 启动nginx服务
$ nginx

# 重启nginx服务
$ nginx -s reload

# 停止nginx服务
$ nginx -s stop

nginx设定为自启动

实际生产环境，其实服务器会存在重启，所以这里也需要设定为自启动

1
$ chkconfig nginx on

开放对外服务端口

1
2
3
4
5
# 80端口开放
$ /sbin/iptables -I INPUT -p tcp –dport 80 -j ACCEPT

# 保存
$ /etc/rc.d/init.d/iptables save

如果临时测试的话，也可以考虑直接关闭防火墙，但安全性就不存在了。

1
2
$ service iptables stop # 停止服务

结语

fighting

大功告成，这个时候，直接访问服务器IP地址，就可以了，需要域名访问，就在DNS加条域名解析即可。

说明:因为实际部署我正好用的win机器，其实mac也差不多，部分工具有差异而已，比如win下用的putty,mac下推荐使用iterm2。
部署操作差别不大。

上述有对基本工具、基本命令不熟悉的，建议自行谷歌吧。