[手把手系列之] Jenkins+Docker自动化部署vue项目

介绍

本系列主要介绍如何自动化部署我们的前端和后端项目

本篇主要介绍如何自动化部署vue项目

下篇讲如何自动化部署nodejs项目

我这里是mac os,如果你用linux就不会碰到很多下面碰到的问题了。

相关应用

• jenkins
• docker

整个流程

首先我们把我们的电脑想象成一台服务器，当然如果你有服务器，也可以直接在服务器上，执行以下操作

我这里方便起见，就直接把我的电脑（mac）当做一台服务器，事实证明这里面很多坑！！！

注意区分以下本地和服务器的区别，其实我们这里都是我们的电脑

1. 我们在服务器（这里是我们的mac）上安装docker

2. 我们在服务器（这里是我们的mac）上用docker安装了jenkins

3. 我们本地新建一个vue项目，并推到github

4. 我们本地访问服务器上的jenkins，即打开网址http://localhost:8081 (如果是服务器这里localhost换成你服务器的ip)

5. 我们用jenkins拉了github的项目到jenkins的安装目录里的workspace/目录

6. jenkins使用执行shell跑了命令

npm install
npm run build

这里我们需要给jenkins安装nodejs插件

7. 我们用jenkins ssh连接到我们的服务器

这里我们需要安装Publish Over SSH插件，并配置好服务器

8. 在服务器（这里是我们的mac）上执行以下操作

把我们的vue项目打包成镜像vuenginxapp

用这个镜像创建一个容器vuenginxapp

安装docker

请参考 https://www.runoob.com/docker/macos-docker-install.html

我这里是mac, 安装成功之后，在状态栏有docker图标

这时命令行输入docker -v

则说明安装成功

docker安装jenkins

题外话：你也可以不通过docker安装，可以参考我的另一篇文章Mac安装jenkins

搜索jenkins镜像

https://hub.docker.com/ 是docker存放image(镜像)的地方，界面如下：

我们搜索一下要安装的jenkins镜像

注意: 虽然第一个是docker官方维护的版本，但它很长时间没有更新了，是一个过时的版本。所以这里我们要安装第二个，这个是jenkins维护的

ps：我们也可以通过命令行搜索,命令是docker search jenkins

docker安装jenkins

新建一个目录jenkins_home，如我这里是

执行命令

docker run --name jenkins_node -d -v /Users/isaacho/Documents/application/docker/jenkins_home:/var/jenkins_hom