jenkins CI - 部署web项目(nginx)

在上篇jenkins CI - 脚本里上传构建产物 => （线上部署）对于构建好的APP(apk，ipa)，是上传到蒲公英的服务器以供下载。但是web项目是执行npm run build:prod后，拿到产物（本项目是dist）上传到我们自己的测试服务器上对应的目录，不过还需要部署。

产物

产物大概是这样的：

含有静态资源的前端项目目录

上传后的目录

根据jenkins CI 脚本里的配置：

dist被上传后在服务器上这个目录：

nginx

location配置

假定/root/xlfd/production是一个工作区，下面还会有其他一些项目的待部署资源。

# 将/root/xlfd/production设为root
# 并且写到location外面，其他的location都会匹配它
root /root/xlfd/production;
location / {
    # dist产物内的index.html为入口
    index  /dist/index.html;
}
# 其他location配置
location /xx {
    index  /xx/xx;
}
location /xx1 {
    index  /xx1/xx1;
}

问题

reload后访问listen的端口，我这里是80端口：

发现是空白的，只有title显示出来了

打开DevTools：

根据服务器上的目录对比，发现部分文件的url不正确，导致其获取失败。

这里的static的根目录指向成了nginx.conf中设定的root /root/xlfd/production;

我们直接访问http://www.xxxx.cn/dist/static/css/chunk-elementUI.ded27da0.css，发现可以正确访问到

尝试解决

修改路径

从上面看到是资源路径不匹配，可以修改构建工具（webpack）使得dist内static/xx/xxx替换为dist/static/xx/xxx

修改配置

为了不影响其他已经以/root/xlfd/production为根目录的项目，可如下配置：

root /root/xlfd/production;
   	
location / {
    alias /root/xlfd/production/dist/;
    index index.html;
}

或者

root /root/xlfd/production;

location / {
    root /root/xlfd/production/dist;
    index index.html;
}

亦或

root /root/xlfd/production;

location / {
    index  /dist/index.html;
}

location /static {
    root /root/xlfd/production/dist;
}

还有其他处理方法，就不一一尝试了。了解location的匹配规则以及root和alias的使用规则后都能很好的解决。

koa

除了可以使用nginx来部署外，也可以使用koa，详情node-koa

命令行工具

不建议这样操作，建议直接手动修改，因为再有新的修改，push后jenkins会自动同步到服务器，而nginx.conf中已经配置过项目的目录，所以可以访问到修改后的内容。且需要修改的参数很多，命令行出来后，一次性需要输入大量的参数，所以仅是为了熟悉node怎样编写命令行工具

可以看到配置这一步还是需要手动去修改，那可不可以在jenkins内用一个脚本去完成呢？

脚本应该

可以配置新的server

可以在旧的server里插入location

可以根据项目名配置loaction

可以重启nginx

这里使用node脚本去完成，大概的思路是：手动在ngin.conf中定义两类标识对应上面三个功能；根据脚本参数替换标识；重启使nginx配置生效。具体请查看node-实现命令行工具