CenOS7配置jenkins自动化部署VUE
安装与配置插件：Publish over SHH 与 node
1）配置远程服务器的连接（是帐号密码登录的Passphrase填写密码Username填写用户名，path to key 为空就可以了
点击测试验证是否连接成功
2）打开“系统管理”--“Global Tool Configuration” 拉到底部 配置 node 版本，如图：
这里node版本我们选择v9.11.2 这里的node版本很重要，会直接影响项目是否能够启动成功
如何选择 按照之前构建项目的nodeJs版本安装
两个目标：
- 把vue编译后的静态html放置在服务器上（这里我们使用/root/app/web/wh-web-master），可以通过ip地址（不需要加路径）的方式访问到放置在Nginx下的静态html
- 通过Jenkins自动化发布静态html文件到Nginx服务器上的我们的应用项目文件夹下（/root/app/web/wh-web-master）
Nginx访问配置
先看第一个，配置部署，编辑nginx/conf 下的nginx.conf，修改如下server对象：
首先我们先找到nginx服务器的安装目录
[root@ding local]# whereis nginx
nginx: /usr/sbin/nginx /usr/lib64/nginx /etc/nginx /usr/share/nginx /usr/share/man/man8/nginx.8.gz
[root@ding local]#
进入/etc/nginx ， 编辑nginx.conf
[root@ding nginx]# cat nginx.conf
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
include /etc/nginx/conf.d/*.conf;
}
[root@ding nginx]#
通过观察发现nginx.conf 中没有server的相关配置，这里可以看到 include /etc/nginx/conf.d/*.conf，切换到目录/etc/nginx/conf.d，查看
[root@ding nginx]# ^C
[root@ding nginx]# cd /etc/nginx/conf.d/
[root@ding conf.d]# ls -l
total 4
-rw-r--r--. 1 root root 1093 Dec 4 23:01 default.conf
[root@ding conf.d]#
编辑default.conf
[root@ding conf.d]# cat default.conf
server {
listen 8001;//自定义端口号
server_name localhost;//默认localhost就可以
charset koi8-r;
access_log /var/log/nginx/host.access.log main;
location / {
root /root/app/web/renren-fast/;
try_files $uri $uri/ @router;
index index.html index.htm;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET';
}
location @router{
rewrite ^.*$ /index.html last;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
Jenkins配置VUE工程
第二个，要新建一个Jenkins任务，来实现自动发布，替代人手放置文件的做法。现在Jenkins上新建一个项目，再在下面新建一个任务。
选择“一个自由风格的软件项目”，再复制一个类似的项目，以便配置
选择“舍弃旧的 ”构建，保持5天和5个的构建。方便回查记录。
3.选择svn仓库的源码
4.构建环境选择node
5.接着是构建，选择执行shell。接下来我们在Jenkins中build一次项目，再把dist出来的文件移动到目标服务器上，执行解压。
npm -v
npm install
npm run build
tar -zcvf dist.tar.gz ./dist //把dist压缩成一个压缩包，准备放到服务器上
这里修改成了：
cnpm -v
cnpm install
cnpm run build
tar -zcvf dist.tar.gz ./dist
6.我们来增加一个步骤“Send files or execute commands over SSH”，把刚刚生成的压缩包放到目标服务器文件中（/root/app/web/wh-web-master）。
#放置到指定路径下
mv ./dist.tar.gz /root/app/web/wh-web-master;
#去到路径下
cd /root/app/web/wh-web-master;
#解压文件
tar -zxvf ./dist.tar.gz ./;
#把dist文件夹下的文件，移动到上一层中
mv ./dist/* ./
#删除dist文件夹
rm -fr ./dist
#删除压缩包
rm -fr ./dist.tar.gz;
把上面脚本修改后，新建一个shell文件，存入，配置到Exec command
别忘了的执行权限放开：
[root@ding Jenkins-in]# chmod 777 wh-web-master.sh
7.最后“构建后操作 ”步骤的操作，归档一个dist.tar.gz文件即可，用于回查。
8.点击“立即构建”，几十秒之后就可以从ftp上看到/data/zhijia365目录下多了一个html和static文件夹，发布完成。
然后再在shell上执行
$ nginx -s reload //重启浏览器
浏览器访问 http://192.168.193.110:8989，完美打开。
注意
...................................................................................................
需要关闭webpack-bundle-analyzer，否则任务会一直转。
项目的文件名大小写需要和工作空间的一致，否则会出现本地能编译，但是服务器上却“file not found”。
遇到的问题：
问题描述：http://192.168.193.110:8011/ 总是提示无法访问
解决办法：
- 打开日志配置
[root@ding conf.d]# vi default.conf
重启nginx
[root@ding conf.d]# nginx -s reload
重新尝试登录http://192.168.193.110:8011/
查看日志：
[root@ding conf.d]# cd /var/log/nginx/
[root@ding nginx]# ls -l
total 140
-rw-r-----. 1 nginx adm 5584 Feb 18 18:44 access.log
-rw-r-----. 1 nginx adm 109483 Feb 18 19:06 error.log
-rw-r--r--. 1 root root 636 Feb 18 19:06 host.access.log
[root@ding nginx]# cat error.log
2019/02/18 09:23:11 [error] 6643#6643: *3 open() "/usr/share/nginx/html/favicon.ico" failed (2: No such file or directory), client: 192.168.193.1, server: localhost, request: "GET /favicon.ico HTTP/1.1", host: "192.168.193.110"
2019/02/18 10:04:33 [error] 6643#6643: *4 open() "/usr/share/nginx/html/favicon.ico" failed (2: No such file or directory), client: 192.168.193.1, server: localhost, request: "GET /favicon.ico HTTP/1.1", host: "192.168.193.110"
2019/02/18 10:24:42 [notice] 6773#6773: signal process started
2019/02/18 17:53:28 [emerg] 12206#12206: unknown directive "rewirte" in /etc/nginx/conf.d/default.conf:14
2019/02/18 17:54:00 [notice] 12209#12209: signal process started
2019/02/18 17:54:26 [crit] 12210#12210: *7 stat() "/root/app/web/renren-fast/" failed (13: Permission denied), client: 192.168.193.1, server: localhost, request: "GET / HTTP/1.1", host: "192.168.193.110:8001"
2019/02/18 17:54:26 [crit] 12210#12210: *7 stat() "/root/app/web/renren-fast/" failed (13: Permission denied), client: 192.168.193.1, server: localhost, request: "GET / HTTP/1.1", host: "192.168.193.110:8001"
2019/02/18 17:54:26 [crit] 12210#12210: *7 stat() "/root/app/web/renren-fast/index.html" failed (13: Permission denied), client: 192.168.193.1, server: localhost, request: "GET / HTTP/1.1", host: "192.168.193.110:8001"
2019/02/18 17:54:26 [crit] 12210#12210: *7 stat() "/root/app/web/renren-fast/index.html" failed (13: Permission denied), client: 192.168.193.1, server: localhost, request: "GET / HTTP/1.1", host: "192.168.193.110:8001"
2019/02/18 17:54:26 [crit] 12210#12210: *7 stat() "/root/app/web/renren-fast/index.html" failed (13: Permission denied), client: 192.168.193.1, server: localhost, request: "GET / HTTP/1.1", host: "192.168.193.110:8001"
2019/02/18 17:54:26 [crit] 12210#12210: *7 stat() "/root/app/web/renren-fast/index.html" failed (13: Permission denied), client: 192.168.193.1, server: localhost, request: "GET / HTTP/1.1", host: "192.168.193.110:8001"
2019/02/18 17:54:26 [crit] 12210#12210: *7 stat() "/root/app/web/renren-fast/index.html" failed (13: Permission denied), client: 192.168.193.1, server: localhost, request: "GET / HTTP/1.1", host: "192.168.193.110:8001"
可以定位是权限问题导致
- 讲nginx用户 切换为root
[root@ding nginx]# vi nginx.conf
#user nginx;
user root;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
include /etc/nginx/conf.d/*.conf;
}
重启nginx
[root@ding conf.d]# nginx -s reload
再次访问：
页面中文乱码问题
[root@ding conf.d]# vi default.conf
server_name localhost;
server {
listen 8011;
server_name localhost;
default_type ‘text/html’;
charset utf-8;
access_log /var/log/nginx/host.access.log main;
location / {
root /root/app/web/renren-fast/;
try_files $uri $uri/ @router;
index index.html index.htm;
}
location @router{
rewrite ^.*$ /index.html last;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
添加这两行后
default_type ‘text/html’;
charset utf-8;
重启nginx
[root@ding conf.d]# nginx -s reload
还有重要的一步，清理浏览器缓存，再次访问