① Nginx部署前後端項目時的跨域問題
最近在准備一個小項目來著，使用tomcat部署後端的SpringBoot項目，然後使用Nginx部署前端界面並轉發後端請求到相應的tomcat集群時，發生了跨域問題，解決過程欲仙欲死，特在此記錄一下。
Nginx跨域配置方法一
嚴格說來，這種方式並不算是跨域請求，因為這種配置要求後端請求的url必須為 http://shop.mk-shop.com/mk-shop-api/xxxx 的形式，也就是說前端項目的請求地址必須進行更改為和客戶端頁面訪問時的url地址一樣，這樣貌似也就沒有跨域問題了。如果前端項目不同模塊的請求地址不一樣，則都需要進行更改。
Nginx跨域配置方法二
注意： api.mk-shop.com 是後端api的請求前綴，也就是客戶端非同步載入時的請求地址，以我的項目的後端請求地址為例:
SpringBoot後端處理跨域時可以配置過濾器來實現
注意： 使用過程中，新版本的springboot可能會報錯不允許在setAllowedOrigins包含 * ，此時需要使用setAllowedOriginPatterns代替。
② 使用Tomcat和Nginx部署前端項目
第一種方式，將我們的前端項目放置在webapps目錄下
進入tomcat安裝路徑下的conf目錄，在server.xml文件中<Host>標簽內配置虛擬路徑
簡單的解釋一下參數
path 對應用戶請求過來的url路徑, /static 匹配所有以 /static 開頭的請求
docBase 表示實際匹配到的路徑，這里可以使用絕對路徑，也可以使用相對路徑
reloadable 如果為true，則tomcat會自動檢測應用程序的/WEB-INF/lib 和/WEB-INF/classes目錄的變化。（對於靜態資源來說，個人覺得這個配置用處不大）
總結起來就是，對於ip:8080/static的資源請求，會通過虛擬路徑匹配到我們實際的資源路徑music_client/static。
配置好後重啟，我們可以發現已經能夠看到我們的前端項目了
對於ROOT目錄下的資源，tomcat可以直接在根目錄下進行訪問。通過這種方式，我們可以讓項目的路徑去適配tomcat訪問的路徑。
但是這種方式不是特別推薦，當有多個項目在同一個tomcat伺服器上的時候，會不方便管理。
Nginx是當下熱門的伺服器，使用起來只需要進行簡單的配置即可。對於Nginx的安裝大家可以自行網路解決。
我們先進入到usr/local/nginx（具體以實際nginx安裝目錄為准）下的conf目錄，vim編輯nginx.xml。主要進行下面的配置
簡單的解釋一下
listen 表示nginx監聽的埠號，也就是你希望暴露哪個埠給用戶進行訪問
server_name 表示nginx接受請求的域名，一般默認localhost就行
location 模塊用於響應請求，這里的 / 表示匹配8082埠的所有請求
root 表示靜態資源/項目的路徑
index 表示默認的訪問資源
配置完成後，進入 sbin 目錄下，通過 ./nginx -t 檢查配置文件的格式是否正確
如正確 ./nginx 進行啟動或者 ./nginx -s reload 進行重啟
啟動完，我們就可以直接ip:8082直接訪問我們的前端項目啦
開啟nginx的反向代理也比較簡單，只需要加上proxy_pass 配置即可
出現這個問題的原因是： 在history模式下，只是動態的通過js操作window.history來改變瀏覽器地址欄里的路徑，並沒有發起http請求，但是當我們直接在瀏覽器輸入這個地址的時候，就會對伺服器發起http請求，但是這個目標在伺服器上又不存在，所以會返回404。
我們可以通過把所有請求都轉發到首頁上來解決這個問題。只需要在 Nignx 中的配置文件加入如下配置：
事實上，上面的解決方式也是Vue-Router官方推薦的解決方式（ https://router.vuejs.org/zh/guide/essentials/history-mode.html#nginx ）。
那上面的 try_files 為什麼能幫助我們解決這個問題呢？我們可以看一下這個屬性的作用
try_files ：按選項所指定的順序去檢查用戶請求的文件是否存在，如果本地存在的話則返回該請求；不存在的話將該請求轉發到指定的其它路徑。也就是說，比如我們當前的前端項目部署在 /usr/myproj 目錄下，現在我們在瀏覽器發起 ip:port/testApi 請求，那麼此時 uri 為testApi,nginx會先去 $root/testApi （即/usr/local/myproj/testApi）找是否存在該靜態資源，若不存在，則繼續尋找 $root/testApi/index （即/usr/local/myproj/testApi/index）文件是否存在，如果還是不存在，則會把請求轉發到首頁。
而我們的項目本事就是由Vue-Cli創建的 單頁面應用 ，當index頁面接收到請求的時候，對應的history模式路由就可以發揮作用了，根據瀏覽器的路由跳轉到對應的頁面，這也就保證了我們的路由請求都能夠轉發給index頁面來進行處理。
這種問題一般是出現在伺服器一開始安裝Nginx的時候，沒有安裝SSL模塊。在不重裝Nignx的情況下，可以安裝如下方式進行操作：
執行如下命令
這一步只是以防萬一，可以省略
也可以直接執行 ./usr/local/nginx/sbin/nginx -t 看還會不會報錯就行
nginx報錯: [emerg] https protocol requires SSL support in /usr/local/nginx/conf/nginx.conf:50
③ Docker 搭建 Nginx 集群
實現負載均衡其實並不難、只是很多人不敢去嘗試而已,簡單來說就是:
在nginx裡面配置一個upstream，然後把相關的伺服器ip都配置進去。然後採用輪詢的方案，然後在nginx裡面的配置項里，proxy-pass指向這個upstream，這樣就能實現負載均衡.
nginx的負載均衡有4種模式：
1)、輪詢（默認）
每個請求按時間順序逐一分配到不同的後端伺服器，如果後端伺服器down掉，能自動剔除。
2)、weight
指定輪詢幾率，weight和訪問比率成正比，用於後端伺服器性能不均的情況。
3)、ip_hash
每個請求按訪問ip的hash結果分配，這樣每個訪客固定訪問一個後端伺服器，可以解決session的問題。
4)、fair ， url_hash（第三方）
按後端伺服器的響應時間來分配請求，響應時間短的優先分配。
docker pull nginx ( docker pull cloud.io/nginx 這個稍微快點 )
docker run -itd --name nginx1 -p 8080:80 nginx /bin/bash -- 主
docker run -itd --name nginx2 nginx /bin/bash
docker run -itd --name nginx3 nginx /bin/bash
docker ps 查看
docker network ls
docker nerwork inspect d530da7ebbd3
進入nginx1 (主)
docker exec -it d530da7ebbd3 /bin/bash
安裝 vim 編輯器 (如有其他、盡可隨意) --- 注意:nginx2、nginx3 均安裝 編輯器、下文不再贅述
1. apt update 2. apt install vim
cd /etc/nginx/
vim nginx.conf
進入nginx2
docker exec -it e59de010efff /bin/bash
cd /usr/share/nginx/html/
vim index.html
Welcome to nginx! 後添加: From 172.17.0.3:80 即可
進入nginx3
docker exec -it 0f12240cb622 /bin/bash
cd /usr/share/nginx/html/
vim index.html
Welcome to nginx! 後添加: From 172.17.0.4:80 即可
重啟三個nginx服務 service nginx restart
此時如果 docker容器會關閉、因此需要再次重啟
docker start d530da7ebbd3
docker start e59de010efff
docker start 0f12240cb622
測試結果
補充:
上述說到 負載均衡有4種模式、
配置分別如下:
輪詢模式:
upstream webname {
server192.168.0.1:8080;
server192.168.0.2:8080;
}
weight 模式:
upstream webname {
server192.168.0.1:8080 weight=2;
server192.168.0.2:8080 weight=1;
}
ip_hash模式:
upstream webname {
ip_hash;
server192.168.0.1:8080;
server192.168.0.2:8080;
}
其他配置:
設置某一個節點為backup，那麼一般情況下所有請求都訪問server1，當server1掛掉或者忙的的時候才會訪問server2
upstream webname {
server192.168.0.1:8080;
server192.168.0.2:8080 backup;
}
設置某個節點為down，那麼這個server不參與負載。
upstream webname {
server192.168.0.1:8080;
server192.168.0.2:8080 down;
}
④ nginx部署前端純頁面
1.進入nginx配置文件vim .../nginx-1.9.12/conf/nginx.conf。
如上圖所示：第一個紅框中的內容就是應用伺服器的地址；第二個紅框中的內容就是前端包的位置。
此時，配置文件已經准備完畢。這個包和埠可以存在多個。
2.進入.../nginx-1.9.12/sbin 找到nginx的啟動程序。
nginx -c ../nginx-1.9.12/conf/nginx.conf 啟動nginx程序，並指定配置文件。
3.如果要替換包，則直接替換就行，nginx為熱載入自動更新的。但是以防有緩存之類的存在，可以使用nginx -s reload命令進行重載一次。
追加 一 ：
如果前端包的構造如下圖
則location配置依然如下圖
但是訪問地址則需要指定到具體的html文件上。。
綁定： http://127.0.0.1:48110/binding.html
成功： http://127.0.0.1:48110/success.html
失敗： http://127.0.0.1:48110/error.html
追加 二：
同一個埠部署多個頁面：
一個server下，多個 location。
location的作用就是是否有後綴，並且這個後綴會去拼接root後的地址。
比如第二個location /sis/。
則在訪問127.0.0.1:8080/sis時，會去自動尋找/apps/svr/nginx-1.9.12/pagefile/0921/sis這個包。 （Ps：location後的地址一定要用 / 關閉，比如 location /sis/，不然訪問127.0.0.1:8080/sis時，會報錯，只有用127.0.0.1:8080/sis/才行。）
這樣就部署好了一個 埠支持多個頁面。
⑤ linux下安裝nginx部署多個前端項目
1.先安裝nginx所需要的環境
yum install gcc-c++
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel
也可按照如下命令一鍵安裝
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel
2.安裝nginx，安裝在/usr/local下
wget -c https://nginx.org/download/nginx-1.10.1.tar.gz
# 解壓縮
tar -zxvf linux-nginx-1.12.2.tar.gz
cd nginx-1.12.2/
# 執行配置
./configure
# 編譯安裝(默認安裝在/usr/local/nginx)
make
make install
安裝完直接訪問 http://121.36.107.248/ 默認埠是80
Nginx常用命令
測試配置文件：${Nginx}/sbin/nginx -t
啟動命令：${Nginx}/sbin/nginx
停止命令：${Nginx}/sbin/nginx -s stop/quit
重啟命令：${Nginx}/sbin/nginx -s reload
查看進程命令：ps -ef | grep nginx
平滑重啟：kill -HUP [Nginx主進程號(即ps命令查到的PID)]
喜歡請關注 「蛋皮皮」 微信公眾號！更多干貨等你來學習哦。
⑥ 利用nginx部署站點,前端資源默認放在
部署springboot+vue項目的時候，我們一般是將打包好的前端項目放在我們後端的resources目錄下，然後前後端一起打包成jar包或者war包部署上伺服器的。也就是說，如果前端項目發生修改的話，那麼即使後端不用修改，前後端項目也要重新放在一起重新打包、重新部署。但是，前端項目打包往往是幾mb大小，而後端項目打包卻要幾十mb。因此，為了方便，我們可以使用Nginx獨立部署前端項目。
一、 Nginx安裝步驟
1、安裝GCC、automake、pcre、zlib和openssl
用rpm -qa 命令查看是否安裝
如果沒有安裝，執行以下命令
yum -y install gcc gcc-c++ automake pcre pcre-devel zlib zlib-devel openssl openssl-devel
1
2、下載Nginx
我是安裝在 /www/server目錄的
cd /www/server
1
weget命令下載
wget http://nginx.org/download/nginx-1.16.1.tar.gz
1
tar zxvf 解壓
tar zxvf nginx-1.16.1.tar.gz
1
重命名 nginx-1.16.1文件夾
mv nginx-1.16.1 nginx
1
3、安裝Nginx,默認安裝目錄：/usr/local/nginx
進入nginx文件夾，運行configure腳本
cd nginx
./configure
1
2
編譯、安裝
make
make install
1
2
切換到安裝目錄
cd /usr/local/nginx
1
注意：html：存放了兩個後綴名為.html的靜態文件，前端項目打包後的文件放在此處，編輯好配置文件，啟動Nginx伺服器即可成功部署前端項目。
4、修改配置文件、開放埠
vim /usr/local/nginx/conf/nginx.conf
1
埠改為 8051
5、啟動Nginx
cd /usr/local/nginx
./sbin/nginx
1
2
6、其他命令
查看進程
ps -ef|grep nginx
1
重啟Nginx
/usr/local/nginx/sbin/nginx -s reopen
1
停止Nginx
/usr/local/nginx/sbin/nginx -s stop
1
重載Nginx配置文件
/usr/local/nginx/sbin/nginx -s reload
1
7、訪問
curl 127.0.0.1:8051
1
如果訪問不了，伺服器安全組開放埠以及防火牆放行埠
firewall-cmd --zone=public --add-port=8051/tcp --permanent
1
firewall-cmd --reload
1
二、前端項目獨立部署
1、將打包的前端項目上傳到/usr/local/nginx/html目錄
2、 重新啟動即可成功訪問到前端項目
/usr/local/nginx/sbin/nginx -s reopen
1
可能遇到的問題
1、刷新頁面查詢404的情況，也就是頁面找不到
修改Nginx配置文件
try_files $uri $uri/ /index.html;
1
重新載入配置文件重啟Nginx
⑦ nginx部署多個前端項目
這里就不介紹同一埠和同一nginx.conf，有需要的童鞋自行網路。
這里介紹不同項目的不同配置。
伺服器中已經部署了其他項目，這里做一個簡單的頁面做測試：
1、新建目錄：
/root/nginx/8571/
/root/nginx/8571/html/
/root/nginx/8571/log/
2、將文件：/usr/sbin/nginx 拷貝至 /root/nginx/8571/
3、新建index.html：/root/nginx/8571/html/index.html
4、新建配置文件：/root/nginx/8571/nginx.conf
5、啟動 nginx
./nginx -c /root/nginx/8571/nginx.conf
注意：
若 nginx.conf 配置 location 後，重啟 nginx 再訪問，如果訪問提示：Nginx 403 Forbidden，則需要在 nginx.conf 頭部加入一行：
user root;
查看nginx埠使用情況：netstat -apn
啟動成功後輸入ip和埠8571訪問：
⑧ nginx負載均衡以及集群是怎麼搭建的
需要下載一個apk和一個zip。apk用於控制，zip裡麵包含了 nginx mysql pgsql php 的二進制文件和配置文件。如果apk裡面有一鍵安裝，如果不行就打開anmpp.sh，自己看著辦。
環境搭建完成之後，我們打開bftpd、nginx、php-fpm這三個，然後啟動環境。
瀏覽器輸入172.0.0.1，看到phpinfo了，說明成功運行。
⑨ nginx 部署多個前端vue項目的3種方式，一篇文章搞定
首先我們看一下nginx.conf配置文件
為了方便管理，在/usr/local/nginx/conf.d/ 創建自己的*.conf配置文件。沒有conf.d目錄，直接mkdir 創建conf.d
*.conf 詳細可參考：
這種方式只需要開放80埠，然後訪問二級域名。
這種方式的好處是只有一個server ,而且不需要二級域名、用路徑location就能實現。
但是這種方式的一個缺點，就是vue項目前端需要改配置。修改地方如下：
react 配置請參考： https://blog.csdn.net/mollerlala/article/details/96427751?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBai-2&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBai-2
vue 配置請參考： https://blog.csdn.net/weixin_33868027/article/details/92139392
⑩ 我有三台nginx服務怎麼集群到一起，這三台伺服器都用來解析html頁
簡單的說兩種方案：
1，一台 nginx 伺服器做反向代理，第二台文件伺服器，第三台做資料庫伺服器
2， 一台 nginx 腳本伺服器，第二台做主庫資料庫伺服器，第三台做從庫資料庫伺服器加靜態伺服器。
這三台服務使用一個靜態 IP，它們之間的關系為區域網，主伺服器掛靜態IP，nginx.conf 設置域名 sever，訪問直接到主伺服器，主庫資料庫伺服器限制資料庫的讀許可權，埠為3306，從庫資料庫限制寫許可權，埠為 3307；兩台資料庫伺服器進行數據同步，實現資料庫讀寫分離，從庫掛載網站靜態內容，如 CSS ,JS, images, flash 等靜態文件，實現動靜分離。
集群的作用主要就是負載均衡，分流負壓流量，資料庫讀寫分離也是為了減緩資料庫讀寫壓力，動靜分離的好處自然是更科學地規劃文件分類，便於伺服器文件的管理。
但一般來說，這些靜態的東西全部用第三方的 SDN 來負載掉。