1. 安装jenkins

2. 安装nginx

yum install -y epel-release 
yum update  
yum install -y nginx

# 查看版本是否安装成功
nginx -v

#创建目录，放VUE打包后的文件
mkdir -p /opt/webapps/ruoyi-ui/

3. jenkins配置

这里我找了一个开源项目来部署 ruoyi-vue，这个项目比较喜欢。

安装nodejs 插件

安装后重启

配置nodejs

新建maven任务

源码管理

gitee.com/y_project/R…

构建环境

选择配置nodejs版本

构建

# jenkins 工作目录，这个目录怎么找呢，先去直接构建一次，在控制台输出中可以看到
cd /var/jenkins_home/workspace/ruoyi-ui/ruoyi-ui
rm -rf dist 
rm -rf dist.tar.gz # 
npm  install 
npm install html-webpack-plugin -D #如果没使用 html-webpack-plugin，可以删除这行
npm install --registry=https://registry.npmmirror.com
npm  run build:prod
tar zcvf dist.tar.gz dist

构建后操作

SSH Server：系统管理--> 系统配置--> SSH Servers。配置服务器

Transfer Set Source files：ruoyi-ui/dist.tar.gz，需要复制到远程服务器的文件

Remote directory：远程服务器目录，配置SSH Servers，有指定目录/opt/webapps/，

Exec command：远程服务器执行的命令

cd /opt/webapps/ruoyi-ui/
tar zxvf dist.tar.gz

配置打印详细输出，点高级勾选 Verbose output in console

方便看日志，查找问题

4. nginx配置

vim /etc/nginx/nginx.conf

server {
        # 端口
        listen       9091;
        server_name  localhost;
        charset utf-8;

        location / {
            #修改目录
            root   /opt/webapps/ruoyi-ui/dist;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

        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://localhost:8080/;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

#验证nginx配置
nginx -t

#重载配置
nginx -s reload

如报错
nginx: [error] invalid PID number "" in "/run/nginx.pid"

先执行
nginx -c /etc/nginx/nginx.conf

jenkins vue nginx部署