在Nginx服务器上用Jenkins发布Vue/React代码的步骤

　　先在Nginx服务器上的data目录（我放置前端项目的地方）下创建文件夹，放置项目在其他项目的旁边。

　　所以项目的文件路径是/data/zhijia365。

 

　　我们的目的有两个：

• 把静态html放置在服务器上，可以通过ip地址（不需要加路径）的方式访问到放置在Nginx下的静态html
• 通过Jenkins自动化发布静态html文件到Nginx的/data/zhijia365下

    先看第一个，我们看Nginx配置文件里面其中一个项目的server的ip地址：http://192.168.2.201:8080/，看得出项目之间并不是通过文件夹来区分的，而是通过端口号来区分。那我们可以在配置文件的http对象中增加一个这样的server对象：

server {
    listen 8082; //使用未经使用的端口号
    server_name localhost;
    location / {
        add_header Cache-Control no-store;
        root /data/zhijia365; //项目的文件路径
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

    然后再在shell上执行

$ nginx -s reload //重启浏览器

    浏览器访问 http://192.168.2.201:8084，完美打开。

 

    第二个，要新建一个Jenkins任务，来实现自动发布，替代人手放置文件的做法。现在Jenkins上新建一个项目，再在下面新建一个任务。

1.选择“一个自由风格的软件项目”，再复制一个类似的项目，以便配置

2.选择“舍弃旧的 ”构建，保持5天和5个的构建。方便回查记录。

3.选择git仓库的源码

4.构建环境选择node

5.接着是构建，选择执行shell。接下来我们在Jenkins中build一次项目，再把dist出来的文件移动到目标服务器上，执行解压。

npm -v
npm install
npm run build
tar -zcvf dist.tar.gz ./dist //把dist压缩成一个压缩包，准备放到服务器上

6.我们来增加一个步骤“Send files or execute commands over SSH”，把刚刚生成的压缩包放到目标服务器文件中。

mv ./dist.tar.gz /data/zhijia365; //放置到指定路径下
 
cd /data/zhijia365; //去到路径下
tar -zxvf ./dist.tar.gz ./; //解压文件
mv ./dist/* ./　　//把dist文件夹下的文件，移动到上一层中
rm -fr ./dist　　//删除dist文件夹
rm -fr ./dist.tar.gz;　　//删除压缩包

 

7.最后“构建后操作 ”步骤的操作，归档一个dist.tar.gz文件即可，用于回查。

8.点击“立即构建”，几十秒之后就可以从ftp上看到/data/zhijia365目录下多了一个html和static文件夹，发布完成。

 

注意

...................................................................................................

• 需要关闭webpack-bundle-analyzer，否则任务会一直转。
• 项目的文件名大小写需要和工作空间的一致，否则会出现本地能编译，但是服务器上却“file not found”。