CenOS7配置jenkins自动化部署VUE

安装与配置插件:Publish over SHH  与 node

 1)配置远程服务器的连接(是帐号密码登录的Passphrase填写密码Username填写用户名,path to key 为空就可以了

https://i-blog.csdnimg.cn/blog_migrate/e8aeecb8a287a3756f5e962f395da096.png

点击测试验证是否连接成功

2)打开系统管理”--“Global Tool Configuration”   拉到底部 配置  node 版本,如图:

这里node版本我们选择v9.11.2  这里的node版本很重要,会直接影响项目是否能够启动成功

如何选择  按照之前构建项目的nodeJs版本安装

 

 

两个目标:

  1. 把vue编译后的静态html放置在服务器上(这里我们使用/root/app/web/wh-web-master),可以通过ip地址(不需要加路径)的方式访问到放置在Nginx下的静态html
  2. 通过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/  总是提示无法访问

解决办法:

  1. 打开日志配置

[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"

 

可以定位是权限问题导致

  1. 讲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

 

还有重要的一步,清理浏览器缓存,再次访问

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值