環(huán)境
前端部署在nginx 后端部署在tomcat
| 系統(tǒng) | 前端服務(wù)器 | 后端服務(wù)器 | 前端項(xiàng)目架構(gòu) | 后端項(xiàng)目架構(gòu) |
|---|---|---|---|---|
| win10 | nginx1.22.1 | tomcat9 | vue3 | ssm |
linux 親測(cè)! 環(huán)境同樣適用。
部署
- 前端項(xiàng)目修改 項(xiàng)目下載地址 GIThub RuoYi-Vue3
- vite.config.js 基本不用動(dòng), 默認(rèn)打包為文件夾名 dist , 不用dist可以自定義(我用的自定義)
- 前端.env.production 修改VITE_APP_BASE_API = 'tomcat下webapps 下項(xiàng)目文件夾名'
- 后端項(xiàng)目配置 Gitee若依 / RuoYi-Vue
- 基本不用配; 只需修該數(shù)據(jù) redis地址即可
- 后端war包
- nginx配置文件 重點(diǎn)
- 部署前端, 直接丟到nginx根目下了, 也可自定義.
- 配置文件配置 nginx.conf service配置
server {
listen 80; # 監(jiān)聽(tīng)80端口，即HTTP請(qǐng)求
server_name localhost; # 服務(wù)器名稱(chēng)為localhost
root cookbook; # 全局根目錄為cookbook，即服務(wù)器根目錄下的文件夾
index index.html index.htm default.htm default.html; # 全局默認(rèn)的索引文件
# Vue Router 配置
location / {
try_files $uri $uri/ @router; # 嘗試匹配URI，如果找不到，則轉(zhuǎn)到@router定義的位置
index index.html; # 設(shè)置默認(rèn)的索引文件
}
location @router {
rewrite ^.*$ /index.html last; # 重寫(xiě)URI為/index.html，并標(biāo)記為最后處理，防止陷入循環(huán)
}
location /ruoyi-admin {
proxy_pass http://127.0.0.1:8080; # 將請(qǐng)求轉(zhuǎn)發(fā)到本地8080端口
}
# 錯(cuò)誤頁(yè)面處理
error_page 500 502 503 504 /50x.html; # 定義500、502、503、504錯(cuò)誤的處理頁(yè)面為50x.html
location = /50x.html {
root html; # 50x.html頁(yè)面所在的目錄為html
}
}
- win環(huán)境下 nginx啟動(dòng)關(guān)閉建議使用命令執(zhí)行,這樣配置生效比較容易
- 啟動(dòng) C:\Users\xxx\Desktop\nginx-1.22.1>start nginx
- 重啟 C:\Users\xxx\Desktop\nginx-1.22.1>nginx.exe -s reload
- 停止 C:\Users\xxxx\Desktop\nginx-1.22.1>nginx.exe -s stop
配置來(lái)源參考 wsAdmin 的個(gè)人博客
- tomcat配置不用修改,直接將war放到webapps目錄下
效果
此時(shí)刷新頁(yè)面 不報(bào)錯(cuò) 404
總結(jié)
前端部署在tomcat還是nginx上? 將前端部署在 Nginx 上通常是更好的選擇.
- 靜態(tài)文件服務(wù)： Nginx 專(zhuān)注于快速和有效地提供靜態(tài)文件，例如 HTML、CSS、JavaScript 和圖像文件。與之相比，Tomcat 是一個(gè) Java 應(yīng)用服務(wù)器，不如 Nginx 專(zhuān)注于處理靜態(tài)文件效率高。
- 性能和資源利用： Nginx 是一個(gè)輕量級(jí)的服務(wù)器，具有高性能和低內(nèi)存消耗。相比之下，Tomcat 是一個(gè)相對(duì)重量級(jí)的應(yīng)用服務(wù)器，它可能會(huì)消耗更多的系統(tǒng)資源。
- 靜態(tài)文件緩存和壓縮： Nginx 提供了強(qiáng)大的緩存和壓縮功能，可以幫助提高前端資源的加載速度和用戶(hù)體驗(yàn)。
- 負(fù)載均衡和反向代理： 如果需要負(fù)載均衡、反向代理或緩存靜態(tài)資源，Nginx 提供了更靈活和強(qiáng)大的功能。它可以作為反向代理，將請(qǐng)求轉(zhuǎn)發(fā)到多個(gè)后端服務(wù)器，以實(shí)現(xiàn)負(fù)載均衡和高可用性。
- 安全性： Nginx 提供了豐富的安全特性，可以幫助保護(hù)靜態(tài)資源免受各種網(wǎng)絡(luò)攻擊。
nginx的 location /ruoyi-admin{ proxy_pass... } 作用
- location /ruoyi-admin: 指定了匹配的 URI 路徑，即只有當(dāng)請(qǐng)求的 URI 以 /ruoyi-admin 開(kāi)頭時(shí)才會(huì)應(yīng)用這個(gè)代理規(guī)則。例如 http://127.0.0.1:8080/ruoyi-admin
- proxy_pass http://127.0.0.1:8080;: 指定了代理的目標(biāo)地址，即將請(qǐng)求轉(zhuǎn)發(fā)到的目標(biāo)服務(wù)器的地址和端口。在這里，所有匹配到 url + /ruoyi-admin 的請(qǐng)求將會(huì)被轉(zhuǎn)發(fā)到本地的 8080 端口。這里的 http://127.0.0.1:8080 可以是任何有效的 HTTP 或 HTTPS 地址，代理將會(huì)將請(qǐng)求傳遞到這個(gè)地址上，并將響應(yīng)返回給客戶(hù)端。
$uri說(shuō)明
$uri 指的是 http://localhost/index 的 /index
nginx請(qǐng)求過(guò)程案例說(shuō)明
- 用戶(hù)請(qǐng)求: 用戶(hù)在瀏覽器中輸入** http://localhost/index 。**
- Nginx監(jiān)聽(tīng)端口80: Nginx監(jiān)聽(tīng)到來(lái)自端口80的請(qǐng)求。
- 檢查匹配的server_name: 因?yàn)檎?qǐng)求中的 server_name 是 localhost，所以這個(gè)server塊匹配。
-
處理Vue Router配置: 由于請(qǐng)求是向SPA的前端路由發(fā)送的，Nginx會(huì)檢查Vue Router的配置。
- location / 部分用于處理大多數(shù)請(qǐng)求，其中 try_files 指令會(huì)嘗試匹配"/index"文件,所以就找到了index.html，如果找不到，Nginx會(huì)嘗試查找是否存在名為/index的文件夾, 再找不到則會(huì)重定向到Vue應(yīng)用程序的入口點(diǎn) index.html。
- 如果請(qǐng)求的"/index"能夠在cookbook文件夾中查找文件，Nginx會(huì)直接返回該文件。
- 如果找不到該"/index"對(duì)應(yīng)的文件/文件夾，它會(huì)執(zhí)行 @router 部分的操作。
- @router部分的處理: 當(dāng)前的請(qǐng)求不是一個(gè)直接的文件路徑，因此Nginx會(huì)將請(qǐng)求重寫(xiě)到Vue應(yīng)用程序的入口點(diǎn) index.html，這是Vue Router將接管路由的地方。
-
代理到后端Java應(yīng)用程序: 如果請(qǐng)求的URI是 /ruoyi-admin 開(kāi)頭的，Nginx會(huì)將請(qǐng)求代理到后端的Java應(yīng)用程序，代理地址為 http://127.0.0.1:8080。
- 在這個(gè)例子中，http://localhost/ruoyi-admin/dashboard 中的 /ruoyi-admin 部分會(huì)匹配到Nginx配置中的 location /ruoyi-admin 部分。
- Nginx會(huì)將這個(gè)請(qǐng)求代理到 http://127.0.0.1:8080/dashboard。
- 后端Java應(yīng)用程序響應(yīng): 后端Java應(yīng)用程序收到 /dashboard 的請(qǐng)求，并返回相應(yīng)的數(shù)據(jù)或頁(yè)面給Nginx。
- Nginx將響應(yīng)返回給客戶(hù)端: Nginx收到來(lái)自后端Java應(yīng)用程序的響應(yīng)后，將其返回給用戶(hù)的瀏覽器。
- 用戶(hù)看到響應(yīng): 最終，用戶(hù)在瀏覽器中看到了相應(yīng)的頁(yè)面或數(shù)據(jù)。
詳細(xì)解釋 rewrite ^.*$ /index.html last;
- rewrite: 這是 Nginx 提供的一個(gè)指令，用于重寫(xiě) URI。
- ^.*\(**: 這是一個(gè)正則表達(dá)式，匹配任意字符（**.***）并表示從開(kāi)頭（**^**）到結(jié)尾（**\)）的字符串，即匹配任意 URI。
- /index.html: 這是指定的重寫(xiě)目標(biāo)，即將匹配到的 URI 重寫(xiě)為 /index.html。
- last: 這是一個(gè)標(biāo)志，表示完成重寫(xiě)后，Nginx 將繼續(xù)處理 URI。在這個(gè)具體的配置中，last 標(biāo)志的作用是告訴 Nginx，如果這條重寫(xiě)規(guī)則匹配成功，那么不再繼續(xù)查找其他的匹配規(guī)則，而是直接將重寫(xiě)后的 URI 交給后續(xù)的 Nginx 配置進(jìn)行處理。
- 綜合起來(lái)，這個(gè) rewrite 指令的作用是將所有請(qǐng)求的 URI 都重寫(xiě)為 /index.html，這通常用于單頁(yè)應(yīng)用（SPA）的前端路由。具體地說(shuō)，當(dāng)用戶(hù)訪問(wèn)一個(gè)不存在的路徑時(shí)，Nginx 會(huì)將請(qǐng)求重寫(xiě)為 /index.html，然后返回給前端處理，由前端路由器（如 Vue Router 或 React Router）根據(jù)路由規(guī)則決定加載哪個(gè)頁(yè)面。這樣可以實(shí)現(xiàn)前端路由和頁(yè)面渲染的邏輯，保持頁(yè)面的單頁(yè)應(yīng)用體驗(yàn)。
index index.html; # 設(shè)置默認(rèn)的索引文件
index index.html; 指令告訴 Nginx 在處理請(qǐng)求時(shí)，如果請(qǐng)求的 URI 是一個(gè)目錄而不是具體的文件時(shí)，應(yīng)該嘗試返回哪個(gè)文件作為默認(rèn)索引文件。例如，當(dāng)用戶(hù)訪問(wèn) http://example.com/ 而不是具體的文件時(shí)，Nginx會(huì)嘗試返回 index.html 文件作為默認(rèn)索引文件。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-845683.html
404問(wèn)題, 項(xiàng)目啟動(dòng)后刷新 404; 參考以上步驟.
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-845683.html
到了這里，關(guān)于部署若依前端vue3后端SSM項(xiàng)目實(shí)戰(zhàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
