????歡迎來到我的CSDN主頁！????

??我是Java方文山，一個在CSDN分享筆記的博主。????

??推薦給大家我的專欄《微信小程序開發(fā)實戰(zhàn)》。????

??點擊這里，就可以查看我的主頁啦！????

Java方文山的個人主頁

??如果感覺還不錯的話請給我點贊吧！????

??期待你的加入，一起學習，一起進步！????

目錄

一、Nignx的簡介

二、Nignx負載均衡

2.1.安裝Nignx

2.1.1.下載并解壓安裝包

2.1.2.一鍵安裝4個依賴

2.1.3.安裝nginx

2.1.4.啟動 nginx 服務(wù)

2.1.5.設(shè)置防火墻開放 80 端口

2.2.準備2個tomcat

2.3.Nginx配置

2.4.部署項目

2.4.1.上傳項目war包

2.4.2.啟動Tomcat

三、前端項目Linux部署（動靜分離）

3.1.上傳前端項目

3.2.解壓前端

3.3.Nginxp配置

3.4.重啟Nginx

3.5.加映射關(guān)系

一、Nginx的簡介

Nginx是一個高性能的開源Web服務(wù)器和反向代理服務(wù)器，也可以用作負載均衡器、HTTP緩存、郵件代理（IMAP/POP3）等。它最初由俄羅斯的工程師Igor Sysoev開發(fā)，并于2004年首次公開發(fā)布。

Nginx因其簡潔、高效和可靠的特點而備受歡迎。相比傳統(tǒng)的Apache服務(wù)器，Nginx使用更少的系統(tǒng)資源，可以處理更多的并發(fā)連接。它采用事件驅(qū)動的異步架構(gòu)，能夠有效地處理高并發(fā)請求和大量的并行連接。

Nginx的主要特點包括：

1. 高性能：Nginx采用了非阻塞的事件驅(qū)動模型，在同等硬件條件下能夠處理更多的并發(fā)連接，具有出色的性能表現(xiàn)。

2. 輕量級：Nginx的代碼精簡，內(nèi)存占用較少，啟動速度快，適用于資源受限的環(huán)境。

3. 反向代理：Nginx可以作為反向代理服務(wù)器，接收客戶端請求并將其轉(zhuǎn)發(fā)給后端服務(wù)器，實現(xiàn)負載均衡和提高網(wǎng)站性能。

4. 靜態(tài)文件服務(wù)：Nginx可以快速、可靠地提供靜態(tài)文件的訪問服務(wù)，減輕后端應(yīng)用服務(wù)器的負載。

5. 動態(tài)內(nèi)容處理：Nginx提供了強大的模塊化架構(gòu)，可以與各種后端應(yīng)用服務(wù)器（如PHP、Python、Node.js）集成，處理動態(tài)內(nèi)容的訪問請求。

6. 高可靠性：Nginx具備高度穩(wěn)定性和可靠性，在大規(guī)模的互聯(lián)網(wǎng)應(yīng)用中被廣泛使用。

二、Nginx負載均衡

2.1.安裝Nginx

2.1.1.下載并解壓安裝包

wget http://nginx.org/download/nginx-1.13.7.tar.gz

tar -xvf nginx-1.13.7.tar.gz

2.1.2.一鍵安裝4個依賴

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

2.1.3.安裝nginx

# 進入安裝包目錄
cd nginx-1.13.7

# 編譯，執(zhí)行配置: 考慮到后續(xù)安裝ssl證書 添加兩個模塊
./configure --with-http_stub_status_module --with-http_ssl_module

# 安裝
make && make install

2.1.4.啟動 nginx 服務(wù)

安裝好的 nginx 服務(wù)在 /usr/local/nginx 下

進入 /usr/local/nginx/sbin 目錄下啟動：
# 啟動
./nginx

# 重啟
./nginx -s reload

# 關(guān)閉
./nginx -s stop

# 或者，指定配置文件啟動
./nginx -c /usr/local/nginx/conf/nginx.conf

雖然已經(jīng)啟動了，但我們也不知道到底啟動成功沒有。

#下載插件
yum install lsof

#查看Nignx是否啟動
lsof -i:80

2.1.5.設(shè)置防火墻開放 80 端口

firewall-cmd --zone=public --add-port=80/tcp --permanent
 firewall-cmd --reload && firewall-cmd --list-port

能出現(xiàn)一下內(nèi)容就說明是正常開啟Nignx了

?2.2.準備2個tomcat

首先需要多開幾個端口號供我們Tomcat使用，我這里準備了8080、8081、8082

cp -r apache-tomcat-8.5.20/ apache-tomcat-8.5.20_8081/

#第2個修改的配置如下
1. HTTP端口，默認8080，如下改為8081
2.遠程停服務(wù)端口，默認8005，如下改為8006
3.AJP端口，默認8009，如下改,8010

這樣8081和8080都有了并且可以啟動沒有問題??！

2.3.Nginx配置

進入到/usr/local/nginx下的conf文件中修改nginx.conf

     #服務(wù)器的集群
    upstream  tomcat_list {  #服務(wù)器集群名字
        server    127.0.0.1:8080  weight=1;   #服務(wù)器1   weight是權(quán)重的意思，權(quán)重越大，分配的概率越大。
        server    127.0.0.1:8081  weight=2; #服務(wù)器2   weight是權(quán)重的意思，權(quán)重越大，分配的概率越大
    }

# 重啟nginx
./nginx -s reload

這時候直接使用我們的端口號就可進行訪問了，如果其中一個端口服務(wù)器關(guān)閉了，還有另一個服務(wù)器供我們使用。

2.4.部署項目

2.4.1.上傳項目war包

將我們項目的war包放入兩個服務(wù)器中

2.4.2.啟動Tomcat

http://192.168.37.129:8080/T216_SSH/vue/treeNodeAction.action

能夠加載出數(shù)據(jù)，此時我們的使用Nginx搭載負載均衡就完成了。

三、前端項目Linux部署（動靜分離）

首先需要找到一個沒有問題的前后端分離的項目

前端使用npm run build進行打包；后端使用Maven構(gòu)建Java項目mvn clean package

前端項目打包還有兩個需要注意的地方：

hbuilderX打包vue項目白屏問題
將項目目錄下的config文件夾里的index.js文件中,將build對象下的assetsPublicPath中的“/”，改為“./”后，再打包生成的 dist 文件
build: {
? ? // assetsPublicPath: '/',//修改前
? ? assetsPublicPath: './',//修改后
}

hbuilderX打包vue項目，element-ui的icon圖標無法正常顯示問題
問題：使用vue-cli3腳手架搭建的項目，在打包文件上服務(wù)器的時候，其他的css，js樣式都能正確加載出路徑，
但是element的icon圖標卻不能正常加載出來。

問題分析：
加載的路徑https://yxq.linksign.cn/static/css/static/fonts/element-icons.535877f.woff
本應(yīng)該加載的路徑https://yxq.linksign.cn/static/fonts/element-icons.535877f.woff
打包的路徑
事實上是打包時候讀取的文件路徑多了兩層；
找到build文件的utils.js 中有打包的路徑，看看generateLoaders();
Extract CSS when that option is specified, 指定該選項時提取CSS
發(fā)現(xiàn)少了個公共路徑，加上pubilcPath
if (options.extract) {
? ? ?return ExtractTextPlugin.extract({
? ? ? ?use: loaders,
? ? ? ?fallback: 'vue-style-loader',
? ? ? ?// 解決icon路徑加載錯誤
? ? ? ?publicPath:'../../'
? ? ?})
? ?} else {
? ? ?return ['vue-style-loader'].concat(loaders)
? ?}

3.1.上傳前端項目

先在/usr/local/下創(chuàng)建一個文件夾名為mypro

3.2.解壓前端

yum install -y unzip
unzip blog.zip

3.3.Nginxp配置

       location / {
            root   /usr/local/mypro/dist;
            #proxy_pass   http://tomcat_list;
            index  index.html index.htm;
        }
        
        location  ^~/api/ {
      		#^~/api/表示匹配前綴是api的請求，proxy_pass的結(jié)尾有/， 則會把/api/*后面的路徑直接拼接到后面，即移除api
      		proxy_pass http://tomcat_list/;
      	}

3.4.重啟Nginx

進入到/usr/local/nginx/sbin中重啟Nginx

這時候我們的效果就來了

3.5.加映射關(guān)系

C:\Windows\System32\drivers\etc\hosts

因為這里需要的是www.zking.com，我們加的時候就寫這個。

這樣我們就可以進入了

?

到這里我的分享就結(jié)束了，歡迎到評論區(qū)探討交流?。?/strong>