如图所示，进入安装插件页面：
再安装nodejs插件：
点击安装即可。
如上图所示，进入账号维护页面：
添加账号和密码，点击下边的保存：
拉倒最下边：
配置完成记得保存。
配置完成记得保存。
点击创建一个自由风格的工程：
备注说明：
（1）当前的jenkins工作空间目录为：/var/lib/jenkins/workspace/
（2）因为需要在远程ssh的服务器docker执行镜像的生成，远程服务器需要项目dist下的文件和Dockerfile、nginx.conf文件。所以这里提前把文件都复制到dist文件下边了，
其实可以随便那个目录都行，主要是后边配置ssh远程复制的时候，只执行一次远程连接复制。
（3）Dockerfile文件是vue项目根目录下创建的，生成镜像使用，具体内容如下：
FROM nginx EXPOSE 9527
（4）nginx.conf文件是vue项目根目录下创建的，生成镜像使用，具体内容如下：
# docker 部署使用 user nginx; worker_processes 1; 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; gzip_types text/plain application/javascript text/css; # 控制全局nginx所有请求报文大小，默认是1m,这里设置为500m client_max_body_size 500m; # 虚拟主机server块 server { # 端口 listen 9527; # 匹配请求中的host值 server_name localhost; # 监听请求路径 location / { root /usr/share/nginx/html; #docker 中容器的nginx默认的http目录 index index.html index.htm; } #这里就是和vue本地代理的意思一样，已API开头的路径都代理到本机的8801端口,测试站打包的前缀为/stage-api location /stage-api/ { rewrite ^/stage-api/(.*) /$1 break; proxy_pass http://192.168.30.139:8801; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } } include /etc/nginx/conf.d/*.conf; }
远程执行的脚本（方便复制）：
#!/bin/bash cd /usr/local/soft/project/zhxy-mhxt-web echo “在Dockerfile所在目录，利用Dockerfile构建镜像” echo “构建镜像start” docker build -t zhxy-mhxt-web . echo “构建镜像end” MICROSERVICE="zhxy-mhxt-web-container1" startflag=$(docker inspect --format ‘{{.State.Running}}‘ "$MICROSERVICE") exit=$(docker ps |grep "$MICROSERVICE") echo “容器的名称：” echo $MICROSERVICE echo “容器运行状态” echo $startflag start(){ echo "容器存在,删除容器" docker rm -f "$MICROSERVICE" echo "删除容器成功" echo "删除后创建容器" docker run -d -p 9527:9527 --name "$MICROSERVICE" --restart=always -v /usr/local/soft/project/zhxy-mhxt-web:/usr/share/nginx/html -v /usr/local/soft/project/zhxy-mhxt-web/nginx.conf:/etc/nginx/nginx.conf zhxy-mhxt-web echo "容器创建完成端口9527" } echo "开始启动" if [ "$exit" == "" ];then echo "没有容器，新建容器" docker run -d -p 9527:9527 --name "$MICROSERVICE" --restart=always -v /usr/local/soft/project/zhxy-mhxt-web:/usr/share/nginx/html -v /usr/local/soft/project/zhxy-mhxt-web/nginx.conf:/etc/nginx/nginx.conf zhxy-mhxt-web echo "第一次容器创建完成端口9527" else echo "容器存在" start fi echo “启动结束” docker ps -a docker run -d -p 9527:9527 --name "$MICROSERVICE" --restart=always -v /usr/local/soft/project/zhxy-mhxt-web:/usr/share/nginx/html -v /usr/local/soft/project/zhxy-mhxt-web/nginx.conf:/etc/nginx/nginx.conf zhxy-mhxt-web echo "删除未用镜像节省空间" docker rmi -f `docker images -a | grep ‘<none>‘ | awk ‘{print $3}‘` docker ps -a echo "运行成功"
备注：
1、/usr/local/soft/project/zhxy-mhxt-web就是上图中复制到远程的目录。
2、-v /usr/local/soft/project/zhxy-mhxt-web:/usr/share/nginx/html 把我们生成的dist（我们已经拷贝到zhxy-mhxt-web下边了）目录挂载到容器的/usr/share/nginx/html，/usr/share/nginx/html是nginx容器默认的http目录
3、-v /usr/local/soft/project/zhxy-mhxt-web/nginx.conf:/etc/nginx/nginx.conf 把我们的nginx.conf挂载到容器的/etc/nginx/nginx.conf，/etc/nginx/nginx.conf是nginx容器默认的配置文件
可以构建部署项目了，至此文档完成！
原文：https://www.cnblogs.com/yanlaile/p/14628023.html