Ubuntu下实现Jenkins利用Docker自动化部署vue项目

环境说明：

操作系统：Ubuntu 18.04 64位（阿里云服务器）
Jenkins：2.235.1
Docker：19.03.12

整体流程：

Linux服务器上安装Docker
Linux服务器上安装Jenkins
准备一个VUE项目，代码传到GitHub上
配置jenkins，build项目
访问浏览器可以看到VUE项目成功部署

说明：

　　宿主机上的Jenkins会先到你的GitHub代码位置去拉取代码到Jenkins自己的工作目录，Compile前端代码后生成dist目录，然后Jenkins会通过docker命令创建一个基于nginx的image，通过该image运行一个container（将配置及dist目录中文件进行挂载），最终达到自动化部署VUE项目。其实还是将你的静态资源文件放在nginx上去提供服务的。

1.Ubuntu安装Docker

# 更换国内软件源（略）
# 安装所需要的包
sudo apt install apt-transport-https ca-certificates software-properties-common curl

# 添加 GPG 密钥，并添加 Docker-ce 软件源，这里中国科技大学的 Docker-ce 源
curl -fsSL https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu 
$(lsb_release -cs) stable"

# 添加成功后更新软件包缓存
sudo apt update

# 安装 Docker-ce
sudo apt install docker-ce

# 设置开机自启动并启动 Docker-ce（安装成功后默认已设置并启动，可忽略）
sudo systemctl enable docker
sudo systemctl start docker

# 测试运行
sudo docker run hello-world

# 添加当前用户到 docker 用户组，可以不用 sudo 运行 docker（可选）
sudo groupadd docker
sudo usermod -aG docker $USER

# 测试添加用户组
docker run hello-world

　　测试运行结果如图，则安装成功：

　　参考：https://www.runoob.com/docker/ubuntu-docker-install.html

2.Ubuntu安装Jenkins

　　p.s.我这里没有用docker部署jenkins，是直接在宿主机中安装的。主要是考虑到docker中的jenkins再运行docker有种套娃的感觉，比较绕，所以干脆直接在宿主机安装了。

# 判断是否安装jdk
java -version

# 如果没有安装jdk，则安装jdk
sudo apt-get install openjdk-8-jdk

# 再次查看jdk
java -version

# 将存储库密钥添加到系统
wget -q -O - https://pkg.jenkins.io/debian/jenkins-ci.org.key | sudo apt-key add -

# 将Debian包存储库地址附加到服务器的sources.list
 echo deb http://pkg.jenkins.io/debian-stable binary/ | sudo tee /etc/apt/sources.list.d/jenkins.list

sudo apt-get update

sudo apt-get install jenkins

# 启动Jenkins
sudo systemctl start jenkins

# 使用status命令验证是否成功启动
sudo systemctl status jenkins

# 查看jenkins进程
ps -ef | grep jenkins

　　进程如图，此时访问你的地址:8080就可以看到jenkins的页面了，安装成功：

　　这里还需要将jenkins用户添加到docker组，不然后面jenkins执行脚本使用docker命令的时候会报权限不足类似的错：

# 查看docker用户组成员
root@Colin:~# cat /etc/group |grep docker
docker:x:999:root

# 将jenkins用户添加到docker组
root@Colin:~# sudo gpasswd -a jenkins docker
Adding user jenkins to group docker

# 查看docker用户组成员
root@Colin:~# cat /etc/group |grep docker
docker:x:999:root,jenkins

# 重新启动docker服务
root@Colin:~# sudo systemctl restart docker

# 赋予权限
root@Colin:~# sudo chmod a+rw /var/run/docker.sock

3.准备一个VUE项目，代码传到GitHub上

　　我这里是用Vue CLI脚手架初始化了一个项目，可以参考官网：https://cli.vuejs.org/

　　按照官网生成项目后，注意，还需要在项目根目录加几个文件，参考官网：https://cli.vuejs.org/guide/deployment.html#docker-nginx

　　目录如图：

　　.dockerignore

**/node_modules
**/dist

　　Dockerfile

FROM nginx
EXPOSE 80

　　nginx.conf

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;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  localhost;
    location / {
      root   /usr/share/nginx/html;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}

　　项目准备好build后，进入生成的dist文件夹，浏览器打开index.html，类似下图则没有问题，提交代码到自己的GitHub上：

4.配置jenkins，build项目

　　修改jenkins端口：修改/etc/default下的jenkins即可，这里修改端口号为8082。然后重启service jenkins restart即可，访问8082端口就可以看到jenkins的页面了。

　　进入/var/lib/jenkins/secrets查看密码输入

　　可以选择安装建议的插件

　　插件安装完成后，创建一个Jenkins用户

　　进入控制台页面

　　安装node插件

　　点击左边Manage Jenkins --> Manage Plugins --> available 上面搜索nodejs，选择然后install without restart，我这里已经安装过了

　　选择安装nodejs版本

　　点击左边Manage Jenkins --> Global Tool Configuration，拉到页面最下方，名字随意，然后save

　　新建任务

　　左边New Item，如图，然后OK。（我这里已经创建过一个同名的了）

echo $PATH 
node -v 
npm -v 
npm install 
npm run build

docker stop vuenginxapp || true 
 && docker rm vuenginxapp || true 
 && cd /var/lib/jenkins/workspace/booking-centre 
 && docker build -t vuenginxapp . 
 && docker run -d -p 8083:80 --name vuenginxapp -v /var/lib/jenkins/workspace/booking-centre/dist:/usr/share/nginx/html -v /var/lib/jenkins/workspace/booking-centre/nginx.conf:/etc/nginx/nginx.conf vuenginxapp

　　/var/lib/jenkins需要替换为你自己的路径，我这里就是jenkins默认的工作目录位置。

　　配置好之后save，然后构建项目

　　可以查看控制台输出

5.访问浏览器可以看到VUE项目成功部署

　　p.s.需要你把云服务器的8083端口放开

　　完成

　　参考：https://www.cnblogs.com/aoping/articles/11770410.html

P.S.

　　进入Jenkins工作目录可以看到拉取的代码，以及Compile后生产的dist目录。

　　通过docker命令可以看到生成的images和container。