服务器完全配置（Part 5）

目标：处理 SPA 的二级路由 404 问题，并教你开启 nginx 的 gzip 功能。

前言

现在前端 SPA 应用越来越多，各家框架都有自己的一套路由体系，像 React 就由 Router-router 进行路由管理，这样大大方便了我们的开发，但是也带来了问题。

一般我们会遇到像下面这样的路由：http://xx.xxx.com/xxxx/xxxx，如果没有做任何设置，直接访问这个 url 会返回 404 页面，因为 nginx 启动的服务其实是在你的资源文件夹中寻找对应的文件，而 SPA 打包后只有一个或几个 .js 文件，nginx 是找不到的，所以理所当然给你返回 404 页面。

解决

其实很简单，我们只需把 nginx 配置项中的 try_files 定向至 index.html，具体如下：

server {
        listen 80;
        root /usr/share/nginx/html/oj;
        index index.html index.htm index.nginx-debian.html;
        server_name oj.outxu.cn;
        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri /index.html;
                # Uncomment to enable naxsi on this location
                # include /etc/nginx/naxsi.rules
        }

}

Gzip

好了，这部分有点水，所以附带 nginx 开启 gzip 的教程，也是很水…

nginx 自带了 Gzip 功能，我们只需要修改 nginx 默认配置就行了，直接编辑 nginx.conf 文件。

nano /etc/nginx/nginx.conf

找到 gzip 设置项，改成下面这样：

以下是补充的静态站点参考配置，并非原截图复原。放在对应静态站点的 server { ... } 内；已有同名配置项时修改原项，不要重复添加。指令说明见 Nginx 官方文档

gzip on;
gzip_min_length 1000;
gzip_vary on;
gzip_types
    text/plain
    text/css
    text/javascript
    application/javascript
    application/xml
    image/svg+xml;
# text/html 默认已包含，无需重复列出

修改后先运行 sudo nginx -t 检查配置，通过后再重启

重启 nginx 服务：

sudo service nginx restart

服务器完全配置 （Part 5）

前言

解决

Gzip