《自动化系列》Jenkins部署Vue NodeJS服务

骑猪看日落 2022-11-01 04:29 388阅读 0赞

## 1.Vue前端自动化 ##

### 1.1 Linux端先安装 NodeJS ###

[NodeJs 官方Ftp地址][NodeJs _Ftp]：[https://nodejs.org/dist/latest-v12.x/][NodeJs _Ftp]

下载nodejs的LTS版本

下载安装包
    [root@localhost /]# wget https://nodejs.org/dist/latest-v12.x/node-v12.21.0-linux-x64.tar.gz
    [root@localhost /]# 
    
    解压
    [root@localhost /]# tar xvzf node-v11.14.0-linux-x64.tar.gz -C /usr/local/
    [root@localhost /]# 
    
    修改环境变量
    [root@localhost /]# vim /etc/profile
    
    最后加入如下环境变量：
    
    #nodejs
    export PATH=/usr/local/node-v12.21.0-linux-x64/bin:$PATH
    
    然后保存退出
    
    
    刷新环境变量：
    [root@localhost /]# source /etc/profile
    [root@localhost /]# 
    
    安装npm与配置淘宝镜像
    [root@localhost /]# npm config set registry https://registry.npm.taobao.org
    [root@localhost /]#

> npm和 cnpm区别：  
> npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等） npm安装插件过程：从http://registry.npmjs.org下载对应的插件包（该网站服务器位于国外，所以经常下载缓慢或出现异常）。  
> cnpm是国内的淘宝团队分享的镜像，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。  
> cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。 
> 
> 我建议直接使用 npm 就好

### 1.2 在Jenkins 上NodeJS配置 ###

"系统管理"--"全局工具设置"---" NodeJS 安装"

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdvb28_size_16_color_FFFFFF_t_70][]

### 1.3 在Jenkins里添加npm配置文件，将npm源设为淘宝的 ###

"系统管理" -> "Managed files" -> "Add a new Config" -> 选择 "Npm config file" -> 提交

在内容里面更改 registry 内容，设为 registry = https://registry.npm.taobao.org

"系统管理"--"全局工具设置"---" NodeJS 安装"

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdvb28_size_16_color_FFFFFF_t_70 1][]

## 2 配置Vue项目 ##

### 2.1 新建项目 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODIzOTEw_size_16_color_FFFFFF_t_70]

### 2.2 General设置 ###

只保留一个历史构建。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODIzOTEw_size_16_color_FFFFFF_t_70 1]

### 2.3 源码管理 ###

### 2.4 构建环境 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODIzOTEw_size_16_color_FFFFFF_t_70 2]

### 2.5 构建 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lleGlhb21vZGVtbw_size_16_color_FFFFFF_t_70][]

BUILD_ID=DONTKILLME
    cd ${WORKSPACE}/zcsjw_manager_ui
    
    echo 'nodejs 打包'
    npm install
    npm run build:prod
    
    echo '删除已有的静态文件'
    rm -rf /home/zcsjw/ui/manager_ui/dist/*
    
    echo '新静态文件-复制到nginx的静态地址'
    cp -r ${WORKSPACE}/zcsjw_manager_ui/dist/* /home/zcsjw/ui/manager_ui/dist/

### 2.6 立即构建项目 - 运行我们的配置环境 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lleGlhb21vZGVtbw_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lleGlhb21vZGVtbw_size_16_color_FFFFFF_t_70 2][]

Jenkins的运行完全正常了，ok。

## 3 Nginx配置 ##

## 3.1 Nginx - 配置静态指引 ##

如果你没有安装nginx，安装一个，这个网络的资源实在太多。

简单的配置如下：

#user  nobody;
    worker_processes  1;
    
    #error_log  logs/error.log;
    #error_log  logs/error.log  notice;
    #error_log  logs/error.log  info;
    
    #pid        logs/nginx.pid;
    
    
    events {
        worker_connections  1024;
    }
    
    
    http {
        
        .................
    
    
        #最后一段，引用我们自己项目的配置信息
        include /usr/local/nginx/conf.d/*.conf;
    
    }

自己的配置文件内容如下：zcsjw_test.conf
    
    server{	
    	listen 8839;
            server_name  localhost;
            location / {
               root /home/zcsjw/ui/manager_ui/dist;
               try_files $uri $uri/ /index.html;
               index  index.html index.htm;
            }
            error_page 405 =200 http://$host$request_uri;
    	
    	location /prod-zcsjw-api/ {
                add_header 'Access-Control-Allow-Origin' '*';
                proxy_pass http://localhost:8840/;
        }
    }

然后重启的你的Nginx服务：

[root@localhost conf]# /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

## ** 3.2 把端口开放，阿里云自行配置安全组** ##

开放端口 8839端口
    [root@localhost ~]# firewall-cmd --zone=public --add-port=8839/tcp --permanent
    success
    [root@localhost ~]# 重启防火墙
    [root@localhost ~]# systemctl restart firewalld.service
    [root@localhost ~]#

## 4：查看的服务是否可用了 ##

输入地址：[http://192.168.2.400:8839/][http_192.168.2.400_8839]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lleGlhb21vZGVtbw_size_16_color_FFFFFF_t_70 3][]

[NodeJs _Ftp]: https://nodejs.org/dist/latest-v12.x/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdvb28_size_16_color_FFFFFF_t_70]: /images/20221024/6f498a4c1bed40c3ba3564be96290fe3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdvb28_size_16_color_FFFFFF_t_70 1]: /images/20221024/afbacb02966d455b825c1a4a1866d14c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODIzOTEw_size_16_color_FFFFFF_t_70]: /images/20221024/9f11845d95ef46478e788fd03a01a017.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODIzOTEw_size_16_color_FFFFFF_t_70 1]: /images/20221024/e592a487ef8d4577b2da92a457886f0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODIzOTEw_size_16_color_FFFFFF_t_70 2]: /images/20221024/aad52cc4c4004010ab1c310c4b0429ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lleGlhb21vZGVtbw_size_16_color_FFFFFF_t_70]: /images/20221024/5682b02f9c4c43118d424b5a67e411b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lleGlhb21vZGVtbw_size_16_color_FFFFFF_t_70 1]: /images/20221024/8940d064442f4f1ca2ecc064b83c7dc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lleGlhb21vZGVtbw_size_16_color_FFFFFF_t_70 2]: /images/20221024/f6ff2b8db8114663a544c63d1c9ceeb5.png
[http_192.168.2.400_8839]: http://192.168.2.196/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lleGlhb21vZGVtbw_size_16_color_FFFFFF_t_70 3]: /images/20221024/0cf470f817de4f0b85c5ef5302dc65ec.png