網站首頁 編程語言 正文
前置知識
- 單頁應用(SPA - single page application)
只在第一次加載頁面時,返回唯一的html頁面和它的公共靜態資源,后續的頁面跳轉都不會從服務端拿html文件。(hash和history路由實現瀏覽器url變化而不刷新頁面) - hash路由
例子:www.baidu.com/#/home, 原本hash是用來結合錨點實現頁面試圖的控制,當#后面的值發生改變時不會重新請求頁面,主要通過window的onhashchange方法來實現。 - history路由
相比于hash路由,最直觀的變化就是路由中沒有#,通過調用window.history對象上的一系列方法來實現頁面的無刷新跳轉(pushState、replaceState)。
history模式下,因為url改變了,此時如果手動刷新頁面,瀏覽器認為是請求一個新的頁面(發起新的Http請求),而新的頁面是不存在的(后端未配置的話),導致404。
先簡述一下在瀏覽器上輸入IP或域名后發生的事情(有點面試題的味道了嗷??),按下回車之后,瀏覽器發出的http去請求html文件,在通過一系列的轉發和尋址解析后,被目標IP所在服務器上的80端口(默認)接收,這個時候,問題來了哈,服務器的80接口拿到Http請求后,它不知道要去返回什么,這個時候就需要Nginx進行靜態資源代理,告訴服務器返回什么靜態文件
Nginx
對于一般的項目部署,我們需要處理nginx.conf配置文件
該文件,需要知道的如下
.... # http 是指令塊,針對http網絡傳輸的一些指令配置 http { #文件擴展名與文件類型映射表 include mime.types; #設置客戶端與服務端請求的超時時間 keepalive_timeout 65; # 開啟壓縮功能,目的:提高傳輸效率,節省帶寬 gzip on server { #監聽端口 listen 80; #服務命名,最好就是用這個服務器的域名命名 server_name localhost; #指令塊,配置外部訪問資源和實際資源的對應關系 location /{ root /usr/blog; #表示靜態資源所在的目錄 index index.html index.htm; #訪問這個路徑對應的默認靜態資源文件或者網頁 } } }
location
語法
location [=|~|~*|^~|@] uri { ... } location @name { ... }
- =:表示精確匹配
- ~:表示區分大小寫正則匹配
- ~*:表示不區分大小寫正則匹配
- ^~:表示 URI 以某個常規字符串開頭
- !~:表示區分大小寫正則不匹配
- !~*:表示不區分大小寫正則不匹配
- /:通用匹配,任何請求都會匹配到
常用匹配規則
# 將所有請求直接轉發給服務器的9090端口 location = / { proxy_pass http://127.0.0.1:9090/; } # 目錄匹配 location ^~ /static/ { root /webroot/static/; } # 后綴匹配 location ~* \.(gif|jpg|jpeg|png|css|js|ico)$ { root /webroot/res/; } # 將/account/開始的請求轉發給Account服務器 location /account/ { proxy_pass http://127.0.0.1:8080/ } # 將/order/開始的請求轉發給Order服務器 location /order/ { proxy_pass http://127.0.0.1:9090/ }
root 與 alias
兩者區別在于 nginx 如何解釋 location 后面的 url
[root]
語法:root path
默認值:root html
配置段:http、server、location、if
處理結果:root 路徑+ location 路徑
[alias]
語法:alias path
配置段:location
處理結果:使用 alias 路徑替換 location 路徑
# 返回/www/root/html/t/a.html的文件 location ^~ /t/ { root /www/root/html/; } # 返回/www/root/html/new_t/a.html的文件 # 把location后面配置的路徑丟棄掉,把當前匹配到的目錄指向到指定的目錄。 location ^~ /t/ { alias /www/root/html/new_t/; }
解決刷新后出現404的問題
由上面的知識可以知道,刷新后,瀏覽器根據當前的url去請求html文件,但是SPA只有一個html文件,所以需要在nginx.conf的對應location里配置一行代碼 try_files $uri $uri/ /index.html;
告訴nginx如果按順序檢查文件是否存在,若不存在則重定向到index.html文件
總結
本來只是一個自己部署項目問題的排查,實際只需要一行代碼就能解決問題,但解決問題只是最基礎的。更需要的是通過這個問題去補充更多自己不了解的東西。只有這樣才能學的更多,不能只是頭痛醫頭,腳痛醫腳。
原文鏈接:https://juejin.cn/post/7151688437106491429
相關推薦
- 2022-12-07 C++11?成員函數作為回調函數的使用方式_C 語言
- 2022-07-16 ffmpeg中AVFrame\AVPacket與自己的數據交互
- 2023-07-08 編寫socket配置文件
- 2023-01-21 詳解Go語言如何使用標準庫sort對切片進行排序_Golang
- 2022-08-22 Pytest自定義mark標記篩選用例_python
- 2024-03-06 SpringBoot 項目 批量刪除的操作
- 2022-07-23 .Net創建型設計模式之工廠方法模式(Factory?Method)_基礎應用
- 2022-09-20 ?C++模板template原理解析_C 語言
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支