###前端页面部署

####打包项目
打包静态文件 上传到服务器

npm run build

你会得到一个build文件夹, 这里面的所有内容加起来

####服务器
打包好的项目直接上传到服务器

前提

1.服务器
2.域名
3.node环境
4.nginx环境

服务器

你可以租用各式各样的服务器, 此处, 我们选择 阿里云ECS -> CentOS 7.X系统.

长期的价格可能会比较贵, 有个小技巧是先在阿里云购买一个域名, 有可能你会得到一个优惠券, 域名几十块钱, 而优惠券价值 300 多, 用来购买年费的 ECS 花费 300多RMB(最低配), 当然, 如果你只是拿来练习, 貌似他们有提供 7天版本的, 短期练习是完全足够的 ~

域名

购买域名

然后, 把实名认证做了, 并尽早备案, 如果你希望通过域名访问你的应用, 而不是 ip:port, 此处不做细述, 有官方流程走(很漫长的审核过程建议预算一个月).

node环境

####部署

  1. 直接放在服务器web服务访问静态目录
  2. 通过node-static开启静态web服务

    node-static

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# serve up the current directory 
$ static
serving "." at http://127.0.0.1:8080
 
# serve up a different directory 
$ static public
serving "public" at http://127.0.0.1:8080
 
# specify additional headers (this one is useful for development) 
$ static -H '{"Cache-Control": "no-cache, must-revalidate"}'
serving "." at http://127.0.0.1:8080
 
# set cache control max age 
$ static -c 7200
serving "." at http://127.0.0.1:8080
 
# expose the server to your local network 
$ static -a 0.0.0.0
serving "." at http://0.0.0.0:8080
 
# show help message, including all options 
$ static -h

3.写个node运行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const express = require('express');
const path = require('path');

const host = 'xx.xx.xxx.xx';
const port = process.env.PORT || 8080;
const app = express();

app.use(express.static(__dirname));
app.get('*', (req, res) => {
 res.sendFile(path.reslove(__dirname, 'index.html'));
});

app.listen(port);

console.log(`server is running at ${host}:${port}`);

初始化项目, 指定入口名字别搞错了, 不然后面自己去 package.json 里面改.

npm init

安装express

npm install –save express

然后, 运行项目:

node app.js

安装pm2维持进程

npm install -g pm2

用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$ npm install pm2 -g     # 命令行安装 pm2 
$ pm2 start app.js -i 4  # 后台运行pm2，启动4个app.js 
                         # 也可以把'max' 参数传递给 start
                         # 正确的进程数目依赖于Cpu的核心数目
$ pm2 start app.js --name my-api # 命名进程
$ pm2 list               # 显示所有进程状态
$ pm2 monit              # 监视所有进程
$ pm2 logs               # 显示所有进程日志
$ pm2 stop all           # 停止所有进程
$ pm2 restart all        # 重启所有进程
$ pm2 reload all         # 0 秒停机重载进程 (用于 NETWORKED 进程)
$ pm2 stop 0             # 停止指定的进程
$ pm2 restart 0          # 重启指定的进程
$ pm2 startup            # 产生 init 脚本 保持进程活着
$ pm2 web                # 运行健壮的 computer API endpoint (http://localhost:9615)
$ pm2 delete 0           # 杀死指定的进程
$ pm2 delete all         # 杀死全部进程

运行进程的不同方式

1
2
3
4
5
6
7
8
9
10
11
12
$ pm2 start app.js -i max    # 根据有效CPU数目启动最大进程数目
$ pm2 start app.js -i 3      # 启动3个进程
$ pm2 start app.js -x        #用fork模式启动 app.js 而不是使用 cluster
$ pm2 start app.js -x -- -a 23   # 用fork模式启动 app.js 并且传递参数 (-a 23)
$ pm2 start app.js --name serverone  # 启动一个进程并把它命名为 serverone
$ pm2 stop serverone       # 停止 serverone 进程
$ pm2 start app.json        # 启动进程, 在 app.json里设置选项
$ pm2 start app.js -i max -- -a 23                   #在--之后给 app.js 传递参数
$ pm2 start app.js -i max -e err.log -o out.log  # 启动 并 生成一个配置文件
你也可以执行用其他语言编写的app  ( fork 模式):
$ pm2 start my-bash-script.sh    -x --interpreter bash
$ pm2 start my-python-script.py -x --interpreter python

####naginx配置

打开nginx 存放配置文件的目录:

cd /etc/nginx/conf.d

在这里, 你可以新建自定义规则的配置文件, 如:

vi domain-port.conf

其中, domain 代表域, port 表示端口, 只是为了更好的区分配置文件的用途和关联性, 命名也可以很随意

你可以在 domain-port.conf 这个文件写入如下内容, # 代表注释, js程序员理解成 // 即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
server {
  listen 80;

  # 域名 此处格式为 ip:port, 也可以是一个域名 www.baidu.com
  # ip 是你的服务器的公网ip, port 是你要跑应用程序的端口
  server_name xx.xx.xxx.xx:8080;

  location / {
     # 应用服务器的 http 地址
     # 服务是跑在本地的, 但外网访问默认的 TCP/IP 端口为80 已经被 nginx 代理
     # 接收到指定 server_name 的请求, 流量会被转发到指定的 8080 端口
     proxy_pass http://127.0.0.1:8080;
  }
}

检查配置文件的有效性:

nginx -t
重新加载 nginx 配置信息

nginx -s reload