快捷導(dǎo)航

Nginx搭載負(fù)載均衡及前端項(xiàng)目部署

更新時間：2023年11月28日 09:31:32 作者：ChatYU.

本文介紹了如何使用Nginx實(shí)現(xiàn)負(fù)載均衡和前端項(xiàng)目部署,通過配置Nginx的負(fù)載均衡功能,可以有效地分發(fā)客戶端請求,提高服務(wù)器的處理能力,感興趣的可以了解一下

一.Nginx安裝

1.安裝所需依賴

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

2.下載并解壓Nginx安裝包

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

3.安裝nginx

進(jìn)入到/usr/local/nginx/sbin目錄

cd /usr/local/nginx/sbin

編譯，執(zhí)行配置: 考慮到后續(xù)安裝ssl證書添加兩個模塊

./configure --with-http_stub_status_module --with-http_ssl_module

安裝make模塊

make && make install

4.啟動Nginx服務(wù)

進(jìn)入 /usr/local/nginx/sbin 目錄下(服務(wù)安裝在當(dāng)前目錄下)

cd /usr/local/nginx/sbin

安裝lsof模塊

 yum install lsof

啟動服務(wù)

./nginx

重啟服務(wù)

./nginx -s reload

關(guān)閉服務(wù)

./nginx -s stop

開啟防火墻端口號

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

刷新防火墻規(guī)則

firewall-cmd --reload

開啟服務(wù)后，在瀏覽器中輸入自己的ip地址+:80出現(xiàn)以下截圖說明安裝成功

二.Tomcat負(fù)載均衡

1.準(zhǔn)備環(huán)境

1.1 準(zhǔn)備兩個Tomcat

先進(jìn)入到我們的Tomcat的上一級目錄然后執(zhí)行以下命令

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

1.2 修改端口號

進(jìn)入到配置文件夾中的中

cd apache-tomcat-8.5.20_8081/conf

修改配置文件中的端口號

vim server.xml

將當(dāng)前的Tomcat配置文件中的端口號全部加一，防止與原來的端口號發(fā)生沖突

進(jìn)入到配置文件后點(diǎn)擊insert進(jìn)行修改

修改完成后點(diǎn)擊Esc，輸入:wq保存并退出

1.3 配置Nginx服務(wù)器集群

在/usr/local/nginx/conf/文件中修改服務(wù)器集群和訪問地址

#服務(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)重越大，分配的概率越大
   }

location / {
            #root   html;
            proxy_pass   http://tomcat_list;
            index  index.html index.htm;
        }

配置完成之后要將Nginx重新加載

 ./nginx -s reload

2.效果展示

為了展示效果Nginx同時負(fù)載兩個Tomcat，將8081端口號的Tomcat界面進(jìn)行更改

當(dāng)我們對前端Nginx運(yùn)行頁面進(jìn)行刷新時，因?yàn)橥瑫r負(fù)載兩個Tomcat所以刷新時會根據(jù)權(quán)重來展示兩個tomcat頁面的的概率

三.前端項(xiàng)目打包

進(jìn)入到前端項(xiàng)目的根目錄利用cmd窗口執(zhí)行以下命令

 npm run build

打包完成后會在我們的當(dāng)前項(xiàng)目目錄下有一個dist文件夾，這就是我們打包好的項(xiàng)目

當(dāng)我們的node環(huán)境運(yùn)行時，點(diǎn)擊這個靜態(tài)網(wǎng)頁也可以進(jìn)入到我們的前端頁面

四.前端項(xiàng)目部署

1.上傳項(xiàng)目

在/usr/local/nginx/conf/目錄下新建一個文件夾存放項(xiàng)目

mkdir mypro

然后將項(xiàng)目拷貝到當(dāng)前文件夾中

下載unzip命令解壓zip文件

yum install -y unzip

進(jìn)入到當(dāng)前存放項(xiàng)目的文件夾然后進(jìn)行解壓

cd mypro

unzip blog.zip

2.修改代理服務(wù)器

添加新代理

location  ^~/api/ {
              proxy_pass http://tomcat_list/;
          }

將路徑修改為自己前端項(xiàng)目路徑

location / {
            root   /user/local/mypro/dist;
            #proxy_pass   http://tomcat_list;
            index  index.html index.htm;
        }