目錄
- 前言：
- Nginx的三個作用：
- 負載均衡：
- 反向代理：
- 動靜分離：
- Nginx的下載安裝（Linux環境下）
- Nginx的使用
- 部署前端項目
- 總結
前言：
之前在Linux系統中部署了后端項目，今天繼續來給大家分享如何部署前端項目。
涉及到了Nginx的簡單介紹以及Nginx如何安裝及配置并且能夠部署前端項目
Nginx是一個輕量級的反向代理web服務器，在當今應用地非常廣泛，特別是前后端分離的情況下。
Nginx的三個作用：
負載均衡：
當我們的單個項目訪問量達到了單個tomcat無法承受的時候，這個時候我們需要增加服務器來減少服務器的壓力，而Nginx的負載均衡就是用來作為代理服務器，來分配訪問具體到哪個tomcat服務器，就相當于SpringMvc中的dispatchered中央控制器，不作業務處理，只負責分配到具體的適配器。
用一個圖來表示：
反向代理：
反向代理的意思就是，比如我們有些系統只能在規定的內網中才能訪問，比如我們的公司的系統，只能在公司的內網才能登錄公司系統。但是我們想要在家里或者在外網也能訪問該系統怎么辦？
這時Nginx反向代理就可以解決這個問題，我們恭公司系統配置好Nginx代理服務器后，只需將我們外網的ip加入到Nginx白名單中即可實現：指定的外網ip也可以訪問內網系統！
動靜分離：
動靜分離的意思就是區分用戶的訪問類型，第一種是動態訪問是需要調用后臺數據的訪問；第二種是靜態的訪問只需靜態資源的訪問（如：css、html、jpg、js等等文件）。那么Nginx動靜分離就是區分用戶的訪問類型，然后分配訪問不同的服務器。提高資源響應的速度。
Nginx的下載安裝（Linux環境下）
步驟：
首先下載Nginx的源；
添加 nginx 官方提供的 yum 源(需要聯網且時間較長) 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
啟動及設置開機啟動；
systemctl start nginx.service systemctl enable nginx.service
設置防火墻開放 80 端口；
firewall-cmd --zone=public --add-port=80/tcp --permanent firewall-cmd --reload && firewall-cmd --list-port
測試 nginx 是否可被訪問，應該顯示nginx的歡迎界面；
http://服務器IP地址:80/
Nginx的使用
①負載均衡的使用實例
想要實現負載均衡的效果那我們就在這里進行簡單的實現：在虛擬機中用兩個Tomcat服務器實現多臺服務器配置同一個項目效果，用我們剛剛下載的Nginx作為代理服務器
1）準備2個tomcat（接上篇文章，小編我已經準備好一個了）
cp -r apache-tomcat-8.5.20/ apache-tomcat-8.5.20_8081/
2）修改第二個Tomcat的配置（找到tomcat目錄/conf/server.xml），修改的配置如下：
1. HTTP端口，默認8080，如下改為8081
2.遠程停服務端口，默認8005，如下改為8006
3.AJP端口，默認8009，如下改,8010
用客戶端MobaXterm可以直接雙擊編輯！
3）設置防火墻開放 8081 端口
firewall-cmd --zone=public --add-port=8081/tcp --permanent firewall-cmd --reload && firewall-cmd --list-port
4）測試兩個服務器是否能夠啟動使用
進入連個服務器的bin目錄執行啟動服務器命令：./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;
?
?
? ? #服務器的集群
? ? upstream ?tomcat_list { ?#服務器集群名字
? ? ? ? server ? ?127.0.0.1:8080 ?weight=1; ? #服務器1 ? weight是權重的意思，權重越大，分配的概率越大。
? ? ? ? #server ? ?172.17.0.4:8080 ?weight=2; #服務器2 ? weight是權重的意思，權重越大，分配的概率越大
? ? }?
?
? ? server {
? ? ? ? listen ? ? ? 80; ? ? ? ? ? ?#監聽80端口，可以改成其他端口
? ? ? ? #server_name ?localhost; ? ?#當前服務的域名
?? ?server_name ?www.zking.com; #當前服務的域名(虛擬域名也可以)
?? ?root ? ? ? ? html/crm; ? ? ?#將要訪問的網站的根目錄，nginx節點會自動繼承父節點的配置
?
? ? ? ? #charset koi8-r;
?
? ? ? ? #access_log ?logs/host.access.log ?main;
?
?? ?location / {
?? ? ? ? ? ?#該句代碼是為解決history路由不能跳轉的問題，在vue-router官網有介紹?
?? ??? ?try_files $uri $uri/ ?/index.html;
?? ?}
?? ?location ?^~/api/ {
?? ??? ?#^~/api/表示匹配前綴是api的請求，proxy_pass的結尾有/， 則會把/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服務器中的配置根據上面配置模板：
5.1在nginx.conf添加
upstream ?tomcat_list { ?#服務器集群名字
? ? server ? ?127.0.0.1:8080 ?weight=1; ? #服務器1 ? weight是權重的意思，權重越大，分配的概率越大。
? ? server ? ?127.0.0.1:8081 ?weight=1; #服務器2 ? weight是權重的意思，權重越大，分配的概率越大
}?
5.2在default.conf添加
location / {
? ? ? proxy_pass ? http://tomcat_list;
? ? ? index index.html index.htm;
? }
這兩步就是實現了訪問Nginx192.168.26.128:80跳轉至配置好Tomcat_list的兩個服務器中6）重啟Nginx服務，讓配置生效
systemctl restart nginx
7）訪問Nginx192.168.26.128:80（80端口是唯一可以不用帶的端口號）
發現出錯，我們打開日志文件查看錯誤
8）查看nginx的訪問日志和錯誤日志
cat /var/log/nginx/access.log cat /var/log/nginx/error.log
分析錯誤的解決方法：
setsebool -P httpd_can_network_connect 1
一定要進入/etc/nginx/conf.d/目錄下才有用！！！
執行完這個命令我們再刷新訪問Nginx的頁面：它就可以實現訪問Nginx但是均衡分配訪問兩個Tomcat服務器上面去了，這樣的話就算我們停止一個Tomcat服務器也能訪問
部署前端項目
①動靜分離的使用實例
1）確保前端項目能夠運行，并將其打包
打包方法：在對應項目的目錄下執行 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圖標無法正常顯示
找到build文件的utils.js 中有打包的路徑，看看generateLoaders();Extract CSS when that option is specified, 指定該選項時提取CSS發現少了個公共路徑，加上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中增加映射關系
192.168.26.128 www.zking.com
做了主機映射那么我們前端項目就要改變action.js更改配置：
'SERVER': 'http://www.zking.com/api/T216_SSH', //服務器，然后重新打包
3）Nginx配置更改代理配置/etc/nginx/conf.d
更改第一個：靜態的資源加載以及域名
listen 80; #監聽80端口，可以改成其他端口
#server_name localhost; #當前服務的域名
server_name www.zking.com; #當前服務的域名(虛擬域名也可以)
root /usr/local/mypro/dist; #將要訪問的網站的根目錄，nginx節點會自動繼承父節點的配置;這里放到/usr/local/*，放到其他路徑下會有權限相關問題；必要的時候配置Nginx.conf的user為root
更改第二個動靜分離的區分：
location / {<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
#該句代碼是為解決history路由不能跳轉的問題，在vue-router官網有介紹
try_files $uri $uri/ /index.html;
}
location ^~/api/ {<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
#^~/api/表示匹配前綴是api的請求，proxy_pass的結尾有/， 則會把/api/*后面的路徑直接拼接到后面，即移除api
proxy_pass http://tomcat_list/;
}
4）重啟Nginx更新配置
systemctl restart nginx
5）將前端構建好的dist項目，上傳到云服務器/usr/local/…（只能放這里）
小編在這里就專門建一個文件夾來放置這個前臺打包好的文件
mkdir mypro創建文件命令
6）www.zking.com完成整個前后端分離項目的測試
