使用Jenkins + Docker Nginx一键打包部署前端应用

安装 Docker Nginx
1.查找 Docker Hub 上的 nginx 镜像

docker search nginx

2.拉取官方的Nginx镜像

docker pull nginx

3.在本地镜像列表里查到 REPOSITORY 为 nginx 的镜像

docker images nginx

4.创建本地目录，用于存放Nginx的相关文件信息.

mkdir -p /mydata/nginx/html /mydata/nginx/logs /mydata/nginx/conf

其中：

html: 目录将映射为 nginx 容器配置的虚拟目录。
logs: 目录将映射为 nginx 容器的日志目录。
conf: 目录里的配置文件将映射为 nginx 容器的配置文件。

5.创建 nginx.conf

cd  /mydata/nginx/conf
vim nginx.conf

# 新建
user root;
worker_processes  auto;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
    client_max_body_size   20m;   
    server {
        listen       80;
	server_name  XXX.XX.XX.128;

        #charset koi8-r;
	charset utf-8;
        #access_log  logs/host.access.log  main;
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location /prod-api {
            add_header 'Access-Control-Allow-Origin' '*';
            rewrite /prod-api/(.+)$ /$1 break;
            proxy_pass http://XXX.XX.XX.128:8080;
        }
	error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

6.部署命令

docker run --rm -d -p 9090:80 --name nginx \
  -v /mydata/nginx/html:/usr/share/nginx/html \
  -v /mydata/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
  -v /mydata/nginx/logs:/var/log/nginx \
  nginx:1.17.5

7.创建 index.html

cd /mydata/nginx/html
vim index.html 

# 添加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nginx test !!!</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

在浏览器中打开http://106.XX.XX.XXX:9090

在Jenkins安装NodeJS插件
在系统设置->插件管理中选择安装插件；

搜索NodeJS插件并进行安装；

重启生效

在系统设置->Manage Credentials

点击【Jenkins】

点击【全局凭证】

点击【添加凭证】

选择和输入远程服务器凭证（这里了选用户名密码做凭证）

在系统设置->全局工具配置中进行 NodeJS 插件配置；

在系统设置->系统配置中进行 SSH remote hosts 配置；

创建任务

任务执行流程如下：

新建任务 -> 构建一个自由风格的软件项目：

源码管理

构建环境

构建

构建脚本如下：

# 查看版本信息
npm -v
# 解决存放在Github上的sass无法下载的问题
SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass
# 将镜像源替换为淘宝的加速访问
npm config set registry https://registry.npm.taobao.org
# 安装项目依赖
npm install
# 项目打包
npm run build:prod

添加一个使用ssh执行远程脚本的构建，用于将我们打包后的代码发布到Nginx中去：

远程执行脚本如下：

docker stop nginx
echo '----stop nginx----'
rm -rf /mydata/nginx/html
echo '----rm html dir----'
cp -r /mydata/jenkins_home/workspace/ruoyi-vue/ruoyi-ui/dist /mydata/nginx/html
echo '----cp dist dir to html dir----'
docker start nginx
echo '----start nginx----'

立刻构建