码迷,mamicode.com
首页 > Web开发 > 详细

Nginx配置Web项目(多页面应用,单页面应用)

时间:2020-03-12 15:51:12      阅读:104      评论:0      收藏:0      [点我收藏+]

标签:调整   两种   tps   rect   重定向   多个   table   cer   完成   

目前前端项目 可分两种: 多页面应用,单页面应用。

单页面应用 入口是一个html文件,页面路由由js控制,动态往html页面插入DOM。

多页面应用 是由多个html文件组成,浏览器访问的是对应服务器的html文件。

多页面应用

目录结构

.
├── README.md
├── html
    ├── index.html
    └── project.html
└── img
    └── bg.jpg

上面这种情况 index.html 不在根目录下,nginx.conf 需要配置更加准确。

nginx配置

先来看一个有问题的nginx配置,因为做了太多的资源适配,会导致页面内资源访问或页面跳转有问题。

有问题的nginx配置

server {
  listen 443 ssl;
  server_name www.whosmeya.com;
  ssl on;
  ssl_certificate 1_www.whosmeya.com_bundle.crt;
  ssl_certificate_key 2_www.whosmeya.com.key;

  location / {
    root /root/libs/landing-page/;
    try_files $uri $uri/index.html $uri.html @fallback;
  }

  location @fallback {
    root /root/libs/landing-page/;
    rewrite .* /html/index.html break;
  }
}

问题解析:
如果路径正确,没问题。
如果路径错误,会将资源定位到/html/index.html,且路径不跳转。
问题是如果/html/index.html用了相对路径获取资源或跳转,就会获取不到或跳转不过去。

例如:
访问 https://www.whosmeya.com/a/b 也能定位到资源 /html/index.html
页面内有个a链接 href="./project.html", 愿意是跳转/html/project.html,但在https://www.whosmeya.com/a/b下,会被跳转到https://www.whosmeya.com/a/project.html,然后没有对应资源,也会被定位到 /html/index.html

调整后的nginx配置

针对上面问题,需要针对多页面应用对nginx配置做修改:

server {
  listen 443 ssl;
  server_name www.whosmeya.com;
  ssl on;
  ssl_certificate 1_www.whosmeya.com_bundle.crt;
  ssl_certificate_key 2_www.whosmeya.com.key;

  location / {
    root /root/libs/landing-page/;
    try_files $uri $uri.html @fallback;
  }

  location @fallback {
    root /root/libs/landing-page/;
    rewrite .* /html/index.html redirect;
  }
}

改动点

try_files $uri $uri/index.html $uri.html @fallback; -> try_files $uri $uri.html @fallback;
rewrite .* /html/index.html break; -> rewrite .* /html/index.html redirect;

这样会 直接找 $uri 或者 $uri.html, 找不到会重定向到 首页/html/index.html

补充:
rewrite最后一项参数

参数 说明
last 本条规则匹配完成后继续向下匹配新的location URI规则
break 本条规则匹配完成后终止,不在匹配任何规则
redirect 返回302临时重定向
permanent 返回301永久重定向

单页面应用

目录结构

.
├── asset-manifest.json
├── favicon.ico
├── index.html
├── manifest.json
├── precache-manifest.e641bb60bd40b24c7a13e1d60c2a5baa.js
├── service-worker.js
└── static
    ├── css
    │?? ├── main.2cce8147.chunk.css
    │?? └── main.2cce8147.chunk.css.map
    ├── js
    │?? ├── 2.b41502e9.chunk.js
    │?? ├── 2.b41502e9.chunk.js.map
    │?? ├── main.05bebd98.chunk.js
    │?? ├── main.05bebd98.chunk.js.map
    │?? ├── runtime~main.a8a9905a.js
    │?? └── runtime~main.a8a9905a.js.map
    └── media
        └── logo.5d5d9eef.svg

nginx配置

server {
  listen 80;
  server_name react.whosmeya.com;

  location / {
    root /root/libs/whosmeya-react/;
    try_files $uri @fallback;
  }

  location @fallback {
    root /root/libs/whosmeya-react/;
    rewrite .* /index.html break;
  }
}

单页面应用 配置思路是:
服务器收到的所有访问,能访问到就返回资源,访问不到就返回index.html。
fallback必须要设置,不然刷新页面会404。
rewrite要使用break,不需要redirect路由重定向,因为访问资源都是基于根目录 / 。

Nginx配置Web项目(多页面应用,单页面应用)

标签:调整   两种   tps   rect   重定向   多个   table   cer   完成   

原文地址:https://www.cnblogs.com/whosMeya/p/12466396.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!