⑴ nginx怎麼部署前端項目
1、安裝兄陪護衛神·nginx大師
2、開設站羨察蠢點，綁定和解析域名
3、上傳前端頁沒碼面到網站
⑵ react+springBoot 項目部署到騰訊雲
本文主要介紹如何搭建個人網站，並將項目部署到騰訊雲。
前端：React，
後端：SpringBoot，
雲服務：centos7
建議使用create-react-app創建react項目包，簡單快捷。
進入項目路徑，開始運行
直接使用項目自身的build指令進行打包，完成後會在項目根目錄多出一個build文件夾
build文件中包含項目打包後的js、css、html...等資源。下一步的部署，就是將這一build文件上傳到雲伺服器，並通過nginx指向build。
將上一過程中的build文件上傳到雲伺服器，推薦使用ForkLift， 使用教程 。
進入雲伺服器，找到nginx文件，修改root指向build路徑， nginx配置教程 。
上述操作完成後，打開域名後，頁面即為react項目的首頁。
建議使用idea進行springboot項目的開發(專業的事情交給專業的工具，簡單些)。
idea搭建一個springboot項目
mysql： 官方地址
mysql管理工具Navicat： 官網地址
如果本地不想安裝mysql，也可以直接在伺服器上進行安裝，然後在本地訪問， 伺服器安裝mysql並實現遠程訪問 。
將本地springboot項目打包後，上傳到雲伺服器並啟動， Spring boot項目部署到騰訊雲伺服器 。
關於項目的啟動並保持一致運行：可以在控制台輸入
回車，nohup命令可以讓你的shell命令忽略SIGHUP信號，即可以使之脫離終端運行；「&」可以讓你的命令在後台運行。
至此，前後端項目都已安裝在雲伺服器上。
原文地址： react+springBoot 項目部署到騰訊雲
⑶ 使用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
⑷ web前端項目部署到伺服器：
執行成功後會生成dist文件
4.1 進入到nginx配置目錄：/usr/local/nginx/conf,對 nginx.conf 文件進行配置
使用include可以配置多個.conf文件，如一個項目一個配置文件。在同目錄下創建demo文件夾，並創建demo.conf配置文件
下面使用是以ip地址的方式創建的的配置文件
訪問地址：
其中dist名稱時可以修改，保持與/usr/local/nginx/html下cp名稱一致，否則會訪問不到;並且/usr/local/nginx/html目錄可存在同一ip下多個web項目。
域名與ip綁定
配置域名demo.conf
eg: 域名 - demo.cn
4.2阿里雲配置域名前綴
阿里雲->域名->域名列表—>域名 管理-> 域名解析->解析設置
如圖：記錄值 填寫當前服務ip
學習過程中所記錄，有問題或者有好的方式歡迎指點。不勝感激 🤗 🤗 🤗
⑸ 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部署前端純頁面
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/才行。）
這樣就部署好了一個 埠支持多個頁面。