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

 更新时间:2023年12月08日 09:40:11   作者:yqd666  
这篇文章主要给大家介绍了关于安装Windows版nginx及部署前端代码解决刷新出现404问题的相关资料,使用nginx部署前端项目是一篇非常详细的教程,旨在帮助初学者使用Nginx来部署前端项目,需要的朋友可以参考下

1.安装Nginx

(1)下载地址:https://nginx.org/en/download.html

(2)建议选稳定版下载

(3)下载好后,直接解压即可

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

总结

到此这篇关于安装Windows版nginx及部署前端代码并解决刷新出现404问题的文章就介绍到这了,更多相关Windows nginx部署前端内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • nginx限制ip访问频率的实现示例

    nginx限制ip访问频率的实现示例

    Nginx通过limit_conn_zone 和 limit_req_zone对同一个IP地址进行限速限流,本文主要介绍了nginx限制ip访问频率的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • Nginx 平滑升级的实现(拒绝服务漏洞)

    Nginx 平滑升级的实现(拒绝服务漏洞)

    本文主要介绍了Nginx 平滑升级的实现(拒绝服务漏洞),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-02-02
  • Nginx同时支持Http和Https的配置详解

    Nginx同时支持Http和Https的配置详解

    这篇文章主要介绍了Nginx同时支持Http和Https的配置详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • Nginx请求头丢失的问题解决

    Nginx请求头丢失的问题解决

    本文主要介绍了在使用Nginx进行请求转发时,遇到请求头参数丢失的问题,导致的原因可能是api_key_id和api_key_value这2个参数传递过程中丢失或则根本没传递,下面就来具体介绍一下
    2024-12-12
  • Nginx禁止ip访问或非法域名访问

    Nginx禁止ip访问或非法域名访问

    这篇文章主要介绍了Nginx禁止ip访问或非法域名访问,需要的朋友可以参考下
    2022-04-04
  • Nginx转发socket端口配置详解

    Nginx转发socket端口配置详解

    这篇文章主要介绍了Nginx转发socket端口配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • Nginx实现高并发的项目实践

    Nginx实现高并发的项目实践

    本文主要介绍了Nginx实现高并发的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-03-03
  • Nginx的跨域、alias、优化方式

    Nginx的跨域、alias、优化方式

    这篇文章主要介绍了Nginx的跨域、alias、优化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Nginx配置ssl实现https的全过程记录

    Nginx配置ssl实现https的全过程记录

    这篇文章主要给大家介绍了关于Nginx配置ssl实现https的相关资料,文章通过实例代码介绍的非常详细,对大家学习或者使用Nginx具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • Nginx 502 bad gateway错误解决的九种方案及原因

    Nginx 502 bad gateway错误解决的九种方案及原因

    一般在访问某些网站或者我们在做本地测试的时候,服务器突然返回502 Bad Gateway Nginx,这种问题相信大家也遇到不少了,下面这篇文章主要给大家介绍了关于Nginx 502 bad gateway错误解决的九种方案及原因,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08

最新评论