目錄

• 前言：
• Nginx的三個作用：
• 負(fù)載均衡：
• 反向代理：
• 動靜分離：
• Nginx的下載安裝（Linux環(huán)境下）
• Nginx的使用
• 部署前端項目
• 總結(jié)

前言：

之前在Linux系統(tǒng)中部署了后端項目，今天繼續(xù)來給大家分享如何部署前端項目。

涉及到了Nginx的簡單介紹以及Nginx如何安裝及配置并且能夠部署前端項目

Nginx是一個輕量級的反向代理web服務(wù)器，在當(dāng)今應(yīng)用地非常廣泛，特別是前后端分離的情況下。

Nginx的三個作用：

負(fù)載均衡：

當(dāng)我們的單個項目訪問量達到了單個tomcat無法承受的時候，這個時候我們需要增加服務(wù)器來減少服務(wù)器的壓力，而Nginx的負(fù)載均衡就是用來作為代理服務(wù)器，來分配訪問具體到哪個tomcat服務(wù)器，就相當(dāng)于SpringMvc中的dispatchered中央控制器，不作業(yè)務(wù)處理，只負(fù)責(zé)分配到具體的適配器。

用一個圖來表示：

反向代理：

反向代理的意思就是，比如我們有些系統(tǒng)只能在規(guī)定的內(nèi)網(wǎng)中才能訪問，比如我們的公司的系統(tǒng)，只能在公司的內(nèi)網(wǎng)才能登錄公司系統(tǒng)。但是我們想要在家里或者在外網(wǎng)也能訪問該系統(tǒng)怎么辦？

這時Nginx反向代理就可以解決這個問題，我們恭公司系統(tǒng)配置好Nginx代理服務(wù)器后，只需將我們外網(wǎng)的ip加入到Nginx白名單中即可實現(xiàn)：指定的外網(wǎng)ip也可以訪問內(nèi)網(wǎng)系統(tǒng)！

動靜分離：

動靜分離的意思就是區(qū)分用戶的訪問類型，第一種是動態(tài)訪問是需要調(diào)用后臺數(shù)據(jù)的訪問；第二種是靜態(tài)的訪問只需靜態(tài)資源的訪問（如：css、html、jpg、js等等文件）。那么Nginx動靜分離就是區(qū)分用戶的訪問類型，然后分配訪問不同的服務(wù)器。提高資源響應(yīng)的速度。

Nginx的下載安裝（Linux環(huán)境下）

步驟：

首先下載Nginx的源；

添加 nginx 官方提供的 yum 源(需要聯(lián)網(wǎng)且時間較長) rpm -Uvh http://nginx.org/packages/centos/7/x86_64/RPMS/nginx-1.14.2-1.el7_4.ngx.x86_64.rpm

使用 yum 安裝 nginx；

yum install nginx

注1：yum方式安裝nginx，它的安裝根目錄為/etc/nginx
注2：查看nginx版本 rpm -qa | grep nginx

啟動及設(shè)置開機啟動；

 systemctl start nginx.service systemctl enable nginx.service

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

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

測試 nginx 是否可被訪問，應(yīng)該顯示nginx的歡迎界面；

  http://服務(wù)器IP地址:80/

Nginx的使用

①負(fù)載均衡的使用實例

想要實現(xiàn)負(fù)載均衡的效果那我們就在這里進行簡單的實現(xiàn)：在虛擬機中用兩個Tomcat服務(wù)器實現(xiàn)多臺服務(wù)器配置同一個項目效果，用我們剛剛下載的Nginx作為代理服務(wù)器

1）準(zhǔn)備2個tomcat（接上篇文章，小編我已經(jīng)準(zhǔn)備好一個了）

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

2）修改第二個Tomcat的配置（找到tomcat目錄/conf/server.xml），修改的配置如下：

1. HTTP端口，默認(rèn)8080，如下改為8081

2.遠(yuǎn)程停服務(wù)端口，默認(rèn)8005，如下改為8006

3.AJP端口，默認(rèn)8009，如下改,8010

用客戶端MobaXterm可以直接雙擊編輯！

3）設(shè)置防火墻開放 8081 端口

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

4）測試兩個服務(wù)器是否能夠啟動使用

進入連個服務(wù)器的bin目錄執(zhí)行啟動服務(wù)器命令：./startup.sh

測試：

http://192.168.26.128:8080/

http://192.168.26.128:8081/

重要的來了?。?！

5）Nginx配置*********************************************************************

配置模板如下：

#user ?nobody;worker_processes ?1;?#error_log ?logs/error.log;#error_log ?logs/error.log ?notice;#error_log ?logs/error.log ?info;?#pid ? ? ? ?logs/nginx.pid;?events {? ? worker_connections ?1024;}?http {? ? include ? ? ? mime.types;? ? default_type ?application/octet-stream;?? ? #log_format ?main ?"$remote_addr - $remote_user [$time_local] "$request" "? ? # ? ? ? ? ? ? ? ? ?"$status $body_bytes_sent "$http_referer" "? ? # ? ? ? ? ? ? ? ? ?""$http_user_agent" "$http_x_forwarded_for"";?? ? #access_log ?logs/access.log ?main;?? ? sendfile ? ? ? ?on;? ? #tcp_nopush ? ? on;?? ? #keepalive_timeout ?0;? ? keepalive_timeout ?65;?? ? #gzip ?on;??? ? #服務(wù)器的集群? ? upstream ?tomcat_list { ?#服務(wù)器集群名字? ? ? ? server ? ?127.0.0.1:8080 ?weight=1; ? #服務(wù)器1 ? weight是權(quán)重的意思，權(quán)重越大，分配的概率越大。? ? ? ? #server ? ?172.17.0.4:8080 ?weight=2; #服務(wù)器2 ? weight是權(quán)重的意思，權(quán)重越大，分配的概率越大? ? }??? ? server {? ? ? ? listen ? ? ? 80; ? ? ? ? ? ?#監(jiān)聽80端口，可以改成其他端口? ? ? ? #server_name ?localhost; ? ?#當(dāng)前服務(wù)的域名?? ?server_name ?www.zking.com; #當(dāng)前服務(wù)的域名(虛擬域名也可以)?? ?root ? ? ? ? html/crm; ? ? ?#將要訪問的網(wǎng)站的根目錄，nginx節(jié)點會自動繼承父節(jié)點的配置?? ? ? ? #charset koi8-r;?? ? ? ? #access_log ?logs/host.access.log ?main;??? ?location / {?? ? ? ? ? ?#該句代碼是為解決history路由不能跳轉(zhuǎn)的問題，在vue-router官網(wǎng)有介紹??? ??? ?try_files $uri $uri/ ?/index.html;?? ?}?? ?location ?^~/api/ {?? ??? ?#^~/api/表示匹配前綴是api的請求，proxy_pass的結(jié)尾有/， 則會把/api/*后面的路徑直接拼接到后面，即移除api?? ??? ?proxy_pass http://tomcat_list/;?? ?}? ? ? ? #error_page ?404 ? ? ? ? ? ? ?/404.html;?? ? ? ? # redirect server error pages to the static page /50x.html? ? ? ? #? ? ? ? error_page ? 500 502 503 504 ?/50x.html;? ? ? ? location = /50x.html {? ? ? ? ? ? root ? html;? ? ? ? }?? ? ? ? # proxy the PHP scripts to Apache listening on 127.0.0.1:80? ? ? ? #? ? ? ? #location ~ \.php$ {? ? ? ? # ? ?proxy_pass ? http://127.0.0.1;? ? ? ? #}?? ? ? ? # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000? ? ? ? #? ? ? ? #location ~ \.php$ {? ? ? ? # ? ?root ? ? ? ? ? html;? ? ? ? # ? ?fastcgi_pass ? 127.0.0.1:9000;? ? ? ? # ? ?fastcgi_index ?index.php;? ? ? ? # ? ?fastcgi_param ?SCRIPT_FILENAME ?/scripts$fastcgi_script_name;? ? ? ? # ? ?include ? ? ? ?fastcgi_params;? ? ? ? #}?? ? ? ? # deny access to .htaccess files, if Apache"s document root? ? ? ? # concurs with nginx"s one? ? ? ? #? ? ? ? #location ~ /\.ht {? ? ? ? # ? ?deny ?all;? ? ? ? #}? ? }??? ? # another virtual host using mix of IP-, name-, and port-based configuration? ? #? ? #server {? ? # ? ?listen ? ? ? 8000;? ? # ? ?listen ? ? ? somename:8080;? ? # ? ?server_name ?somename ?alias ?another.alias;?? ? # ? ?location / {? ? # ? ? ? ?root ? html;? ? # ? ? ? ?index ?index.html index.htm;? ? # ? ?}? ? #}??? ? # HTTPS server? ? #? ? #server {? ? # ? ?listen ? ? ? 443 ssl;? ? # ? ?server_name ?localhost;?? ? # ? ?ssl_certificate ? ? ?cert.pem;? ? # ? ?ssl_certificate_key ?cert.key;?? ? # ? ?ssl_session_cache ? ?shared:SSL:1m;? ? # ? ?ssl_session_timeout ?5m;?? ? # ? ?ssl_ciphers ?HIGH:!aNULL:!MD5;? ? # ? ?ssl_prefer_server_ciphers ?on;?? ? # ? ?location / {? ? # ? ? ? ?root ? html;? ? # ? ? ? ?index ?index.html index.htm;? ? # ? ?}? ? #}?}

我們在這里需要更改Nginx服務(wù)器中的配置根據(jù)上面配置模板：

5.1在nginx.conf添加

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=1; #服務(wù)器2 ? weight是權(quán)重的意思，權(quán)重越大，分配的概率越大}?

5.2在default.conf添加

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

這兩步就是實現(xiàn)了訪問Nginx192.168.26.128:80跳轉(zhuǎn)至配置好Tomcat_list的兩個服務(wù)器中6）重啟Nginx服務(wù)，讓配置生效

systemctl restart nginx

7）訪問Nginx192.168.26.128:80（80端口是唯一可以不用帶的端口號）

發(fā)現(xiàn)出錯，我們打開日志文件查看錯誤

8）查看nginx的訪問日志和錯誤日志

cat /var/log/nginx/access.logcat /var/log/nginx/error.log 

分析錯誤的解決方法：

setsebool -P httpd_can_network_connect 1

一定要進入/etc/nginx/conf.d/目錄下才有用?。?！

執(zhí)行完這個命令我們再刷新訪問Nginx的頁面：它就可以實現(xiàn)訪問Nginx但是均衡分配訪問兩個Tomcat服務(wù)器上面去了，這樣的話就算我們停止一個Tomcat服務(wù)器也能訪問

部署前端項目

①動靜分離的使用實例

1）確保前端項目能夠運行，并將其打包

打包方法：在對應(yīng)項目的目錄下執(zhí)行 npm run build

1.1打包會遇到的問題1：hbuilderX打包vue項目白屏問題
將項目目錄下的config文件夾里的index.js文件中,將build對象下的assetsPublicPath中的“/”，改為“./”后，再打包生成的 dist 文件

build: {<!--{C}%3C!%2D%2D%20%2D%2D%3E-->    // assetsPublicPath: "/",//修改前    assetsPublicPath: "./",//修改后}

1.2打包會遇到的問題2：hbuilderX打包項目，element-ui的icon圖標(biāo)無法正常顯示

找到build文件的utils.js 中有打包的路徑，看看generateLoaders();Extract CSS when that option is specified, 指定該選項時提取CSS發(fā)現(xiàn)少了個公共路徑，加上pubilcPath

if (options.extract) {<!--{C}%3C!%2D%2D%20%2D%2D%3E-->     return ExtractTextPlugin.extract({<!--{C}%3C!%2D%2D%20%2D%2D%3E-->       use: loaders,       fallback: "vue-style-loader",       // 解決icon路徑加載錯誤       publicPath:"../../"     })   } else {<!--{C}%3C!%2D%2D%20%2D%2D%3E-->     return ["vue-style-loader"].concat(loaders)   } 

2）做ip/host主機映射 將虛擬機ip映射域名www.zking.com

方法：

C:\Windows\System32\drivers\etc\hosts中增加映射關(guān)系

192.168.26.128 www.zking.com

做了主機映射那么我們前端項目就要改變action.js更改配置：
'SERVER': 'http://www.zking.com/api/T216_SSH', //服務(wù)器，然后重新打包

3）Nginx配置更改代理配置/etc/nginx/conf.d

更改第一個：靜態(tài)的資源加載以及域名

listen 80; #監(jiān)聽80端口，可以改成其他端口
#server_name localhost; #當(dāng)前服務(wù)的域名
server_name www.zking.com; #當(dāng)前服務(wù)的域名(虛擬域名也可以)
root /usr/local/mypro/dist; #將要訪問的網(wǎng)站的根目錄，nginx節(jié)點會自動繼承父節(jié)點的配置;這里放到/usr/local/*，放到其他路徑下會有權(quán)限相關(guān)問題；必要的時候配置Nginx.conf的user為root

更改第二個動靜分離的區(qū)分：

    location / {<!--{C}%3C!%2D%2D%20%2D%2D%3E-->    #該句代碼是為解決history路由不能跳轉(zhuǎn)的問題，在vue-router官網(wǎng)有介紹 try_files $uri $uri/  /index.html;    }    location  ^~/api/ {<!--{C}%3C!%2D%2D%20%2D%2D%3E-->#^~/api/表示匹配前綴是api的請求，proxy_pass的結(jié)尾有/， 則會把/api/*后面的路徑直接拼接到后面，即移除apiproxy_pass http://tomcat_list/;    }

4）重啟Nginx更新配置

systemctl restart nginx

5）將前端構(gòu)建好的dist項目，上傳到云服務(wù)器/usr/local/...（只能放這里）

小編在這里就專門建一個文件夾來放置這個前臺打包好的文件

mkdir mypro創(chuàng)建文件命令

6）www.zking.com完成整個前后端分離項目的測試

總結(jié)

到此這篇關(guān)于快速掌握Nginx部署前端項目的文章就介紹到這了,更多相關(guān)Nginx部署前端項目內(nèi)容請搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！