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

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

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

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

 

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

然后保存退出即可 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

python调用百度文心一言对话模型

近日&#xff0c;百度宣布其两款主力模型 ENIRE Speed、ENIRE Lite 可以免费使用。试了一下怎么程序调用。 1.准备工作 需要注册百度智能云账号&#xff0c;也可以使用原来的百度账号登录&#xff0c;登录之后要完成实名认证&#xff0c;才能使用API调用。在千帆大模型操作台…

5.23-

回顾 I0多路复用的原理? 程序首先向操作系统发起一个IO多路复用请求&#xff0c;告诉操作系统需要监视哪些IO通道。这些IO通道可以包括网络套接字、文件描述符等操作系统随后会将这些IO通道放入一个队列中&#xff0c;并在某个IO通道就绪时&#xff08;如数据到达、文件可读…

滴滴三面 | Go后端研发

狠狠的被鞭打了快两个小时… 注意我写的题解不一定是对的&#xff0c;如果你认为有其他答案欢迎评论区留言 bg&#xff1a;23届 211本 社招 1. 自我介绍 2. 讲一个项目的点&#xff0c;因为用到了中间件平台的数据同步&#xff0c;于是开始鞭打数据同步。。 3. 如果同步的时候…

Linux-centos下安装ffmpeg的详细教程

源安装 第一种方式&#xff1a; . 首先需要安装yum源&#xff1a; 这个源安装的ffmpeg版本是3.4 yum install epel-release yum install -y https://mirrors.ustc.edu.cn/rpmfusion/free/el/rpmfusion-free-release-7.noarch.rpm然后可以安装ffmpeg yum install -y ffmpeg ff…

data studio连接到虚拟机上的openGauss

参考&#xff1a;使用DataStudio连接本地虚拟机中的opengauss数据库_big data_白日梦想家_胖七七-华为云开发者联盟 本实验虚拟机安装的是CentOS7 数据库版本是&#xff1a;openGauss-5.0.2-CentOS-64bit-all.tar.gz 1.配置pg_hba.conf 首先使用su - omm登录到omm用户&…

家电维修上门维修小程序怎么搭建制作?

​在家庭生活中&#xff0c;家电的维修问题一直是人们关注的焦点。随着微信小程序的普及&#xff0c;家电维修服务行业也迎来了线上转型的机遇。一款便捷、高效的家电维修上门维修小程序&#xff0c;不仅能为维修服务商带来新的客户&#xff0c;也能为用户带来更便捷的服务体验…

JavaWeb基础(HTML,CSS,JS)

这些知识用了三四天左右学完&#xff0c;因为是JavaWeb&#xff0c;并不是前端&#xff0c;所以只是够用&#xff0c;不是深入&#xff0c;但是这确实是学校一个学期交的东西&#xff08;JavaWeb课程&#xff09;。 总结一下网页分为三部分&#xff1a;HTML(内容结构),CSS&…

详解ArcGIS 水文分析模型构建

目录 前言 项目环境、条件 Dem 数据预览 ArcGIS模型构建器 模型搭建 填洼 流向 流量 河流长度 栅格计算器 河流链接 河网分级 栅格河网矢量化 绘制倾泻点 栅格流域提取 集水区 盆域分析 栅格转面 模型应用 导出 py 文件 完善脚本 最终效果 结束语 前言 …

网络安全技术心得体会

网络与信息安全技术心得体会 通过对网络安全这门课程的学习&#xff0c;我进一步了解了网络安全技术的相关知识。大致来说&#xff0c;所谓网络安全指的是对网络系统中各类软硬件和数据信息等提供保护屏障&#xff0c;确保数据信息不受到恶意侵入、窃取等破坏&#xff0c;保证…

modelbox验证expand和condition共用后,是否顺序保持

如图&#xff0c;在expand之后接了个condition&#xff0c;上下两个流中每一对数据buffer的顺序性是否还会保持&#xff1f; 笔者修改让condition在遇到奇数和偶数时的走向不同。 然后在response单元输出每一对数据&#xff0c;发现顺序都不变。且在处理时&#xff0c;输出会卡…

【C语言深度解剖】(16):C语言的文件读写操作

&#x1f921;博客主页&#xff1a;醉竺 &#x1f970;本文专栏&#xff1a;《C语言深度解剖》 &#x1f63b;欢迎关注&#xff1a;感谢大家的点赞评论关注&#xff0c;祝您学有所成&#xff01; ✨✨&#x1f49c;&#x1f49b;想要学习更多C语言深度解剖点击专栏链接查看&…

微服务框架Go-kit 01 - 基础示例

一、Go kit简介 Go kit 是一个用于构建可扩展、灵活和可维护微服务的框架和工具集合。它提供了一系列库和组件&#xff0c;涵盖了微服务开发的各个方面&#xff0c;包括服务发现、负载均衡、通信、日志记录、请求跟踪、限流、熔断等。 Go kit 构建微服务时遵循一种类似于传统…

成都爱尔胡建斌院长提醒近视超过600度,记得每年检查眼底!

高度近视是指近视度数在600度及以上的一种屈光不正的状态。 近视的眼睛必定是变形的。在正常情况下&#xff0c;人的眼球类似球体&#xff0c;但随着近视加深&#xff0c;眼轴变长&#xff0c;眼球体积逐渐增大&#xff0c;整个眼球从圆球型向椭圆球形发展&#xff0c;而眼球壁…

HTTPS 协议原理详解

HTTPS 协议原理详解 什么是 HTTPS 协议什么是 SSL/TSL 层HTTPS 使用到的加密算法HTTPS 中 TLS 层的加密过程详解HTTPS 加密过程中用到的数字证书 什么是 HTTPS 协议 HTTPS &#xff08;全称&#xff1a;Hypertext Transfer Protocol Secure &#xff09;&#xff0c;是以安全为…

栈(基于动态顺序表实现的栈)

栈的简单介绍 关于栈的性质咳咳 栈&#xff1a;栈是一种特殊的线性表,其中只让在一端插入和删除元素。 后进先出 进行插入删除的那一端叫栈顶&#xff0c;另一端叫栈底 我们实现的栈是基于一个动态顺序表的的栈&#xff0c;会实现栈的 入栈&#xff0c;出栈&#xff0c;获取…

Python知识点复习

文章目录 Input & OutputVariables & Data typesPython字符串重复&#xff08;字符串乘法&#xff09;字符串和数字连接在一起print时&#xff0c;要强制类型转换int为str用input()得到的用户输入&#xff0c;是str类型&#xff0c;如果要以int形式计算的话&#xff0c…

Dijkstra算法在《庆余年》中的应用:范闲的皇宫之旅

❤️❤️❤️ 欢迎来到我的博客。希望您能在这里找到既有价值又有趣的内容&#xff0c;和我一起探索、学习和成长。欢迎评论区畅所欲言、享受知识的乐趣&#xff01; 推荐&#xff1a;数据分析螺丝钉的首页 格物致知 终身学习 期待您的关注 导航&#xff1a; LeetCode解锁100…

C语言 数组——向函数传递数组

目录 把数组传给函数&#xff08;Passing Arrays to Functions&#xff09; 向函数传递一维数组 向函数传递二维数组 数组在学生成绩管理中的应用 例&#xff1a;计算每个学生的平均分 把数组传给函数&#xff08;Passing Arrays to Functions&#xff09; 向函数传递一维…

校园霸凌行为监测AI预警系统

校园霸凌行为监测AI预警系统基于AI视觉智能分析算法&#xff0c;校园霸凌行为监测AI预警系统通过已安装的监控摄像头对校园现场画面进行实时监测。校园霸凌行为监测AI预警系统能够自动识别学生的违规行为&#xff0c;包括打架、跌倒、偷偷翻墙、人员聚众、攀高、抽烟等行为&…

【C++】右值引用 移动语义

目录 前言一、右值引用与移动语义1.1 左值引用和右值引用1.2 右值引用使用场景和意义1.3 右值引用引用左值及其一些更深入的使用场景分析1.3.1 完美转发 二、新的类功能三、可变参数模板 前言 本篇文章我们继续来聊聊C11新增的一些语法——右值引用&#xff0c;我们在之前就已…