安装Windows版nginx以及部署前端代码并就解决刷新出现404

本是古典何须时尚 2024-03-22 21:46 44阅读 0赞

#### 文章目录 ####

*  1.安装Nginx
 *  2.启动Nginx以及常用命令
 *   *  2.1 常用命令
 *  3.部署前端打好的dist包
 *  4.前端部署nginx刷新后404，解决Nginx刷新页面后404的问题

## 1.安装Nginx ##

（1）下载地址：https://nginx.org/en/download.html  
（2）建议选稳定版下载

![在这里插入图片描述][087fb0b7379849df915d0c1762bdf458.png]

（3）下载好后，直接解压即可

![在这里插入图片描述][5643866125c74914aa4f93e3f2c51d22.png]

## 2.启动Nginx以及常用命令 ##

（1）启动nginx时，使用命令进行操作；不要直接双击nginx.exe，在nginx根目录下直接输：cmd。  
启动时会一闪而过是正常的

![在这里插入图片描述][ba7d2a7f5c5e401fa141654624908ec8.png]

### 2.1 常用命令 ###

（1）启动nginx：start nginx

①启动后查看任务进程是否存在，dos或打开任务管理器都行

*  dos查看：  
    tasklist /fi “imagename eq nginx.exe”
 *  任务管理器查看

![在这里插入图片描述][3a6a9da0bcff4feab9fe9b563e6d84fa.png]  
如果都没有可能是启动报错了查看一下日志，在nginx目录中的logs文件夹下error.log是日志文件，  
常见的错误：

*  端口号被占用
 *  nginx文件夹路径含中文
 *  其他错误就详细看log中的描述

（2）停止nginx：

①快速停止：nginx -s stop  
②完整有序的关闭：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;   # 定义服务名
    
            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;	 # 防止刷新出现404
            }
    
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
            # 代理转发
            location /prod-api/ {
                proxy_pass   http://10.0.11.246:9595/;
            }

## 4.前端部署nginx刷新后404，解决Nginx刷新页面后404的问题 ##

（1）添加try\_files $uri $uri/ /index.html，然后重启一下nginx问题就解决了。

![在这里插入图片描述][3205451937bb4399a28eb97023375e31.png]

解释：try\_files 表示检查文件是否存在，返回第一个找到的文件，这里设置是index.html内部重定向。  
（2）另外，还有一种404报错的问题，可能是nginx访问文件权限问题，  
①打开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权限，而你启动nginx使用的普通用户，权限不足导致访问不到文件，所以可以这么修改：

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

[087fb0b7379849df915d0c1762bdf458.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/df6dcb5737f34e2f9812fb064c26e63b.png
[5643866125c74914aa4f93e3f2c51d22.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/d5aaa1bffce44df5b5dc8bcd66c1e0fc.png
[ba7d2a7f5c5e401fa141654624908ec8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/24620d4ace184a08a2888e49ff7fffd6.png
[3a6a9da0bcff4feab9fe9b563e6d84fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/4c84be8d68674352969d3a2871bcbf9c.png
[3205451937bb4399a28eb97023375e31.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/8f53aa0d82af4570ad3ae73562e03ddc.png