使用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: alwaysimage: nginxports:- 80:80- 443:443volumes:- ./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/softwareln -s /opt/software/node-v20.0.0-linux-x64/bin/node /usr/local/bin/nodeln -s /opt/software/node-v20.0.0-linux-x64/bin/npm /usr/local/bin/npmnode -vnpm -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.pswp.cn/web/13508.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/13508.shtml
英文地址,請注明出處:http://en.pswp.cn/web/13508.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

全棧實現發送驗證碼注冊賬號 全棧開發之路——全棧篇(3)

全棧開發一條龍——前端篇 第一篇&#xff1a;框架確定、ide設置與項目創建 第二篇&#xff1a;介紹項目文件意義、組件結構與導入以及setup的引入。 第三篇&#xff1a;setup語法&#xff0c;設置響應式數據。 第四篇&#xff1a;數據綁定、計算屬性和watch監視 第五篇 : 組件…

基于JAVA的Dubbo 實現的各種限流算法

在基于 Java 的 Dubbo 實現中&#xff0c;限流&#xff08;Rate Limiting&#xff09;同樣是一個關鍵的需求。Dubbo 是阿里巴巴開源的一款高性能 Java RPC 框架&#xff0c;廣泛應用于分布式服務架構中。實現限流可以幫助服務在高并發場景下保持穩定性和可靠性。以下是幾種常見…

Linux進程調度與切換、環境變量

文章目錄 Linux優先級Linux的調度與切換**進程切換**&#xff1a;**進程調度**&#xff1a;優先級活動隊列過期隊列active指針和expired指針 環境變量main函數參數 int main(int argc, char *argv[], char *envp[]) 環境變量環境變量和本地變量echo查看單個環境變量的方法expor…

藍牙模塊在無人機 ID識別、標準制定發揮的作用及其應用優勢和面臨的挑戰

隨著科技的飛速發展&#xff0c;無人機已經廣泛應用于航拍、農業、救援、物流等多個領域。而在無人機的通信與控制系統中&#xff0c;藍牙模塊扮演著重要的角色。本文將探討藍牙模塊在無人機Remote ID識別和標準制定執行中發揮的作用&#xff0c;并分析其應用優勢和面臨的挑戰。…

裝飾器模式在JS中的應用

裝飾器模式在JavaScript中的應用主要是通過修飾函數或類來添加額外的功能或行為。 在ES6中&#xff0c;裝飾器模式可以通過使用語法糖來實現。我們可以將裝飾器應用于函數、類、方法或屬性等。下面是一些在JavaScript中使用裝飾器模式的示例&#xff1a; 修飾函數&#xff1a…

2.Spring中用到的設計模式

Spring框架中使用了多種設計模式來構建其強大且靈活的功能&#xff0c;這里舉例說明Spring中的一些功能使用到的設計模式。 工廠模式&#xff1a;Spring容器本質是一個大工廠&#xff0c;使用工廠模式通過BeanFactory和ApplicationContext這兩個核心接口來創建和管理bean對象。…

Java讀取串口及端口調試

本篇主要講述使用Java對串口進行讀取和發送操作 準備 在項目中導入第三方Jar包 Jar包已經在資源中綁定&#xff0c;或者去官網上自行下載jSerialComm 注意當前jar包是配合JDK1.8環境使用&#xff0c;如果是1.8以下程序將直接中斷 安裝虛擬串口的軟件 Configure Virtual Seri…

一款功能強大的安卓虛擬機應用——VMOS Pro使用分享

前段時間我剛剛分享一個WeChat平板模塊能夠允許用戶自由修改系統設置&#xff0c;讓你的Android備用手機煥發新生&#xff0c;實現手機PAD化&#xff0c;實現兩臺設備同時登錄微信號。今天我分享的這個相比WeChat更為簡單&#xff0c;因為它可以通過虛擬機的方式進行多種androi…

分類和品牌關聯

文章目錄 1.數據庫表設計1.多表關聯設計2.創建表 2.使用renren-generator生成CRUD1.基本配置檢查1.generator.properties2.application.yml 2.生成代碼1.進入localhost:81生成代碼2.將main目錄覆蓋sunliving-commodity模塊的main目錄 3.代碼檢查1.注釋掉CategoryBrandRelationC…

Tencent : TBDS簡介

Tencent TBDS&#xff08;Tencent Big Data Suite&#xff09;是騰訊公司推出的大數據處理套件&#xff0c;它基于騰訊多年海量數據處理經驗&#xff0c;依托云原生技術和泛Hadoop生態開源技術&#xff0c;為用戶提供可靠、安全、易用的大數據處理平臺。 TBDS可以在公有云、私…

JavaWeb基礎(HTML,CSS,JS)

這些知識用了三四天左右學完&#xff0c;因為是JavaWeb&#xff0c;并不是前端&#xff0c;所以只是夠用&#xff0c;不是深入&#xff0c;但是這確實是學校一個學期交的東西&#xff08;JavaWeb課程&#xff09;。 總結一下網頁分為三部分&#xff1a;HTML(內容結構),CSS&…

MySql--SQL語言

目錄 SQl---DDL 結構定義 創建、刪除 數據庫 代碼 運行 設計表 數據類型 整數 浮點數 主鍵 約束 主鍵自增長 默認值 字段注釋 創建、刪除 表 代碼 運行 代碼 代碼 運行 SQL---DML 數據操縱 插入數據 代碼 運行 代碼 運行 代碼 運行 代碼 …

【實戰教程】使用Spring AOP和自定義注解監控接口調用

一、背景 隨著項目的長期運行和迭代&#xff0c;積累的功能日益繁多&#xff0c;但并非所有功能都能得到用戶的頻繁使用或實際上根本無人問津。 為了提高系統性能和代碼質量&#xff0c;我們往往需要對那些不常用的功能進行下線處理。 那么&#xff0c;該下線哪些功能呢&…

貪心算法: 單調遞增的數字

參考資料&#xff1a;代碼隨想錄 題目鏈接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 倒序遍歷每個數字&#xff0c;遇到前一個比后一個大的就減一&#xff0c;最后統一把后面幾位置為9 String str n"";char[] chars str.toCharArray();int flag c…

docker部署kafka實戰

目錄 一、部署kafaka、zookeeper 二、測試信息發送與接收 三、kafka進階 一、部署kafaka、zookeeper 請提前安裝docker、docker-compose 安裝docker&#xff1a;docker--安裝docker-ce-CSDN博客 安裝docker-compose&#xff1a; 安裝docker-compose_安裝 docker-compose-CSD…

云下到云上,麗迅物流如何實現數據庫降本50% | OceanBase案例

在2024年3月20日的首場OceanBase數據庫城市行活動中&#xff0c;專注于物流及供應鏈解決方案的麗迅物流的架構師陽磊&#xff0c;圍繞“OB Cloud在麗迅物流的實踐”這一主題&#xff0c;進行了精彩的演講。本文為此次演講的內容回顧。 在麗迅物流&#xff08;Lesoon Logistics…

小demo - 列表hide or not (含代碼)

直接上代碼 <!DOCTYPE html> <html><head><style>.menu {width: 220px;height: 800px;border: 1px solid #dddddd;}.item {cursor: pointer;}.menu .header {padding: 10px 5px;background-color: goldenrod;}.menu .content a {display: block;paddi…

線程安全-1 synchronized鎖升級

一.說一下synchronized關鍵字的底層原理 1.synchronized又叫同步鎖&#xff0c;采用互斥的方式使同一時刻只能有一個線程持有鎖。 2.jdk1.6及以前&#xff0c;synchronized底層是用monitor實現的。monitor是jvm級別的對象&#xff0c;由c實現。每一個對象對應一個monitor&…

9.1 Go語言入門(環境篇)

Go語言入門&#xff08;環境篇&#xff09; 目錄一、什么是Go語言二、下載安裝配置Go語言開發環境1. 下載2. 安裝3. 配置環境變量4. 安裝環境驗證 三、 開發工具1. 下載2. 安裝3. 激活4. 配置SDK 四、 創建go工程文件并運行1. 創建go工程2. 示例代碼3. 運行代碼 目錄 一、什么…

軟件開源協議與QT的開源協議介紹

一.常見的六種開源協議 1.BSD協議 BSD協議全稱為“Berkely Software Distribution”&#xff0c;中文譯為“伯克利軟件發行版”。其最早用于伯克利UNIX操作系統上的開源貢獻。 主要特點&#xff1a; 允許修改源碼 允許源碼再發布 允許商業軟件發布和銷售 約束&#xff1…