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

验证

相关推荐
云和数据.ChenGuang14 小时前
自动化运维工具jenkins问题
运维·自动化·jenkins·运维面试题·运维试题
小嘚14 小时前
谷粒商城高级篇
运维·jenkins
素雪风华14 小时前
Jenkins+Gitee+Docker容器化部署
java·docker·gitee·jenkins·springboot·持续部署
老马啸西风16 小时前
maven 发布到中央仓库之 Ignore Licence-04
java·ci/cd·maven
GeminiJM1 天前
Elasticsearch混合搜索深度解析(上):问题发现与源码探索
大数据·elasticsearch·jenkins
G_whang1 天前
centos7 安装jenkins
运维·jenkins
chevysky.cn2 天前
Elasticsearch部署和集成
大数据·elasticsearch·jenkins
ldj20202 天前
Jenkins 流水线配置
运维·jenkins
耀耀_很无聊2 天前
[特殊字符] 05_Jenkins 部署前端项目实现自动化部署
前端·自动化·jenkins
重生之后端学习2 天前
day08-Elasticsearch
后端·elasticsearch·spring cloud·中间件·全文检索·jenkins