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

分类： Nginx学习发布时间： 2024-08-03 16:00:53

安装Windows版Nginx 第一步：下载Nginx 首先，你需要从Nginx官网（http://nginx.org/）下载适合Windows的稳定版本。下载后，解压到一个合适的目录，例如D:\nginx。第二步：启动Nginx 直接启动：不推荐直接双击nginx.exe，因为这样会直接打开一...

在自媒体时代，网站的性能和稳定性对于用户体验至关重要。Nginx作为一款轻量级、高性能的HTTP和反向代理服务器，是众多开发者和运维人员的首选。今天，我们将一起探讨如何在Windows系统上安装Nginx，并部署前端代码，同时解决刷新页面时出现404问题。

安装Windows版Nginx

第一步：下载Nginx

首先，你需要从Nginx官网（http://nginx.org/）下载适合Windows的稳定版本。下载后，解压到一个合适的目录，例如D:\nginx。

第二步：启动Nginx

直接启动：不推荐直接双击nginx.exe，因为这样会直接打开一个黑窗口并快速关闭，不易判断是否启动成功。
通过命令启动：打开cmd命令窗口，切换到Nginx解压目录下，输入start nginx命令并回车。随后，在浏览器中输入http://localhost（默认端口为80，可省略），如果看到Nginx的欢迎页面，则表示启动成功。

第三步：检查端口占用

如果80端口已被占用，你需要修改Nginx的配置文件nginx.conf中的listen指令，将其改为其他未被占用的端口。可以使用命令netstat -ano | findstr 80来检查80端口的占用情况。

部署前端代码

第一步：打包前端代码

使用Webpack、Parcel等打包工具将前端代码打包成静态资源文件（如HTML、CSS、JS等），并放置到一个文件夹中，例如D:\nginx\html\my-frontend。

第二步：配置Nginx

修改Nginx的配置文件nginx.conf，在server块中添加一个location块来指定前端代码的访问路径。例如：

server {
    listen       80;
    server_name  localhost;

    location / {
        root   D:/nginx/html/my-frontend;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html; # 解决单页面应用刷新404问题
    }
}

注意：try_files $uri $uri/ /index.html; 这行代码非常关键，它确保了当请求的资源不存在时，Nginx会返回index.html页面，从而解决了单页面应用（SPA）刷新时出现404的问题。

第三步：重载Nginx配置

在Nginx命令行中输入nginx -s reload来重载配置，使更改生效。