1. Toy模板网首页
  2. > Toy博客

前端项目打包和自动化部署(jenkins+gitee+nginx)

10月前 作者：是三好 分类：Toy博客 阅读(46) 违法举报

这篇具有很好参考价值的文章主要介绍了前端项目打包和自动化部署(jenkins+gitee+nginx)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目打包和自动化部署

一. 项目部署和DevOps

1. 传统的开发模式

在传统的开发模式中，开发的整个过程是按部就班就行：

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee

但是这种模式存在很大的弊端：

  • 工作的不协调：开发人员在开发阶段，测试和运维人员其实是处于等待的状态。等到测试阶段，开发人员等待测试反馈bug，也会处于等待状态。
  • 线上bug的隐患：项目准备交付时，突然出现了bug，所有人员需要加班、等待问题的处理；

2. DevOps开发模式

DevOps是Development和Operations两个词的结合，将开发和运维结合起来的模式：

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee

3. 持续集成和持续交付

伴随着DevOps一起出现的两个词就是持续集成和持续交付(部署)：

  • CI是Continuous Integration（持续集成）；
  • CD是两种翻译：Continuous Delivery（持续交付）或Continuous Deployment（持续部署）；

持续集成CI：

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee

持续交付和持续部署：

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee

4. 自动化部署流程

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee

二.搭建服务器环境

约定：本文使用的版本是OpenCloudOS 8.6（OpenCloudOS 8版本兼容 CentOS 8），java环境是openjdk 11.0.19
注意：

  • CentOS 7环境下node爆出如下错误

    node: /lib64/libm.so.6: version `GLIBC_2.27' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.25' not found (required by node)

    原因：CentOS低版本系统的 GLIBC 版本过低

    我们再查看 ldd 版本

    # ldd --version
ldd (GNU libc) 2.17
Copyright (C) 2012 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
Written by Roland McGrath and Ulrich Drepper.

    我们发现系统中 GLIBC 版本仅为 17，而报错中显示我们缺失，25，27，28。而 GLIBC是向下兼容的，安装高版本的同时会安装低版本，所以我们只需要安装 GLIBC_2.28 即可。

    注意：如果有条件的话可以直接升级系统 CentOS 8，可以有效解决问题

  • jenkins将在2023年底不支持centos8以下版本。

1.jenkins自动化部署

安装java环境

注意jenkins版本对应支持的java版本

2.419 (August 2023) and newer

Java 11, Java 17, or Java 21

2.357 (June 2022) and newer

Java 11 or Java 17

2.164 (February 2019) and newer

Java 8 or Java 11

通过yum安装JDK

安装步骤

查看云端支持安装的jdk版本

yum search java | grep jdk

安装jdk（以下命令自动安装jdk相关依赖）

yum install -y java-11-openjdk

查看jdk版本，验证是否安装成功

java -version

安装git

使用 yum 安装 git，

yum -y install git

安装完成后，查看版本

git --version

安装jenkins

添加Jenkins镜像源

wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo

如果出现报错：

ERROR: cannot verify pkg.jenkins.io’s certificate, issued by ‘/C=US/O=Let’s Encrypt/CN=R3’:
Issued certificate has expired.

解决：

sudo yum install -y ca-certificates

ca-certificates 起到了保障 SSL/TLS 连接安全的作用。在 Linux 系统中，安装 ca-certificates 软件包是非常重要的，因为它提供了一组可信任的根证书和中间证书，使得用户可以安全地与各种服务器通信。

导入公钥

rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io-2023.key

升级yum

yum upgrade

安装Jenkins 依赖包

yum install fontconfig java-17-openjdk

安装Jenkins

 yum install -y jenkins

启动Jenkins的服务：

systemctl start jenkins
systemctl status jenkins
systemctl enable jenkins

Jenkins默认使用8080端口提供服务，所以需要加入到安全组中：

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee

Jenkins用户

我们后面会访问centos中的某些文件夹，默认Jenkins使用的用户是 jenkins，可能会没有访问权限，所以我们需要修改一下它的用户：

vim /usr/lib/systemd/system/jenkins.service

User=root
Group=root

修改jenkins_home 目录的用户和用户组

chown -R root:root /var/lib/jenkins

之后需要重启一下Jenkins：

systemctl restart jenkins

Jenkins配置

打开浏览器，输入：http://101.34.248.81:8080/

  • 注意：你输入自己的IP地址

问题

Jenkins卡首次界面Your browser will reload automatically when Jenkins is ready.

问题分析

可能原因是： 因为屏蔽导致的访问官网太慢。我们只需要换一个源，不使用官网的源即可。

问题解决

找到jenkins工作目录，打开文件hudson.model.UpdateCenter.xml

vim /var/lib/jenkins/hudson.model.UpdateCenter.xml

将 URL 改为https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json

都需要重启Jenkins后解决

获取输入管理员密码：

  • 在下面的地址中 cat /var/lib/jenkins/secrets/initialAdminPassword

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee

可以安装推荐的插件：

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee

Jenkins任务

新建任务：

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee

配置项目和保留策略：

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee

源码管理：

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee

构建触发器：

这里的触发器规则是这样的：

  • 定时字符串从左往右分别是：分 时 日 月 周
#每半小时构建一次OR每半小时检查一次远程代码分支，有更新则构建
H/30 * * * *

#每两小时构建一次OR每两小时检查一次远程代码分支，有更新则构建
H H/2 * * *

#每天凌晨两点定时构建
H 2 * * *

#每月15号执行构建
H H 15 * *

#工作日，上午9点整执行
H 9 * * 1-5

#每周1,3,5，从8:30开始，截止19:30，每4小时30分构建一次
H/30 8-20/4 * * 1,3,5

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee

构建环境：

注意：我们需要搭建Node的环境

  • 第一步：安装Node的插件；
  • 第二步：配置Node的环境；

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee

第一步：插件管理中安装Node的插件

这里因为我已经安装过了，所以没有搜索到；

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee
第二步：全局工具配置中配置Node的环境

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee

在配置中选择刚刚安装的环境

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee

构建执行的任务：

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee

  • 查看Node的版本等是否有问题；
  • 执行 npm install 安装项目的依赖；
  • 移除原来/root/consult-patient-vue3/文件的所有内容；
  • 将打包的dist文件夹内容移动到/root/consult-patient-vue3/文件夹；
#!/bin/bash
pwd
node -v
npm -v

npm install 
npm run build

pwd

echo '构建成功'

ls

# 删除/root/consult-patient-vue3/文件夹里所有的内容
rm -rf /root/consult-patient-vue3/* 

cp -rf ./dist/* /root/consult-patient-vue3/

2. nginx安装和配置

安装nginx

1、添加Nginx源

第一种方式: 需要先安装epel-release 因为Nginx并不在官方的yum源中,需要第三方的yum源

#我们在Centos下使用yum安装时往往找不到rpm的情况，官方的rpm repository提供的rpm包也不够丰富，
#很多时候需要自己编译很痛苦，而EPEL恰恰可以解决这两方面的问题
yum -y install epel-release
 
#更新yum源
yum -y update

第二种方式: Nginx官网提供了Centos的源地址，可以如下执行命令添加源

rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm

2、 安装Nginx

 yum install -y nginx

3、验证nginx安装是否成功

 #查看nginx安装版本，-V可以看到nginx的安装的文件路径
 nginx -V 
 
 # 查看安装的nginx的版本
 rpm -qa | grep nginx

4、Nginx启动、设置开机自启、查看运行状态、停止命令

systemctl start nginx
systemctl enable nginx
systemctl status nginx
systemctl stop nginx

5、相关文件路径

①配置文件路径

#编辑Nginx配置文件
vim /etc/nginx/nginx.conf
 
#检测配置文件语法是否正确
nginx -t
 
#重新加载Nginx配置
nginx -s reload

Nginx默认配置文件(Nginx 1.20.1)

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee

②日志路径

/var/log/nginx

配置nginx

我们这里主要配置nginx的用户和默认访问目录：

配置用户：

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee

通过Linux命令创建文件夹和文件：

mkdir /root/consult-patient-vue3
cd /root/consult-patient-vue3
touch index.html

vim index.html

配置访问目录：

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee

此时访问

http://101.34.248.81/

jenkins前端打包优化,# VUE3,自动化,jenkins,gitee文章来源地址https://www.toymoban.com/news/detail-788616.html

到了这里，关于前端项目打包和自动化部署(jenkins+gitee+nginx)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Jenkins的环境部署，（打包、发布、部署、自动化测试）

    Jenkins的环境部署，（打包、发布、部署、自动化测试）

    一、Tomcat环境安装 1.安装JDK（Java环境） JDK下载地址：Java Downloads | Oracle 安装好后在系统环境变量里配置环境变量： ①添加JAVA_HOME 变量名：JAVA_HOME 变量值：C:Program FilesJavajdk1.8.0_181（根据自己的实际路径配置） ②添加CLASSPATH 变量名：CLASSPATH 变量值：.;%JAVA_HOME%libdt.jar;%J

    2024年01月18日
    浏览(44)
  • 17.Jenkins完成自动化 拉取，编译，打包，部署

    17.Jenkins完成自动化 拉取，编译，打包，部署

    1.1安装gitee插件到jenkins  gitee默认不允许内网触发。----必须要配置内网穿透 NATAPP -       思考: 我们的项目和jenkins是不是都在一台服务器上。因为jenkins它所在的服务器非常耗费资源，因为jenkins本身要集成很多软件。如果这时项目也部署到当作jenkins所在的服务器，势必会导致

    2024年02月04日
    浏览(48)
  • 前端 Jenkins 自动化部署

    前端 Jenkins 自动化部署

    由于公司使用自己搭建的 svn 服务器来进行代码管理，因此这里 Jenkins 是针对 svn 服务器来进行的配置，其实跟Git 配置基本一致。 之前项目每次修改之后都需要本地 ​​npm run build ​​一次手动发布到服务器上方便测试和产品查看， 有了Jenkins持续集成之后只要 svn 或者 git 提

    2024年02月16日
    浏览(39)
  • Jenkins+Maven+Gitlab+Tomcat 自动化构建打包，部署

    Jenkins+Maven+Gitlab+Tomcat 自动化构建打包，部署

    1、安装服务 Jenkins工具、环境、插件配置 全局变量配置 Manage JenkinstoolsJDK 安装 安装插件 Deploy to container 安装此插件，才能将打好的包部署到tomcat上     配置国内mvn源 创建maven项目 1  2   3    4    5    6    7    8     9 10  

    2024年02月05日
    浏览(57)
  • uniapp：HbuildeX项目实现jenkins自动化打包上传

    uniapp：HbuildeX项目实现jenkins自动化打包上传

    前序： 基于HBuilderX创建的项目。 配置uniapp 指令式打包APP、微信小程序、H5。 ubuntu系统上的jenkins部署基础指令，发送给windows服务器上，windows服务器使用HBuilderX软件的cli.exe执行相关cli命令打包，然后jenkins再调用接口下载打包后的文件。 可实现多线程同时打包。 大致流程：

    2024年02月16日
    浏览(62)
  • 轻松拿捏Jenkins(Linux)+Java11+Docker自动化打包部署

    轻松拿捏Jenkins(Linux)+Java11+Docker自动化打包部署

    注：本文由笔者小白亲手实践写作，涵盖较全，创作不易，且行且珍惜！！ 历时24小时，包含Jenkins环境构建部署过程中的99%问题，确定不来看一下吗？ 由于Jenkins自2.357版本之后，上新的版本需要提供Java11及以上版本的支持，且之前的版本市场上推荐的绝大多数插件已经不再

    2024年02月06日
    浏览(43)
  • Gitee + Jenkins实现前端自动化部署

    Gitee + Jenkins实现前端自动化部署

    这是在window环境下面实施的，Jenkins安装自己去网上找（ 推荐安装最新的版本，旧版本下载插件会有兼容问题 ），Jenkins必备插件Git、gitee、NodeJs（中文插件 Chinese需重启）。以gitee作为代码仓库，需要到仓库中的webHooks作为触发。本文借鉴了Gitee + Jenkins自动化实战 | 大前端 -

    2024年02月04日
    浏览(46)

  • Jenkins自动化部署项目

    https://www.jenkins.io/ https://blog.csdn.net/qq_41581588/article/details/128687402 https://blog.csdn.net/zhishidi/article/details/118082509 https://blog.csdn.net/Sojou/article/details/125935262 使用心得

    2024年02月05日
    浏览(42)
  • Android开发-Android项目Jenkins自动化打包流程搭建与配置

    Android开发-Android项目Jenkins自动化打包流程搭建与配置

    由于之前公司的 Android 项目需要 APK 自动打包的功能，所以需要搭建 Jenkins 自动化打包的功能。 Jenkins 是一个用于自动化构建、测试和部署软件项目的开源持续集成和持续交付（CI/CD）工具。它提供了一个可扩展的平台，可以帮助开发团队更快地构建、测试和交付他们的应用程

    2024年02月08日
    浏览(44)
  • Docker + Jenkins + Nginx实现前端自动化部署

    Docker + Jenkins + Nginx实现前端自动化部署

    文章有点长，如果你是以学习的态度来看这篇文章，建议收藏起来慢慢看。 前端自动化部署一直以来概念很清楚知道怎么回事，但是其中怎么操作没怎么研究过，虽然之前环境都搭起来了，但是也只是Jenkins构建项目成功，比如提交代码之后怎么触发自动构建，打包后的文件

    2024年02月05日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包