快捷導(dǎo)航

安裝Windows版nginx及部署前端代碼并解決刷新出現(xiàn)404問題

更新時間：2023年12月08日 09:40:11 作者：yqd666

這篇文章主要給大家介紹了關(guān)于安裝Windows版nginx及部署前端代碼解決刷新出現(xiàn)404問題的相關(guān)資料,使用nginx部署前端項目是一篇非常詳細的教程,旨在幫助初學(xué)者使用Nginx來部署前端項目,需要的朋友可以參考下

1.安裝Nginx

（1）下載地址：https://nginx.org/en/download.html

（2）建議選穩(wěn)定版下載

（3）下載好后，直接解壓即可

2.啟動Nginx以及常用命令

（1）啟動nginx時，使用命令進行操作；不要直接雙擊nginx.exe，在nginx根目錄下直接輸：cmd。

啟動時會一閃而過是正常的

2.1 常用命令

（1）啟動nginx：start nginx

①啟動后查看任務(wù)進程是否存在，dos或打開任務(wù)管理器都行

dos查看：
tasklist /fi “imagename eq nginx.exe”
任務(wù)管理器查看

如果都沒有可能是啟動報錯了查看一下日志，在nginx目錄中的logs文件夾下error.log是日志文件，

常見的錯誤：

端口號被占用
nginx文件夾路徑含中文
其他錯誤就詳細看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

補充：有時修改nginx配置文件并不生效，可殺死nginx進程重啟，以下命令可殺死nginx所有進程

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，第一行默認是這樣的

#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;
}
以下省略