使用docker+jenkins构建前端项目发布到nginx

news2024/10/5 19:19:18

1.准备环境

为了方便公司开发优化代码,不需要反复地将项目包发送给运维部署,我们对开发环境的前端项目利用jenkinsCI/CD进行自动化部署

需要两台服务器 一台jenkins 一台发布服务器,这里发布服务器 我直接使用开发环境的服务器 将admin界面与云计算展示界面部署上去

Jenkins服务器

192.168.5.123

docker+nginx

192.168.5.177

然后开始准备应用服务的部署

2.服务准备

2.1.nginx部署

首先在开发环境中利用docker部署nginx ,将nginx的发布页面路径映射到宿主机上,为了方便公司服务统一管理以及后期留存,统一使用docker-compose的方式部署

docker与docker-compose的安装方式自行百度

编写docker-compose.yaml文件

version: '3'

services:
  nginx:
    restart: always
    image: nginx
    ports:
      - 80:80
      - 443:443
    volumes:
      - ./conf.d:/etc/nginx/conf.d
      - ./log:/var/log/nginx
      - ./html:/usr/share/www/html     

然后运行docker-compose文件

docker-compose up -d

这里我们可以看到刚才映射的nginx配置文件已经出现,我们修改一下nginx的配置文件,在conf.d下面创建nginx的子配置文件

vim zhanting.conf
server {
                listen  80;
                server_name  192.168.5.177;
location / {
        if ($request_filename ~* .*\.(?:htm|htmt|jpg|png|css|js|jpeg)$)
        {
           add_header Cache-Control "private, must-revalidate, no-cache, no-store, max-age=0";
        }
        root   /usr/share/www/html/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
location /api {
 proxy_pass       http://192.168.5.177:5000/manage;
}

}

然后保存退出,重启nginx容器,查看一下

docker ps -a

2.2.jenkins部署

这里我直接用公司本地环境的jenkins服务器,之前已经部署过可以参考jenkins部署文档

3.前端环境准备

因为我们是用jenkins构建前端项目 所以我们要准备NodeJS ,以及npm进行构建

3.1.NodeJS

3.1.1.插件下载

首先我们要在jenkins的客户端里下载NodeJS插件

3.1.2.全局配置

下载完成之后,我们进入全局配置界面,配置Nodejs的版本,这里我选择的是NodeJS 20.0版本,如果版本太老的话可能会提示npm版本太旧

配置完成保存退出即可

3.1.3.系统配置

进入系统配置我们要配置我们所需要发布的前端页面的主机名、主机地址、以及主机ip、用户名、发布录

配置完成之后,我们需要去对前端项目主机配置免密

jenkins机器操作 ,主要是让jenkins主机不用密码 就可以通过ssh访问前端项目主机 

id-copy-ssh 192.168.5.177
输入root用户密码

####注意:因为我们公司所使用的服务器都是ubuntu系统,root用户没有密码 所以我们得在前面加上用户,然后对用户提权确保登录的这个用户有root权限 

id-copy-ssh orangepi@192.168.5.177

普通用户提权

sudo usermod -aG sudo username

然后回到jenkins刚才的系统设置界面,点击test测试按钮,出现Success即可,如果不是或者报红的话就是jenkins和前端服务器的免密没做好

3.2.npm

可以通过npm镜像下载nodejs压缩包,并上传服务器 https://registry.npmmirror.com/binary.html?path=node

下载完成之后上传到服务器中,解压下载好的压缩包 ,然后配置node,npm软连接

 tar -zxvf node-v20.0.0-linux-x64.tar.gz -C /opt/software
 ln -s /opt/software/node-v20.0.0-linux-x64/bin/node /usr/local/bin/node
 ln -s /opt/software/node-v20.0.0-linux-x64/bin/npm /usr/local/bin/npm
 node -v
 npm -v

centos7服务器使用nvm安装的node之后,只要使用npm或者node,均会出现以下问题 

npm -v
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)
node: /lib64/libc.so.6: version `GLIBC_2.28' not found (required by node)
node: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by node)

原因

查看系统内安装的glibc版本

然后再根据分析可得知 新版的node v18开始 都需要GLIBC_2.27支持,可是目前系统内却没有那么高的版本

 

strings /lib64/libc.so.6 |grep GLIBC_

GLIBC_2.2.5

...

GLIBC_2.17

....

解决办法

更新glibc

根据提示 安装所需要的glibc-2.28

wget http://ftp.gnu.org/gnu/glibc/glibc-2.28.tar.gz
tar xf glibc-2.28.tar.gz 
cd glibc-2.28/ && mkdir build  && cd build
../configure --prefix=/usr --disable-profile --enable-add-ons --with-headers=/usr/include --with-binutils=/usr/bin

 

可能出现的错误

上步更新glibc 可能会发生错误。

如果没有错误 下边这一步 不用看。

make问题

configure: error:

*** These critical programs are missing or too old: make bison compiler

*** Check the INSTALL file for required versions.

解决办法:升级gcc与make

升级GCC(默认为4 升级为8)</span>

yum install -y centos-release-scl
yum install -y devtoolset-8-gcc*
mv /usr/bin/gcc /usr/bin/gcc-4.8.5
ln -s /opt/rh/devtoolset-8/root/bin/gcc /usr/bin/gcc
mv /usr/bin/g++ /usr/bin/g++-4.8.5
ln -s /opt/rh/devtoolset-8/root/bin/g++ /usr/bin/g++

升级 make(默认为3 升级为4)

wget http://ftp.gnu.org/gnu/make/make-4.3.tar.gz
tar -xzvf make-4.3.tar.gz && cd make-4.3/
./configure  --prefix=/usr/local/make
make && make install
cd /usr/bin/ && mv make make.bak
ln -sv /usr/local/make/bin/make /usr/bin/make

 这时 所有的问题 都已经解决完毕 再重新执行上一步 更新glibc即可

cd /root/glibc-2.28/build
../configure --prefix=/usr --disable-profile --enable-add-ons --with-headers=/usr/include --with-binutils=/usr/bin

我的依旧报错:bison太老旧

configure: error:

*** These critical programs are missing or too old: bison

*** Check the INSTALL file for required versions.

看看我的bison版本多少

bison -v
-bash: bison: 未找到命令
yum install -y bison

 这时 所有的问题 真的真的都已经解决完毕 再重新执行上一步 更新glibc即可

 

cd /root/glibc-2.28/build
../configure --prefix=/usr --disable-profile --enable-add-ons --with-headers=/usr/include --with-binutils=/usr/bin

继续更新

make 和 make install在linux中就是安装软件的意思 简单这么理解就好。

make && make install

 

验证下 是不是好了

npm -v

如果还是出现下面的问题,要连接新的动态库

npm -v
node: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by node)

用下面命令查看 

strings /usr/lib64/libstdc++.so.6 | grep CXXABI

更新libstdc++.so.6.0.26

更新lib libstdc++.so.6.0.26

替换系统中的/usr/lib64

cp libstdc++.so.6.0.26 /usr/lib64/
cd /usr/lib64/
ln -snf ./libstdc++.so.6.0.26 libstdc++.so.6

npm -v

 

4.构建项目

准备工作都做好了之后我们就可以开始构建项目了

 

 

 配置完成之后保存退出即可,当开发这边推送代码到gitlab代码仓库之后,jenkins触发自动构建

5.jenkins构建licloud-api

上面我们已经把前端项目准备好了 后面我们开始部署接口自动化部署

基本步骤同上 我们创建一个自由的自定义项目

 

这里要注意 构建完成之后执行的命令,和上面的前端项目的命令不一样 

然后保存退出即可 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1684978.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

优化电源设计:反激二极管选择与注意事项

反激二极管也被称为续流二极管、缓冲二极管、抑制二极管、钳位二极管或换向二极管&#xff0c;是一种电子元件&#xff0c;通常应用在开关电源和其他涉及电感性负载的电路中。它的主要功能是保护电路&#xff0c;防止感性负载在开关断开时产生的反激电压&#xff08;或反电动势…

Paddle 傅里叶变换基础及领域应用

Paddle 傅里叶变换基础及领域应用 1. 傅里叶变换基础 1.1 傅里叶变换简介 傅里叶变换是一种重要的信号处理技术&#xff0c;它可以将一个信号从时域转换到频域。在频域中&#xff0c;信号的频率特性更加明显&#xff0c;有利于分析和处理。傅里叶变换的基本思想是将一个信号…

P6【知识点】【数据结构】【树tree】C++版

树是由一个集合以及在该集合上定义的一种关系构成的&#xff0c;集合中的元素称为树的结点&#xff0c;所定义的关系称为父子关系。父子关系在树的结点之间建立了一个层次结构&#xff0c;在这种层次结构中有一个结点具有特殊的地位&#xff0c;这个结点称为该树的根结点。 二叉…

接口测试怎么测?为什么要做接口测试?

一、前言 接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系统之间及内部各个子系统之间的交互点。测试的重点是检查数据的交换、传递和控制管理过程&#xff0c;以及系统间的逻辑依赖关系等。 简单地说&#xff0c;接口测试就是通过URL向服务器或者…

【强训笔记】day25

NO.1 思路&#xff1a;哈希质数判断。 代码实现&#xff1a; #include <iostream> #include<string> #include<cmath> using namespace std;bool isprime(int n) {if(n<2) return false;for(int i2;i<sqrt(n);i){if(n%i0) return false;}return true…

AppInventor2要在界面上做一个电量图标,有什么好的思路吗?

问&#xff1a;要在界面上做一个电量图标&#xff0c;有什么好的思路吗&#xff1f; 答&#xff1a;首先&#xff0c;很容易想到使用进度条相关的组件&#xff0c;原生”滑动条“组件可以吗&#xff1f; 答案显而易见&#xff0c;首先它的样式自定义不够&#xff0c;UI不外乎上…

cPanel中如何为数据库添加用户权限

本周有一个客户&#xff0c;购买Hostease的主机&#xff0c;询问我们的在线客服&#xff0c;他的网站安装后再还是无法访问。 客户购买的是Linux虚拟主机&#xff0c;带cPanel面板的。网站访问有如下数据库连接错误: 随后检查发现客户创建的数据库没有添加数据库用户权限。 下面…

企业文件加密软件推荐:迅软DSE加密软件你用了吗?

一、挑选企业文件加密软件需考虑的因素&#xff1f; 1、安全性&#xff1a;软件应采用业界认可的强加密算法&#xff0c;以确保数据的安全性。 迅软特有的256位高强度加密算法&#xff0c;从根本上阻止一切破解的可能性。 2、易用性&#xff1a;软件应该易于部署和管理&…

二进制部署k8s集群 部署高可用master节点

目录 本次部署的环境 一、master02 节点部署 二、负载均衡部署 安装nginx服务 部署keepalive服务 修改node节点上的配置文件 在master节点上创建pod 三、部署 Dashboard 二进制部署k8s集群部署的步骤总结 &#xff08;1&#xff09;k8s的数据存储中中心的搭建 etcd &…

K8S认证|CKA题库+答案| 2. 查看Pod CPU资源使用量

2、查看集群中运行Pod CPU资源使用量 您必须在以下Cluster/Node上完成此考题&#xff1a; Cluster Master node Worker node k8s …

java集合类详解

目录 1、数组导入&#xff1a; 2、单列集合 List接口 1、ArrayList&#xff1a;数组列表 ArrayList类中的方法 2、LinkedList&#xff1a;链表列表 3、Vector&#xff1a;数组列表 4、list集合的遍历 1、for循环遍历 2、增强for循环 3、迭代器遍历 Set接口 1、Has…

word-形状绘制、smartart、visio

一、人员架构图绘制 小技巧&#xff1a; 1、ctrlshift水平复制 2、点击图形&#xff0c;右键设置为默认形状 3、插入-形状-右键-锁定绘图模式&#xff0c;按esc退出状态 4、插入-形状-新建绘图画布&#xff0c;代替组合问题 画布中存在锚点&#xff0c;便于直线连接 二、s…

LP-MSPM03507学习资料汇总

&#xff08;因对MSPM0研究不够深入&#xff0c;故暂不开启浏览权限&#xff0c;权当记录学习。但愿尽快掌握供大家免费阅读。有意者可私信我共同学习&#xff09; 一、延时函数 1、滴答定时器SYSTICK 1.1 SysConfig配置 配置1ms延时函数&#xff0c;并开启中断 1.2 编写延时…

Day21:Leetcode513.找树左下角的值 +112. 路径总和 113.路径总和ii + 106.从中序与后序遍历序列构造二叉树

LeetCode&#xff1a;513.找树左下角的值 解决方案&#xff1a; 1.思路 在遍历一个节点时&#xff0c;需要先把它的非空右子节点放入队列&#xff0c;然后再把它的非空左子节点放入队列&#xff0c;这样才能保证从右到左遍历每一层的节点。广度优先搜索所遍历的最后一个节点…

php基础笔记

开端&#xff1a; PHP 脚本可以放在文本的任意位置 PHP 脚本以 开始&#xff0c;以 ?>** 结束&#xff1a; PHP 文件的默认文件扩展名是 ".php" 标签替换 <? echo 123;?> //short_open_tagson 默认开启 <?(表达式)?> 等价于 <?php echo …

Servlet 的 API

HttpServlet init&#xff1a;当 tomcat 收到了 /hello 这样的路径是请求后就会调用 HelloServlet&#xff0c;于是就需要对 HelloServlet 进行实例化&#xff08;只实例一次&#xff0c;后续再有请求也不实例了&#xff09;。 destory&#xff1a;如果是通过 smart tomcat 的停…

基础常用动词,柯桥西班牙语培训

1. Ser&#xff1a;是 表示身份: Soy Ana. Soy estudiante. 我是安娜。我是一名学生。 表示属性: Es duro. 这是硬的。 表示国籍: Soy espaol, de Madrid. 我是西班牙人&#xff0c;来自马德里。 2. Estar: 是..., 在... 表示身体状况: Estoy muy cansada, necesito dormir.我很…

springboot3项目练习详细步骤(第四部分:文件上传、登录优化、多环境开发)

目录 本地文件上传 接口文档 业务实现 登录优化 SpringBoot集成redis 实现令牌主动失效机制 多环境开发 本地文件上传 接口文档 业务实现 创建FileUploadController类并编写请求方法 RestController public class FileUploadController {PostMapping("/upload&…

英码科技算能系列边缘计算盒子再添新成员!搭载TPU处理器BM1688CV186AH,功耗更低、接口更丰富

在数据呈现指数级增长的今天&#xff0c;越来越多的领域和细分场景对实时、高效的数据处理和分析的需求日益增长&#xff0c;对智能算力的需求也不断增强。为应对新的市场趋势&#xff0c;英码科技凭借自身的硬件研发优势&#xff0c;携手算能相继推出了基于BM1684的边缘计算盒…

uniappx 应用未读角标插件(完善推送、通知、消息效果) Ba-Shortcut-Badge-U

简介&#xff08;下载地址&#xff09; Ba-Shortcut-Badge-U 是设置应用未读角标的原生插件&#xff0c;UTS版本&#xff08;同时支持uniapp和uniappx&#xff09; 支持设置未读、清空未读支持机型有Huawei、oppo、xiaomi、Samsung、Sony、LG、HTC、ZUK、ASUS、ADW、APEX、NO…