vue代理服务器proxy配置_前端——你需要知道的nginx相关配置

2023-05-16

nginx 基本配置都是在安装目录下的 conf/nginx.conf 文件中。

#mime.types

看下面的默认配置:

http {    include       mime.types; // 可以单独配置文件}

MIME-type 和 Content-Type 的关系: 当 web 服务器收到静态的资源文件请求时,依据请求文件的后缀名在服务器的 MIME 配置文件中找到对应的 MIME Type,再根据 MIME Type 设置 HTTP Response 的Content-Type,然后浏览器根据 Content-Type 的值处理文件。

什么是 MIME-TYPE: 为什么这么说呢?首先,我们要了解浏览器是如何处理内容的。在浏览器中显示的内容有 HTML、有 XML、有 GIF、还有 Flash ... 那么,浏览器是如何区分它们,绝定什么内容用什么形式来显示呢?答案是 MIME Type,也就是该资源的媒体类型。

媒体类型通常是通过 HTTP 协议,由 Web 服务器告知浏览器的,更准确地说,是通过 Content-Type 来表示的,例如: Content-Type: text/HTML 表示内容是 text/HTML 类型,也就是超文本文件。为什么是 “text/HTML” 而不是 “HTML/text” 或者别的什么?MIME Type 不是个人指定的,是经过 ietf 组织协商,以 RFC 的形式作为建议的标准发布在网上的,大多数的 Web 服务器和用户代理都会支持这个规范 (顺便说一句,Email 附件的类型也是通过 MIME Type 指定的)。 通常只有一些在互联网上获得广泛应用的格式才会获得一个 MIME Type,如果是某个客户端自己定义的格式,一般只能以 application/x- 开头。 XHTML 正是一个获得广泛应用的格式,因此,在 RFC 3236 中,说明了 XHTML 格式文件的 MIME Type 应该是 application/xHTML+XML。 当然,处理本地的文件,在没有人告诉浏览器某个文件的 MIME Type 的情况下,浏览器也会做一些默认的处理,这可能和你在操作系统中给文件配置的 MIME Type 有关。比如在 Windows 下,打开注册表的“HKEY_LOCAL_MACHINESOFTWAREClassesMIMEDatabaseContent Type”主键,你可以看到所有 MIME Type 的配置信息。

#多站点的配置

配置站点自然是在 nginx.conf 文件内,但是,不利于维护,所以利用 include 在别处创建一个文件夹,专门收集站点的配置;比如我有两个站点需要配置,在 conf 文件夹下新建一个 servers 由于放置站点的配置;并增加 test.conf 以及 test2.conf,然后在 nginx.conf 文件内,新增配置:他会读取所有 server 文件夹下的 conf 结尾的配置。

http {    include       mime.types;    include       servers/*.conf;}

test.conf 中的内容:

    # 表示要启动一个服务    server {        listen       9999; # 服务监听的端口        server_name  localhost; # 浏览器访问的 host name    # 要代理的路由location / {      # 匹配到 localhost:9999/ 代理到下面的地址  proxy_pass http://localhost:8888;      proxy_set_header Host $host;}    # 匹配到 localhost:9999/api/ 代理到下面的地址location /api/ {  proxy_pass http://localhost:8000;  proxy_set_header Host $host;}        error_page   500 502 503 504  /50x.html;        location = /50x.html {            root   html;        }    }

注意这里的 proxy_set_header Host $host; 他的意思是设置 nginx 发送代理请求时候请求的 host 设置为浏览器请求的 host 而不是 nginx 默认设置的 proxy_pass 的 host,比如我们配置的 proxy_pass http://localhost:8888; 如果在服务器端获取 host,是获取到 127.0.0.1:8888,而服务器端想要的是真正的浏览器发送请求的 host,可以设置 proxy_set_header Host $host; $host 是 nginx 中的一个变量,他是每个请求带过来的 host。

#配置 nginx 缓存

#配置

在 test.conf 添加下面的配置:

    # 新建缓存配置项    proxy_cache_path cache levels=1:2 keys_zone=my_cache:10m;    # 表示要启动一个服务    server {        listen       9999; # 服务监听的端口        server_name  localhost; # 浏览器访问的 host name    # 要代理的路由location / {      # 匹配到 localhost:9999/ 代理到下面的地址  proxy_pass http://localhost:8888;      # 使用缓存配置      proxy_cache my_cache;}  }

proxy_cache_path cache levels=1:2 keys_zone=my_cache:10m

首先 proxy_cache_path 是缓存选项的配置,cache 是缓存文件的存放路径(相对路径);levels 是否要创建二级文件夹,因为 cache 可以用在不同的站点缓存,如果都存放在 cache 文件夹中,没有子目录,随着缓存的越来越多,查找缓存的速度也会越来越慢;所以要新建一个二级文件夹。keys_zone 存储大小以及存储的缓存的名字。

#验证缓存

新建一个 node 服务:

const http = require('http')const fs = require('fs')const wait = (second) => {  return new Promise((resolve, reject) => {    setTimeout(() => {      resolve()    }, second * 1000)  })}http.createServer(function(req, res) {  if (req.url === '/') {    const html = fs.readFileSync('test.html', 'utf-8')    res.writeHead(200, {      'Content-Type': 'text/html'    })    res.end(html)  }  if (req.url === '/data') {    res.writeHead(200, {      'Cache-Control': 'max-age=20'    })    wait(2).then(() => res.end('success'))  }}).listen(8888)

我们对 '/data' 接口进行了缓存设置 'Cache-Control': 'max-age=20' ,然后使用 nginx 代理服务代理接口:

    proxy_cache_path cache levels=1:2 keys_zone=my_cache:10m;    # 表示要启动一个服务    server {        listen       9999; # 服务监听的端口        server_name  localhost; # 浏览器访问的 host name    # 要代理的路由location / {      proxy_cache my_cache;      # 匹配到 localhost:9999/ 代理到下面的地址  proxy_pass http://localhost:8888;}

然后第一次请求时候,会等待两秒显示 success ,如果下次请求,代理服务器已经对数据进行了缓存,直接会显示出来,这时候打开其他浏览器,之前并没有访问过这个地址, success 也会直接出来。说明 代理服务器缓存配置生效了;

#代理服务器 s-maxage 的配置

可以看到只设置了 max-age=2 为两秒,但是两秒后刷新页面还是请求很快,是因为 s-maxage=20 只有在代理服务器里面才会生效;也就是说浏览器还是会读取 max-age 作为缓存的到期时间。如果在代理服务器中如果同时设置了 max-age 和 s-maxage;他会读取 s-maxage,因为这个 s-maxage 配置项是专门为代理服务器设置的。

const http = require('http')const fs = require('fs')const wait = (second) => {  return new Promise((resolve, reject) => {    setTimeout(() => {      resolve()    }, second * 1000)  })}http.createServer(function(req, res) {  if (req.url === '/') {    const html = fs.readFileSync('test.html', 'utf-8')    res.writeHead(200, {      'Content-Type': 'text/html'    })    res.end(html)  }  if (req.url === '/data') {    res.writeHead(200, {      'Cache-Control': 'max-age=2; s-maxage=20; private'    })    wait(2).then(() => res.end('success'))  }}).listen(8888)

#代理服务器 private 的配置

private:http 请求返回的过程中设置 Cache-Control 为 private,代表发起请求的浏览器可以进行缓存。实际操作中可以会体会到5秒以后,重新进行请求,还是等待两秒显示 success;

const http = require('http')const fs = require('fs')const wait = (second) => {  return new Promise((resolve, reject) => {    setTimeout(() => {      resolve()    }, second * 1000)  })}http.createServer(function(req, res) {  if (req.url === '/') {    const html = fs.readFileSync('test.html', 'utf-8')    res.writeHead(200, {      'Content-Type': 'text/html'    })    res.end(html)  }  if (req.url === '/data') {    res.writeHead(200, {      'Cache-Control': 'max-age=5; s-maxage=20; private'    })    wait(2).then(() => res.end('success'))  }}).listen(8888)

#代理服务器 vary 的配置

vary 是判断如果是一样的头信息,就进行返回缓存的结果。 使用场景:我们使用了服务器端缓存,我们通过 User-Agent 进行返回缓存的数据;如果头信息相同就进行返回缓存结果。或者 Content-language 根据不同的语言返回缓存结果。 下面例子中,如果之前加载过 X-Test-Cache : 1,下次加载的时候会直接读取缓存。 我们就可以限制不仅 url 相同,如果头信息相同才会进行缓存。如果指定的头信息不一样,不使用缓存。

const http = require('http')const fs = require('fs')const wait = (second) => {  return new Promise((resolve, reject) => {    setTimeout(() => {      resolve()    }, second * 1000)  })}http.createServer(function(req, res) {  if (req.url === '/') {    const html = fs.readFileSync('test.html', 'utf-8')    res.writeHead(200, {      'Content-Type': 'text/html'    })    res.end(html)  }  if (req.url === '/data') {    res.writeHead(200, {      'Cache-Control': 's-maxage=20',      'Vary': 'X-Test-Cache' // 发送请求的时候只有指定的 X-Test-Cache 是相同的情况下,才会使用缓存    })    wait(2).then(() => res.end('success'))  }}).listen(8888)
  Document
this is content click me
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue代理服务器proxy配置_前端——你需要知道的nginx相关配置 的相关文章

随机推荐