安裝Windows版nginx及部署前端代碼并解決刷新出現(xiàn)404問題
1.安裝Nginx
(1)下載地址:https://nginx.org/en/download.html
(2)建議選穩(wěn)定版下載
(3)下載好后,直接解壓即可
2.啟動Nginx以及常用命令
(1)啟動nginx時,使用命令進(jìn)行操作;不要直接雙擊nginx.exe,在nginx根目錄下直接輸:cmd。
啟動時會一閃而過是正常的
2.1 常用命令
(1)啟動nginx:start nginx
①啟動后查看任務(wù)進(jìn)程是否存在,dos或打開任務(wù)管理器都行
- dos查看:
tasklist /fi “imagename eq nginx.exe” - 任務(wù)管理器查看
如果都沒有可能是啟動報錯了查看一下日志,在nginx目錄中的logs文件夾下error.log是日志文件,
常見的錯誤:
- 端口號被占用
- nginx文件夾路徑含中文
- 其他錯誤就詳細(xì)看log中的描述
(2)停止nginx:
①快速停止:nginx -s stop
②完整有序的關(guān)閉:nginx -s quit
(3)重新加載nginx配置:nginx -s reload
(4)檢測配置文件:nginx -t -c conf/nginx.conf
(5)查看nginx版本:nginx -v
補(bǔ)充:有時修改nginx配置文件并不生效,可殺死nginx進(jìn)程重啟,以下命令可殺死nginx所有進(jìn)程
taskkill /IM nginx.exe /F
3.部署前端打好的dist包
server { listen 9090; # 定義端口號; server_name localhost; # 定義服務(wù)名 location / { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' true; add_header 'Access-Control-Allow-Headers' *; add_header 'Access-Control-Allow-Methods' *; add_header 'Access-Control-Expose-Headers' *; root html/dist; # 打包后的文件目錄,這里是相對路徑,也可以寫帶磁盤的絕對路徑 index index.html index.htm; try_files $uri $uri/ /index.html; # 防止刷新出現(xiàn)404 } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # 代理轉(zhuǎn)發(fā) location /prod-api/ { proxy_pass http://10.0.11.246:9595/; }
4.前端部署nginx刷新后404,解決Nginx刷新頁面后404的問題
(1)添加try_files $uri $uri/ /index.html,然后重啟一下nginx問題就解決了。
解釋:try_files 表示檢查文件是否存在,返回第一個找到的文件,這里設(shè)置是index.html內(nèi)部重定向。
(2)另外,還有一種404報錯的問題,可能是nginx訪問文件權(quán)限問題,
①打開nginx.conf,第一行默認(rèn)是這樣的
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } 以下省略
②可能是你訪問的路徑,需要root權(quán)限,而你啟動nginx使用的普通用戶,權(quán)限不足導(dǎo)致訪問不到文件,所以可以這么修改:
user root; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } 以下省略
總結(jié)
到此這篇關(guān)于安裝Windows版nginx及部署前端代碼并解決刷新出現(xiàn)404問題的文章就介紹到這了,更多相關(guān)Windows nginx部署前端內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Nginx 平滑升級的實現(xiàn)(拒絕服務(wù)漏洞)
本文主要介紹了Nginx 平滑升級的實現(xiàn)(拒絕服務(wù)漏洞),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02Nginx轉(zhuǎn)發(fā)socket端口配置詳解
這篇文章主要介紹了Nginx轉(zhuǎn)發(fā)socket端口配置詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-06-06Nginx?502?bad?gateway錯誤解決的九種方案及原因
一般在訪問某些網(wǎng)站或者我們在做本地測試的時候,服務(wù)器突然返回502?Bad?Gateway?Nginx,這種問題相信大家也遇到不少了,下面這篇文章主要給大家介紹了關(guān)于Nginx?502?bad?gateway錯誤解決的九種方案及原因,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08