jenkins部署一个前端项目

前篇

CI/CD之jenkins

前言

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

描述

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

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

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

服务器nginx配置

  • 创建存放项目打包文件的文件夹 /nginx-project/jenkins-test
bash 复制代码
cd /

mkdir nginx-project

cd nginx-project

mkdir jenkins-test

touch index.html // nginx部署测试,内容随便写
  • 配置nginx文件
bash 复制代码
cd /etc/nginx

vi nginx.conf
  • nginx.conf添加内容
bash 复制代码
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了,接下啦我们在验证以下端口访问

验证

相关推荐
东林牧之1 小时前
CICD[导航]、docker+gitlab+harbor+jenkins从安装到部署
docker·gitlab·jenkins
biass17 小时前
jenkins角色权限
运维·jenkins
tomorrow.hello17 小时前
Jenkins Pipeline(二)
运维·jenkins
会又不会1 天前
Jenkins-Publish HTML reports插件
运维·jenkins
庸子2 天前
基于Jenkins和Kubernetes构建DevOps自动化运维管理平台
运维·kubernetes·jenkins
裁二尺秋风2 天前
CI/CD — Pipeline的使用以及Blue Ocean多分支流水线的使用方法
ci/cd·gitlab·jenkins
真实的菜2 天前
Jenkins 插件深度应用:让你的CI/CD流水线如虎添翼 [特殊字符]
servlet·ci/cd·jenkins
ldj20202 天前
Jenkins 构建过程常见错误
运维·jenkins
绝不偷吃2 天前
ELK日志分析系统
运维·elk·jenkins
元媛媛3 天前
什么是持续集成/持续交付(CI/CD)?
ci/cd