Logo

# Jenkins教程 - 8 部署Vue到Nginx

现在使用 Jenkin 来部署 Vue 项目，将项目部署到 Nginx 目录下。

# 8.1 准备Vue项目

# 1 新建一个Vue项目

这里就不过多介绍 Vue 了，直接新建 Vue 项目，能运行访问即可。

# 2 将Vue项目托管码云

Jenkins 服务后面需要从 git 仓库拉取代码进行构建，这里使用 gitee 码云来托管代码，所以这里将 Vue 项目托管到码云。

这里细节就不介绍了，git 不太会的，可以学习本站的 git教程 (opens new window) 。

# 8.2 配置插件和工具

前面 Jenkins 环境安装 JDK、Git、Maven，JDK 和 Git 是部署哪种类型的项目都需要的，Maven 是构建 Maven 类型的项目才需要的。我们这里是部署 Vue 项目，所以就不需要管 Maven 了，这里使用 Node 来构建项目，所以需要安装 Node及相关插件。

# 1 安装Node插件

找到插件管理：

搜索NodeJS插件，然后安装：

# 2 配置NodeJS工具

在系统管理（Manage Jenkins） --> 全局工具配置（Tools） 中，找到 NodeJS 安装


新增一个 NodeJS，这里可以选择自动安装，那么Jenkins 会自动下载 NodeJS 进行安装，注意这里的版本，最好和自己的开发环境一致。

自动安装可能会存在构建任务的时候，半天下载不下来。


也可以手动下载 NodeJS 进行安装，如果手动安装，建议使用 nvm 来安装 node，这样还可以在想要的时候，切换 node 版本。

安装 nvm：（如果是使用的 docker 部署的 jenkins，则需要在容器中执行）

# 安装curl
sudo apt install curl

# 下载
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# 刷新环境变量
source ~/.bashrc

# 检查nvm版本，检查是否安装成功
nvm -v
1
2
3
4
5
6
7
8
9
10
11

但是上面的方式，因为网络原因还是可能安装失败，如果安装失败，实在不行，就去 github 上下载源码。然后解压到指定的目录。

例如我下载了 nvm-0.39.7.tar.gz，然后解压到 /usr/share 目录下（如果是使用 docker 部署 jenkins，可以下载完成，然后拷贝到容器中执行操作）：

cd /usr/share
tar -zxvf nvm-0.39.7.tar.gz
1
2

然后配置环境变量

vim ~/.bashrc
1

在 ~/.bashrc 文件中添加如下内容：

# nvm的安装路径
export NVM_DIR="/usr/share/nvm-0.39.7"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
# nodejs下载更换淘宝镜像
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node
1
2
3
4
5
6

然后刷新环境变量，并查看nvm版本：

# 刷新环境变量
source ~/.bashrc

# 检查nvm版本，检查是否安装成功
nvm -v
1
2
3
4
5

nvm使用

# 查看所有能安装的nodejs版本
nvm ls-remote 

# 安装指定的版本
nvm install 21.6.0

# 使用指定版本，临时有效
nvm use 21.6.0

# 设置默认版本
nvm use 21.6.0
nvm alias default 21.6.0
1
2
3
4
5
6
7
8
9
10
11
12

上面在查看和安装的时候可能会遇到一个问题，就是 nvm ls-remote 执行结果可能只显示"iojs-"开头的版本，那么尝试下面的方式：

# 由于网络问题nvm ls-remote执行结果可能只显示"iojs-"开头的版本，如果是这样，尝试下面的指令试试
NVM_NODEJS_ORG_MIRROR=http://nodejs.org/dist nvm ls-remote

NVM_NODEJS_ORG_MIRROR=http://nodejs.org/dist nvm install 21.6.0
1
2
3
4

上面 nodejs 已经下载并使用了 21.6.0 版本，然后需要配置 NodeJS 的安装路径，路径是在 nvm 目录下的。

# 3 安装SSH插件

这个插件的作用就是将 Jenkins 打包的Vue项目发送到的业务服务器上。

还是刚才安装插件的步骤：

# 4 配置业务服务器

后面需要将构建的 Vue 包发布到业务服务器，所以在这里配置一下要发布到的业务服务器的信息。

我也不知道选项为啥突然变成中文了，就是之前的 Manage Jenkins 下的 System 。

拉到最下面找到 Publish over SSH，安装完 SSH 插件才有这个选项。


Server是可以有多个的，新增一个 SSH Server。


配置上面几个选项就可以了，配置完成，在最下面有个测试的按钮，可以测试一下配置有没有问题，没有问题，保存配置。

# 8.3 创建构建任务

# 1 新建任务

在 Jenkins 管理页面，新建Item，也就是新建构建任务。

填写任务名称，选择构建一个自由风格的软件项目：

确定，然后继续项目配置。

# 2 源码管理

配置源码仓库地址和获取凭证：

# 3 构建环境

勾选 Provider Node & npm bin/folder to PATH 。

# 4 构建步骤

执行构建的时候，执行 npm 命令进行构建就可以了，所以在 Build Step 选择执行 shell：

# 安装依赖
npm install --force
# 构建
npm run build
# 将构建的结果打成压缩包，将dist打包为hello-jenkins.zip
zip -r hello-jenkins.zip dist
1
2
3
4
5
6

build 完成，会在 jenkins 工作空间下的构建任务目录下生成 dist 文件夹，通过 zip 将 dist 文件夹打包成 hello-jenkins.zip压 缩包，后面将这个压缩包发送到业务服务器。

因为上面用到了 zip 命令，所以需要在jenkins 服务器安装zip，如果用的是 docker 安装的jenkins，则在容器中安装zip。

sudo apt install zip
1

# 8.4 执行构建

任务创建了，先不部署到业务服务器，先测试一下能不能构建成功。点击任务后面的按钮，手动执行构建。

执行后，在构建执行状态列表，可以看到构建的进度。

可以点击进去查看构建的控制台信息：


如果已经构建完成，也可以点击任务进入任务信息页面，查看构建失败的原因：

摸索一下页面的功能就好了。

第一次构建需要的时间可能比较久，因为要下载很多依赖包。


构建如果成功，会显示成功，并在 jenkins 的工作空间下的 hello-jenkins 构建任务所在的目录下，生成 dist 目录，并生成了 hello-jenkins.zip 压缩包。

如果没有成功，可以看一下日志，失败的原因是什么。

# 8.5 部署到业务服务器

上面的步骤只是在 Jenkins 服务器上生成了dist 文件夹并打包，还没有传输到业务服务器上。下面继续。

# 1 配置传输

重新进入到构建任务的配置页面，在构建后操作中进行配置：

选择 Send files or execute commands over SSH 。

因为 Jenkins 服务和 业务服务不是在同一个服务器上，所以才使用 Send files or execute commands over SSH ，如果在一台服务器 上，直接选择 执行 shell 就可以了，都不用将文件推送到别的服务器，直接使用shell命令 mv 去移动文件就可以了。


这里传输 hello-jenkins.zip 到业务服务器，并解压到 nginx 目录下。

在构建任务的 Post Steps 的SSH Server填写如下配置：

上面的操作是将 hello-jenkins.zip 传输到业务服务器，并解压到 nginx 目录下，基本就完成发布了。

Exec commad 如下：

我这里请求到 nginx，项目文件是映射到 /home/doubi/docker_dir/nginx/html/dist 目录下的，也就是项目的 index.html 的路径是 /home/doubi/docker_dir/nginx/html/dist/index.html 。每次将 dist 删除，然后解压创建。

# 进入到压缩包所在目录
cd ~/projects/hello-vue3

# 创建文件夹，用来备份
mkdir -p packages
backupTimestamp=$(date +%Y%m%d%H%M)
# 备份
cp hello-jenkins.zip ./packages/$backupTimestamp-$fileName

# 进入到nginx目录下，删除之前的文件
cd /home/doubi/docker_dir/nginx/html
rm -rf dist

cd ~/projects/hello-vue3
# 将hello-jenkins.zip压缩包解压到nginx的html目录下
unzip hello-jenkins.zip -d /home/doubi/docker_dir/nginx/html/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 2 重新构建

现在配置好了，可以重新执行构建，在 Jekins 的控制台页面，可以查看构建日志：

可以看到是否构建和传输成功，根据提示信息修改即可。

在 Post Steps 的 Send files or execute commands over SSH 的高级中，有一个 Exec timeout 选项，表示执行超时时间，默认是2分钟，如果任务构建时间比较长，可以将时间设置的长一些。


将项目解压到 nginx 目录下就可以了，关于 nginx 这里就不多介绍了。

← 09-Jenkins集群配置 →