jenkins自动化部署vue项目

朱雀 2021-09-28 13:52 741阅读 0赞

### jenkins自动化部署vue项目 ###

*   *   *  一、搭建node环境
         *   *   *  1. 下载linux版本的nodejs，并上传到linux下。
                 *  2. 解压并进行链接相关文件。
                 *  3. 安装cnpm
         *  二、jenkins环境搭建
         *  三、jenkins自动化部署配置
         *   *   *  1、创建一个自由风格的项目软件。
                 *  2、相关设置信息。
                 *  3、设置资源文件路径，表示将部署后的文件复制到/data/文件夹下，也可以自己指定不同的文件夹。

### 一、搭建node环境 ###

##### 1. 下载linux版本的nodejs，并上传到linux下。 #####

[https://nodejs.org/dist/v10.15.3/node-v10.15.3-linux-x64.tar.xz][https_nodejs.org_dist_v10.15.3_node-v10.15.3-linux-x64.tar.xz]

##### 2. 解压并进行链接相关文件。 #####

解压node：`tar xvf node-v10.15.3-linux-x64.tar.xz`  
重命名：`mv node-v10.15.3-linux-x64 node` ，这边将文件夹命名为node，方便进行ln链接的时候比较方便。  
链接：分别将node和npm链接到`/usr/local/bin`下，

ln -s /usr/local/node/bin/node /usr/local/bin/node
    ln -s /usr/local/node/bin/npm /usr/local/bin/npm

测试验证：

node -v
    npm -v

![验证][2019050810334289.png]

##### 3. 安装cnpm #####

因为npm是国外的，使用起来比较卡，这边添加了国内的npm，并使用淘宝镜像。

npm install -g cnpm --registry=https://registry.npm.taobao.org 
    ln -s /usr/local/node/bin/cnpm /usr/local/bin/cnpm
    cnpm -v

结果：  
![cnpm验证][cnpm]

### 二、jenkins环境搭建 ###

[https://blog.csdn.net/lxw983520/article/details/78903419][https_blog.csdn.net_lxw983520_article_details_78903419]

> 该文章主要是对tomcat部署项目环境自动化构建，不过安装过程是一样的，只是对项目配置上是不一样，并且需要安装插件工具NodeJs。安装完成后进入**全局工具配置**，配置刚才安装好的node环境。

![nodeJs插件配置][nodeJs]

### 三、jenkins自动化部署配置 ###

##### 1、创建一个自由风格的项目软件。 #####

![创建项目][20190527231230700.png]

##### 2、相关设置信息。 #####

1.  设置git路径。  
    ![设置git路径][git]  
    ![设置git路径][git 1]
2.  构建相关命令配置  
    ![构建相关命令配置][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzk4MzUyMA_size_16_color_FFFFFF_t_70]  
    **说明：** echo $PATH表示输出环境变量的值，npm -v和node -v表示查看node和npm的版本。输出这三个值的目的主要是为了在构建的时候可以在编译窗口上查看相关版本和环境变量信息。

##### 3、设置资源文件路径，表示将部署后的文件复制到/data/文件夹下，也可以自己指定不同的文件夹。 #####

![资源拉取路径][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzk4MzUyMA_size_16_color_FFFFFF_t_70 1]  
设置完成后进行保存和应用，进入主页面，点击立即构建，这时候可以查看控制台输出。示例：  
![示例][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzk4MzUyMA_size_16_color_FFFFFF_t_70 2]  
这样就成功将文件部署到/data/文件夹下了。

[https_nodejs.org_dist_v10.15.3_node-v10.15.3-linux-x64.tar.xz]: https://nodejs.org/dist/v10.15.3/node-v10.15.3-linux-x64.tar.xz
[2019050810334289.png]: /images/20210923/8140c43797944bf48a505a2cd38ca853.png
[cnpm]: /images/20210923/a75a8f7220a14a67ba0a284ebec802e3.png
[https_blog.csdn.net_lxw983520_article_details_78903419]: https://blog.csdn.net/lxw983520/article/details/78903419
[nodeJs]: /images/20210923/e267ff89ff304a628cddf885b76276fd.png
[20190527231230700.png]: /images/20210923/d59ea96769cb46189b6ee58de651940d.png
[git]: /images/20210923/cb49733e32c14172bc59a76798e053c2.png
[git 1]: /images/20210923/8d3a0e90a47f421e89b0131ae5aead2b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzk4MzUyMA_size_16_color_FFFFFF_t_70]: /images/20210923/0e80a75d5fce439bb2524265f2caf920.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzk4MzUyMA_size_16_color_FFFFFF_t_70 1]: /images/20210923/6e74346cd228495abdb9956e3a6e9768.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4dzk4MzUyMA_size_16_color_FFFFFF_t_70 2]: /images/20210923/4fef031655704a6993053a4c5dea7752.png