在部署nginx時，因為使用了react-router開發，遇到了以下問題：
下面就介紹browser history部署到nginx服務器的方法：
1.訪問http://localhost/路徑。
# nginx配置
location / {
root html;
index index.html;
# url 切換時始終返回index.html
try_files $uri /index.html;
}
將其部署到Nginx的子目錄，假設部署到/ask目錄下，http://localhost/ask則就是訪問路徑，
# 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>
然后開啟gzip在Nginx中的壓縮過程，
# 開啟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;
}
}
}
