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

1.Vue前端自动化

1.1 Linux端先安装 NodeJS

NodeJs 官方Ftp地址：Index of /dist/latest-v16.x/

下载nodejs的LTS版本

下载安装包
[root@localhost /]# wget https://nodejs.org/dist/latest-v16.x/node-v16.16.0-linux-x64.tar.gz
[root@localhost /]# 

解压
[root@localhost /]# tar xvzf node-v16.16.0-linux-x64.tar.gz -C /usr/local/
[root@localhost /]# 

修改环境变量
[root@localhost /]# vim /etc/profile

最后加入如下环境变量：

#nodejs
export PATH=/usr/local/node-v16.16.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 就好

cnpm安装：cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

1.2 在Jenkins 上NodeJS配置

“系统管理”–“全局工具设置”—” NodeJS 安装”

如果没有nodejs的配置，请先去插件里面安装好：

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

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

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

“系统管理”–“全局工具设置”—” NodeJS 安装”

2 配置Vue项目

2.1 新建项目

2.2 General设置

只保留一个历史构建。

2.3 源码管理

2.4 构建环境

2.5 构建


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 立即构建项目 – 运行我们的配置环境

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 ~]#