jenkins部署一个前端项目

前篇

CI/CD之jenkins

前言

CI/CDjenkins部署的最后一个章节了，来看一下如何使用jenkins自动部署前端项目到服务器上，这以vue3项目举例

描述

先大概描述下这个篇章中使用jenkins自动部署前端项目的原理：

• 1、jenkins自动拉取git仓库的代码
• 2、执行配置的脚本命令，打包项目，生产dist文件
• 3、将dist文件内容上传到指定的服务器的指定目录

所以这我们先手动在服务器将nginx配置好，配置一个端口，指定到某个目录下；jenkins部署的时候自动替换该目录下的文件

服务器nginx配置

• 创建存放项目打包文件的文件夹 /nginx-project/jenkins-test

cd /

mkdir nginx-project

cd nginx-project

mkdir jenkins-test

touch index.html // nginx部署测试，内容随便写

• 配置nginx文件

cd /etc/nginx

vi nginx.conf

• nginx.conf添加内容

server {
        listen 6688;
        location / {
                root /nginx-project/jenkins-test;
                try_files $uri $uri/ /index.html;
        }
}

• service start nginx 启动nginx

虚拟机端口映射

详细配置查看juejin.cn/post/735308...

nginx部署验证

ok，服务器nginx配置成功

jenkins自动化构建配置

插件安装

• Dashbord > 系统配置 > 插件管理
• 检查是否已安装以下插件 git Nodejs publish over ssh

如果未安装，点安装后需重启docker生效

Node配置

• 系统管理 -> 全局工具配置 -> NodeJS 安装
• 点击开NodeJS安装， 点击新增NodeJS

SSH Servers配置

• 系统管理 -> 系统配置 -> SSH Servers

• 配置好后测试是否配置生效，出现success，证明配置成功

新建jenkins任务

• Dashboard -> 新建任务 -> 构建一个自由风格的项目

配置git

这使用gitee仓库

添加gitee账户

• gitee生产令牌

选择部署分支

• 构建时：拉取git仓库代码到jenkins容器内指定目录下

构建触发器

勾选后，当部署分支的代码push后，会自动触发jenkins构建（需要服务器能公网访问才能生效，我们这由于是本地的虚拟机服务器，就没勾选了）

Build Step

• 构建时：jenkins容器拉取到的项目执行打包命令，生成dist打包文件
• 选择执行shell 命令

构建后操作

ok ，到这，一条jenkins流水线就已经配置成功了

构建

• 点击立即构建，查看构建详情

• 查看构建执行情况

• 构建成功

非常完美，一个jenkins自动化构建到这已经完全ok了，接下啦我们在验证以下端口访问

验证