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

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

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;
}
 
以下省略
目录
相关文章
|
1月前
|
应用服务中间件 Shell PHP
windows系统配置nginx环境运行pbootcms访问首页直接404的问题
windows系统配置nginx环境运行pbootcms访问首页直接404的问题
|
2月前
|
Windows
Windows操作系统部署安装Kerberos客户端
详细介绍了在Windows操作系统上部署安装Kerberos客户端的完整过程,包括下载安装包、安装步骤、自定义安装路径、修改环境变量、配置hosts文件和Kerberos配置文件,以及安装后的验证步骤。
331 3
Windows操作系统部署安装Kerberos客户端
|
2月前
|
Windows
Windows7电脑启动时提示文件winload.exe无法验证其数字签名,错误代码0xc0000428的解决方法
Windows7电脑启动时提示文件winload.exe无法验证其数字签名,错误代码0xc0000428的解决方法
|
2月前
|
Linux 开发者 Python
从Windows到Linux,Python系统调用如何让代码飞翔🚀
【9月更文挑战第10天】在编程领域,跨越不同操作系统的障碍是常见挑战。Python凭借其“编写一次,到处运行”的理念,显著简化了这一过程。通过os、subprocess、shutil等标准库模块,Python提供了统一的接口,自动处理底层差异,使代码在Windows和Linux上无缝运行。例如,`open`函数在不同系统中以相同方式操作文件,而`subprocess`模块则能一致地执行系统命令。此外,第三方库如psutil进一步增强了跨平台能力,使开发者能够轻松编写高效且易维护的代码。借助Python的强大系统调用功能,跨平台编程变得简单高效。
39 0
|
3月前
|
开发者 C# Windows
WPF与游戏开发:当桌面应用遇见游戏梦想——利用Windows Presentation Foundation打造属于你的2D游戏世界,从环境搭建到代码实践全面解析新兴开发路径
【8月更文挑战第31天】随着游戏开发技术的进步,WPF作为.NET Framework的一部分,凭借其图形渲染能力和灵活的UI设计,成为桌面游戏开发的新选择。本文通过技术综述和示例代码,介绍如何利用WPF进行游戏开发。首先确保安装最新版Visual Studio并创建WPF项目。接着,通过XAML设计游戏界面,并在C#中实现游戏逻辑,如玩家控制和障碍物碰撞检测。示例展示了创建基本2D游戏的过程,包括角色移动和碰撞处理。通过本文,WPF开发者可更好地理解并应用游戏开发技术,创造吸引人的桌面游戏。
176 0
|
3月前
|
C# Windows 开发者
当WPF遇见OpenGL:一场关于如何在Windows Presentation Foundation中融入高性能跨平台图形处理技术的精彩碰撞——详解集成步骤与实战代码示例
【8月更文挑战第31天】本文详细介绍了如何在Windows Presentation Foundation (WPF) 中集成OpenGL,以实现高性能的跨平台图形处理。通过具体示例代码,展示了使用SharpGL库在WPF应用中创建并渲染OpenGL图形的过程,包括开发环境搭建、OpenGL渲染窗口创建及控件集成等关键步骤,帮助开发者更好地理解和应用OpenGL技术。
239 0
|
3月前
|
存储 开发者 C#
WPF与邮件发送:教你如何在Windows Presentation Foundation应用中无缝集成电子邮件功能——从界面设计到代码实现,全面解析邮件发送的每一个细节密武器!
【8月更文挑战第31天】本文探讨了如何在Windows Presentation Foundation(WPF)应用中集成电子邮件发送功能,详细介绍了从创建WPF项目到设计用户界面的全过程,并通过具体示例代码展示了如何使用`System.Net.Mail`命名空间中的`SmtpClient`和`MailMessage`类来实现邮件发送逻辑。文章还强调了安全性和错误处理的重要性,提供了实用的异常捕获代码片段,旨在帮助WPF开发者更好地掌握邮件发送技术,提升应用程序的功能性与用户体验。
56 0
|
3月前
|
iOS开发 Android开发 MacOS
从零到全能开发者:解锁Uno Platform,一键跨越多平台应用开发的神奇之旅,让你的代码飞遍Windows、iOS、Android、macOS及Web,技术小白也能秒变跨平台大神!
【8月更文挑战第31天】从零开始,踏上使用Uno Platform开发跨平台应用的旅程。只需编写一次代码,即可轻松部署到Windows、iOS、macOS、Android及Web(通过WASM)等多个平台。Uno Platform为.NET生态带来前所未有的灵活性和效率,简化跨平台开发。首先确保安装了Visual Studio或VS Code及.NET SDK,然后选择合适的项目模板创建新项目。项目结构类似传统.NET MAUI或WPF项目,包含核心NuGet包。通过简单的按钮示例,你可以快速上手并构建应用。Uno Platform让你的技术探索之旅充满无限可能。
68 0
|
3月前
|
网络安全 API 数据安全/隐私保护
【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service Windows)
【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service Windows)
|
28天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
118 2