最近项目，每次前后端打完包以后都要使用各种命令上传到服务器进行部署，时间上还是后期维护上都不是很好，花了一点时间研究了下jenkins这个平台，感觉挺适合我们这种懒惰的人，决定在mac上尝试下，结果到处都是坑，看了一些别人的文章也有格式各样的报错，打算自己整理一份基于Jenkins+docker+vue的基础部署方案。一方面方便自己以后查看，另一方面也供大家日常参考，写的不对的地方还请各位大佬指出，谢谢！

在进行部署前，最好了解下下面的知识点

Docker

参考 www.runoob.com/docker 在状态栏有docker图标

控制台输入命名docker -v

此外需要配置项国内镜像

Docker国内源说明：

Docker 官方中国区：https://registry.docker-cn.com

网易：http://hub-mirror.c.163.com

中国科技大学：https://docker.mirrors.ustc.edu.cn

阿里云：https://pee6w651.mirror.aliyuncs.com

Jenkins

搜索jenkins镜像hub.docker.com/ , 选择jenkinsci/blueocean

由于需要通过docker启动jenkins，又在jenkins中运行docker命令所以当直接run的时候会出现一些报错

Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?

这主要是docker客户机安装在jenkinsci/blueocean映像上，而不是守护进程上，Docker 采取的是 Client/Server 架构，我们常用的 docker xxx 命令工具只是 docker 的 client，我们通过该命令行执行命令时，实际上是在通过 client 与 docker engine 通信。Docker客户端需要一个Docker守护进程才能工作， Docker客户机将使用守护进程(默认情况下通过套接字unix:///var/run/ Docker .sock)，使用docker-in-docker (DinD)映像解决

可以选择link docker-dind

docker run --name docker-dind --privileged -d docker:stable-dind
docker run --name jenkins --link=docker-dind -d jenkinsci/blueocean
// 监听网络tcp套接字或者其他套接字需要配置相应-H选项
docker exec jenkins docker -H docker-dind images

由于docker守护进程会监听unix域套接字，可以对DOCKER_HOST ENV进行设置

docker run -d -p 8080:8080 -p 50000:50000
	-v ${yourpath}:/var/jenkins_home \
	-v /var/run/docker.sock:/var/run/docker.sock \ 
	-v /usr/local/bin/docker:/usr/bin/docker \
	--name ${containerName} ${imageName}

containerName 表示你定义的容器名

imageName 表示你生成的jenkins镜像

--name xxx 表示容器名字

-d 表示在后台运行

-v /Users/zhongjiafeng/Downloads/docker/jenkins:/var/jenkins_home 表示把新建的jenkins目录映射到容器的/var/jenkins_home目录，以后再宿主机进行修改就可以映射到容器内部

-p 就是端口映射

之后打开 http://localhost:8080/ 端口会看到

通过docker exec -it containerName /bin/bash进入容器，然后通过cat /var/jenkins_home/secrets/initialAdminPassword获取密码

2.选择安装推荐插件

3.等待几分钟创建完成后，一路保存完成下去

4.jenkins页面

Github账户配置

1.进入github，进行开发者设置

2.选择personal access tokens，进行仓库的一些配置

3.进入jenkins工作台，系统管理》》系统配置》》GitHub，进行添加jenkins

4.类型选择Secret text，输入刚才的token access密钥，进行连接测试看看是否连接正确

5.如果想在push的时候进行自动构建

此外还需要在jenkins平台内部对于此项目进行配置

*ps:配置webhook, 需要配置暴露给外部的ip地址，在本机上进行测试的话，推荐使用natapp用来做映射，下载natapp客户端文件配置端口号，即为你的访问jenkins的端口然后输入下面指令进行开启

chmod a+x natapp
./natapp -authtoken=你的authtoken值

Vue文件配置

通过vue create vueapp构建vue项目，然后push到github nginx.conf

server {
  listen       80;
  server_name  localhost;
  
  #charset koi8-r;
  access_log  /var/log/nginx/host.access.log  main;
  error_log  /var/log/nginx/error.log  error;

  location / {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
  }

  #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;
  }
}

Dockerfile

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/conf.d/default.conf

Node配置

选择系统管理》》插件管理》》可选插件

同样Manage Jenkins 》》Global Tool Configuration 》》 NodeJS 取一个别名

创建ITEM

新建item

2.选择freestyle project

3.General选择Github项目

4.源码管理写入仓库

5.构建环境选择node环境

6.构建选择shell语句配置

echo $PATH
node -v
npm -v
npm cache clean --force
npm install
npm run build

echo $PWD
docker stop vueappcontainer || true \
 && docker rm vueappcontainer || true \
 && docker rmi vueapp || true \
 && docker build  -t vueapp .

docker run -d -p 8083:80 --name vueappcontainer vueapp

7.进行构建

构建会出现错误信息

进行npm的时候可能会出现

Unexpected end of JSON input while parsing near

可以强制清除缓存：npm cache clean --force
或者将npm版本降版本：npm -g i npm@x

node not found

通过docker exec -u 0 -it <container_name> bash 然后执行apk add --no-cache nodejs，这个每次重启jenkins容器都要重写安装一遍，有点不方便。看到blueocean镜像体积比正常jenkins镜像小100M，可能是精简了一些导致找不到node依赖，可以替换镜像jenkins/jenkins镜像。