【器】Nginx配置单页面应用

最新推荐文章于 2024-10-09 18:00:00 发布

原创最新推荐文章于 2024-10-09 18:00:00 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #java #vue #web #javascript

本文基于工程实践，介绍单页面应用配置问题。部署单页面应用时，直接访问页面资源会报404，原因是单页面只有一个主页面，资源路径需路由处理。解决方案是让nginx在找不到资源时加载index.html，还给出了完整配置示例。

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

这是我参与更文挑战的第2天，活动详情查看：更文挑战

本篇文章根据工程实践，介绍如何使用Nginx配置单页面应用。

1.问题

刚开始在nginx.conf静态资源映射的配置如下:

root /usr/share/nginx/html/appname/; index index.html index.htm;

以上的配置能正常访问index.html,能点击顺序地进入其他页面。但是使用浏览器的browserHistory 和 refresh 页面会报404。

2.原因

因为我们部署的是单页面应用,目前主流的前端框架都是单页面的，例如React 和Vue。

单页面简单来说就是访问所有资源路径、其实页面内容只有一个(一般是index.html)。这个页面中引入的js框架会根据当前访问的url去路由到相应的子页面组件(可以理解为页面片段)进行逻辑处理和页面渲染。

所以我们直接访问某个页面资源(例如/usr/info)，这个资源是不存在的，所以报服务端就会报404。

3.解决方案

root /usr/share/nginx/html/appname/; index index.html index.htm; location / { try_files $uri $uri/ /index.html; }

原理是，当配置try_files找不到某个页面资源，这时，nginx会尝试加载index.html，加载index.html之后，react-router就能起作用并匹配我们输入的/home路由，从而显示正确的home页面。

4.完整配置

完整配置，仅供参考。

``` accesslog /var/log/nginx/access.log; errorlog /var/log/nginx/error.log; server { listen 80; # gzip config gzip on; gzipminlength 1k; gzipcomplevel 9; gziptypes text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml; gzipvary on; gzip_disable "MSIE [1-6]."; root /usr/share/nginx/html/appname/; index index.html index.htm;

location / {
                try_files $uri $uri/ /index.html;
    }

     location ^~ /assets/ {
                gzip_static on;
                expires max;
                add_header Cache-Control public;
     }  
    error_page 500 502 503 504 /500.html;
    client_max_body_size 20M;
     keepalive_timeout 10;
}

```