首页 > 网站 > Nginx > 正文

browser history部署到nginx服务器的方法

2024-08-30 12:23:37
字体:
来源:转载
供稿:网友
  在部署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;
  }
  }
  }
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表