jenkins 构建vue前端项目

参考部署

1.jenkins选择项目类型

注：vue项目选择freestyle project

2.配置git信息

3.配置nodejs的jenkins插件

http://updates.jenkins-ci.org/download/plugins/token-macro/2.15/token-macro.hpi
http://updates.jenkins-ci.org/download/plugins/config-file-provider/3.8.0/config-file-provider.hpi
http://updates.jenkins-ci.org/download/plugins/nodejs/1.4.0/nodejs.hpi

4.下载nodejs安装包并解压

wget https://nodejs.org/dist/v12.13.0/node-v12.13.0-linux-x64.tar.xz
xz -d node-v12.13.0-linux-x64.tar.xz                    #第一步解压
tar -xvf node-v12.13.0-linux-x64.tar                    #第二步解压

5.配置nodejs环境变量

[root@localhost ~]# vi /etc/profile

    NODE_HOME=/usr/node/node-v12.13.0-linux-x64                                     #node的解压目录 
    PATH=$PATH:$NODE_HOME/bin
    NODE_PATH=$NODE_HOME/lib/node_modules
    export PATH NODE_HOME NODE_PATH

[root@localhost ~]# source /etc/profile   //执行后生效
[root@localhost ~]# node -v    //查看node版本
[root@localhost ~]# npm -v   //查看npm版本

6.nodejs软连接

ln -s /usr/node/node-v12.13.0-linux-x64/bin/node  /usr/local/bin/node
//使得nodejs在任何地方都能使用
[root@localhost ~]# mkdir -p /usr/web/build  //创建web/build文件夹

7.勾选nodejs选项

勾选  Build Environment -->
                   Provide Node & npm bin/ folder to PATH

8.打包脚本编写

#!/bin/sh -l
npm install 
rm -rf ./dist/*
npm run build:prod
rm -rf /usr/web/build/*
cp -rf ./dist/* /usr/web/build/

注：
    文件首行添加：  #!/bin/sh -l 代表shell脚本是登录方式，若不添加则非登录
    npm install :下载工作区npm包<br >
    rm -rf ./dist/* :删除dist目录下的所有文件,dist目录即为当前jenkins工作区打包后的文件。<br >
    npm run build :执行打包命令<br >
    rm -rf /usr/web/build/* :删除服务器上/www/web/site/ 目录下的所有文件/www/web/site/ 为服务器项目放置位置。<br >
    cp -rf ./dist/* /usr/web/build/ :把当前构建工作区dist目录里的文件 copy 到服务器/www/web/site 文件夹下。

    若下载依赖失败，可手动导入

9.启动

(1).express-generator启动

mkdir -p /usr/express_generator/
npm install express-generator -g
express expressBuild
cd expressBuild 
npm install  
cp -r ./ /usr/express_generator/expressBuild/public/ //dist目录下的所有文件复制到express项目的public文件夹下
npm start
访问：   http://ip:3000

(2).nginx启动

A：下载安装nginx

B：配置nginx.conf

http {
    server {
        listen       8000;   //访问端口
        server_name  localhost;

        location / {
            root   html/projectManage_qd;  //配置存放vue打包后dist文件内容
            index  index.html index.htm;  //此处的index.html 指向的是dist后的index.html
        }
        //配置代理
        location /prod-api/{
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://172.18.11.187:8089/;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

C：启动nginx

start nginx 启动
nginx -s reload  刷新
 访问： http://ip:8000/  自动跳转到系统登录页