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

验证

相关推荐
一张假钞8 小时前
Jenkins 项目迁移
ci/cd·jenkins
软件测试君13 小时前
Jenkins Share Library教程 —— 开发入门
jenkins
Broken Arrows2 天前
如何在Linux服务器上部署jenkins?
linux·jenkins
19岁开始学习2 天前
PHP操作elasticsearch7.8
elasticsearch·jenkins·php
wearegogog1232 天前
Centos7下docker的jenkins下载并配置jdk与maven
java·docker·jenkins
gb42152872 天前
elasticsearch索引多长时间刷新一次(智能刷新索引根据数据条数去更新)
大数据·elasticsearch·jenkins
故事很腻i3 天前
安装elk
运维·elk·jenkins
小醉你真好3 天前
15、Docker Compose 安装ELK + Filebeat单机版
elk·docker·jenkins
菜鸟plus+3 天前
ElasticSearch
运维·jenkins
要站在顶端3 天前
Jenkins 使用容器运行自动化任务详细文档
docker·自动化·jenkins