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

yqd666

已于 2025-03-16 15:52:07 修改

阅读量1.3w

点赞数 3

文章标签： windows nginx 前端

于 2023-07-27 20:25:26 首次发布

本文链接：https://blog.youkuaiyun.com/y516369/article/details/131967014

版权

文章介绍了如何安装Nginx，包括下载稳定版、解压，以及启动和管理Nginx的常用命令。接着，讲解了如何部署前端打包后的dist文件，通过配置Nginx服务器，特别是解决页面刷新后出现404错误的方法，如使用try_files指令。此外，还提到了可能的权限问题及其解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装Nginx

1.1 windows

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

在这里插入图片描述

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

在这里插入图片描述

1.2.Linux

如果通过Nginx源码安装需要提前准备的内容：
（1）Nginx是用c语言编写的，在安装Nginx之前需要安装一些依赖包
①GCC编译器
Nginx是使用C语言编写的程序，因此想要运行Nginx就需要安装一个编译工具。GCC就是一个开源的编译器集合，用于处理各种各样的语言，其中就包含了C语言。

使用命令yum install -y gcc来安装

安装成功后，可以通过gcc --version来查看gcc是否安装成功

②PCRE
Nginx在编译过程中需要使用到PCRE库（perl Compatible Regular Expressoin 兼容正则表达式库)，因为在Nginx的Rewrite模块和http核心模块都会使用到PCRE正则表达式语法。

可以使用命令yum install -y pcre pcre-devel来进行安装

安装成功后，可以通过rpm -qa pcre pcre-devel来查看是否安装成功
③zlib
zlib库提供了开发人员的压缩算法，在Nginx的各个模块中需要使用gzip压缩，所以我们也需要提前安装其库及源代码zlib和zlib-devel
可以使用命令yum install -y zlib zlib-devel来进行安装
安装成功后，可以通过rpm -qa zlib zlib-devel来查看是否安装成功
④OpenSSL
OpenSSL是一个开放源代码的软件库包，应用程序可以使用这个包进行安全通信，并且避免被窃听。

SSL:Secure Sockets Layer安全套接协议的缩写，可以在Internet上提供秘密性传输，其目标是保证两个应用间通信的保密性和可靠性。在Nginx中，如果服务器需要提供安全网页时就需要用到OpenSSL库，所以我们需要对OpenSSL的库文件及它的开发安装包进行一个安装。

可以使用命令yum install -y openssl openssl-devel来进行安装

安装成功后，可以通过rpm -qa openssl openssl-devel来查看是否安装成功

上述命令，一个个来的话比较麻烦，我们也可以通过一条命令来进行安装

yum install -y gcc pcre pcre-devel zlib zlib-devel openssl openssl-devel进行全部安装

（2）下载Nginx安装包wget https://nginx.org/download/nginx-1.16.1.tar.gz(wget命令初始是没有的，使用yum install wget安装wget)
（3）解压：tar -zxvf nginx-1.16.1.tar.gz
（4） cd nginx-1.16.1
（5）指定Nginx将来的安装目录

./configure --prefix=/usr/local/nginx

（6）先编译后安装：make && make install

2.启动Nginx以及常用命令

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

在这里插入图片描述

2.1 常用命令

（1）启动nginx：start nginx

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

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

在这里插入图片描述
如果都没有可能是启动报错了查看一下日志，在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问题就解决了。

在这里插入图片描述

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