react router项目部署nginx 配置问题

react router项目部署nginx 配置问题

背景：项目中使用了react、react-router开发，在部署到nginx服务器时遇到了如下问题

history

history	url样例	url样例
hash history	/#/user/profile	不须要服务器支持
browser history	/user/profile	react-router官方推荐，须要服务器支持（由于是SPA项目，url切换时须要服务器始终返回index.html

nginx

以下介绍使用browser history模式部署到nginx服务器

部署到nginx根目录

访问路径：http://localhost/

# nginx配置
location / {
    root   html;
    index  index.html;
    # url 切换时始终返回index.html
    try_files $uri /index.html;
}
复制代码

部署到nginx子目录

假设部署到/app目录下，访问路径：http://localhost/app

# nginx配置
location /app {
    root   html;
    index  index.html;
    # url 切换时始终返回index.html
    try_files $uri /app/index.html;
}
# 图片样式缓存1年
location ~* /app.*\.(js|css|png|jpg)$
{
    access_log off;
    expires    365d;
}
# html/xml/json 文件不缓存
location ~* /app.*\.(?:manifest|appcache|html?|xml|json)$
{
    expires    -1;
}
复制代码

// package.json
"homepage": "http://localhost/app",
复制代码

// react-router路由配置
// 注意指定basename
<BrowserRouter basename='/app'>
</BrowserRouter>
复制代码

开启nginx的gzip压缩

# 开启gzip
gzip on;
 # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;
 # gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 1;
 # 进行压缩的文件类型。javascript有多种形式。其中的值能够在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
 # 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
 # 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";
复制代码

总体配置

# nginx.conf总体配置大概以下：
http {
    # 开启gzip
    gzip on;
    # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
    gzip_min_length 1k;
    # gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明
    gzip_comp_level 1;
    # 进行压缩的文件类型。javascript有多种形式。其中的值能够在 mime.types 文件中找到。
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php;
    # 是否在http header中添加Vary: Accept-Encoding，建议开启
    gzip_vary on;
    # 禁用IE 6 gzip
    gzip_disable "MSIE [1-6]\.";

    server {
        location /app {
            root   html;
            index  index.html;
            # url 切换时始终返回index.html
            try_files $uri /app/index.html;
        }
        # 图片样式缓存1年
        location ~* /app.*\.(js|css|png|jpg)$
        {
            access_log off;
            expires    365d;
        }
        # html/xml/json 文件不缓存
        location ~* /app.*\.(?:manifest|appcache|html?|xml|json)$
        {
            expires    -1;
        }
    }
}
复制代码