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了,接下啦我们在验证以下端口访问

验证

相关推荐
Cloud Traveler21 小时前
第3天-Jenkins详解-3
运维·分布式·jenkins
u01040583621 小时前
电商导购平台的搜索引擎优化:基于Elasticsearch的商品精准推荐系统
elasticsearch·搜索引擎·jenkins
*老工具人了*1 天前
Terraform整合到GitLab+Jenkins工具链
gitlab·jenkins·terraform
码畜也有梦想1 天前
Maven中optional的作用
java·jenkins·maven
会飞的小蛮猪2 天前
Jenkins运维之路(Jenkins流水线改造Day02-1-容器项目)
ci/cd·自动化运维
三不原则2 天前
企业级CI/CD全流程实战指南
运维·ci/cd
增强3 天前
Gitlab CI/CD (二)语法学习
ci/cd
橙*^O^*安3 天前
Kubernetes集群部署Jenkins指南
云原生·容器·kubernetes·jenkins·devops
裸奔的大金毛3 天前
Tekton - 自定义镜像配置git仓库克隆
git·ci/cd·devops·tekton