1. 利用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
2. nginx 在前端中的簡單應用
Web 服務實際上又稱靜態資源服務，自從前後端分離後，前端的輸出趨向於靜態資源的形式，什麼是靜態資源：就是我們通常用webpack構建輸出的結果，比如：
而為了提供文件在互聯網中的可訪問性，前端還是需要依賴 靜態資源服務 ；最常用的做法就是Node服務和Nginx服務。
Node服務最常見的，就是WebpackServer, 在前端開發聯調時經常用到, 啟動後我們就可以通過 http://localhost:8907/bundle.05a01f6e.js 的形式來訪問構建資源；除此之外，我給大家安利另一款Node服務庫： serve , 它也能快速啟動一個靜態資源服務。
但在生產環境，我們一般用Nginx來處理，不是Node不好，而是Nginx已經夠好了。通常整個大前端會有很多前端項目，我們都將構建結果放在一台伺服器上（一般有備份機器）的某個文件夾下,然後通過安裝Nginx來創建一個靜態資源服務供所有前端資源的訪問；比如文件夾static下有A，B，C，D四個前端項目資源, 我們通過nginx配置:
我們即可通過 http://static.closertb.site/A 訪問A項目，通過 http://static.closertb.site/C 訪問C項目, 從而做到一雞多吃，這種玩法在HTTPS與HTTP2的時代特別常見。
以上就是Nginx作為Web服務的簡單用法，接下來我們了解一下反向代理服務
作為一個開發者，可能經常聽到 代理 兩字，但很多人區分不清楚正向和反向的區別：
如上圖左側所示，正向代理是用戶的主動行為，如我們fq時訪問goggle所做的；右側反向代理是我們訪問的伺服器行為，作為用戶的我們是不能控制也無需關注的。
反向代理在服務部署中，是一種非常常見的技術，比如負載均衡、容災、緩存。
而對於前端開發來說，反向代理多用於請求轉發，來處理 跨域 問題。當我們把前端靜態資源服務都指向一個域名（static.closertb.site）時，與服務端請求域名（server.closertb.site）不一致，就會造成跨域。如果服務端不配合的話，那通過nginx，前端也是可以輕松做到的，在前面的配置上，我們添加：
所以當網頁發出一個請求： http://static.closertb.site/a 時，實際請求地址是： http://server.closertb.site/a ，這就簡單實現了一個服務代理。其原理與WebpackServer的proxy相似.
以上就是Nginx的web服務和代理服務在前端開發中的兩個典型使用場景, 接下來我們說點零碎又有用的
當請求 http://static.closertb.site/site/a/logo.png )時，將會返回伺服器上的/home/static/static/a/logo.png文件，即'/home/static'+'/static/a/logo.png',其 拼接的地址是匹配字元串及其以後的
而對於alias：
當請求 http://static.closertb.site/static/a/logo.png )時，將會返回伺服器上的/home/static/a/logo.png文件，即'/home/static'+'/a/logo.png',其 拼接的地址是除了匹配字元串以後的地址
你可能見過A這種：
也可能見過B這種
有什麼區別？
兩者與root 和 alias有相似之處，只不過這種差別，只適用於：
所以當收到一個請求： http://static.closertb.site/api/user/get ) 時，配置A將會把請求代理到： http://server.closertb.site/api/user/get ); 配置B將會把請求代理到： http://server.closertb.site/user/get )
這個知識，在代理配置中真的相當重要
當我們下架一個前端服務，或者用戶訪問了某個根本不存在的頁面，我們不希望用戶看到的是404，而是將其引導到一個模糊正確的頁面，這時候我可以用rewrite服務；反手一個配置，直接就將流量打到了網站首頁;
另一個比較常用的，就是網站開啟https，我們需要將所有http請求重定向到https：
上面同是rewrite，但還是有不一樣的 ，一個是redirect（302）, 另一個是permanent（301），這兩個還是有很大區別的；
web 性能優化是前端的一門學問，好的靜態資源載入速度，會顯著提升用戶體驗，而nginx作為最常用的靜態資源伺服器，也是有諸多渠道來幫助我們來提升靜態資源載入速度，簡單來講，可以三個方面，直接上配置：
``if ( ) {
expires 365d;
add_header Cache-Control max-age=31536000;
}</pre>
expires與max-age兩種配置方式都可以達到告訴瀏覽器資源一年以後過期的目的，更多關於http緩存的可以 看這一篇文章 ；
3. 前端必須用nginx部署嗎
是的。根據查詢相關資料顯示：前後端分別部署，前端使用Nginx部署，後端直接運行jar.
4. 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代替。
5. 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
6. 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訪問：
7. 使用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
8. 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/才行。）
這樣就部署好了一個 埠支持多個頁面。