小知识:前端必备Nginx配置详解

Nginx (engine x) 是一个轻量级高性能的HTTP和反向代理服务器,同时也是一个通用 代理服务器 (TCP/UDP/IMAP/POP3/SMTP),最初由俄罗斯人Igor Sysoev编写。

基本命令

nginx -t             检查配置文件是否有语法错误

nginx -s reload       热加载,重新加载配置文件

nginx -s stop         快速关闭

nginx -s quit         等待工作进程处理完成后关闭

搭建好nginx服务器并启动过后,我们先看nginx默认配置,再逐个介绍不同使用场景。

默认配置

Nginx 安装目录下, 我们复制一份`nginx.conf`成`nginx.conf.default`作为配置文件备份,然后修改`nginx.conf`

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
# 工作进程的数量
worker_processes 1;
events {
worker_connections 1024; # 每个工作进程连接数
}
http {
include    mime.types;
default_type application/octet-stream;
# 日志格式
log_format access $remote_addr – $remote_user [$time_local] $host “$request”
$status $body_bytes_sent “$http_referer”
“$http_user_agent” “$http_x_forwarded_for” “$clientip”;
access_log /srv/log/nginx/access.log access; # 日志输出目录
gzip on;
sendfile on;
# 链接超时时间,自动断开
keepalive_timeout 60;
# 虚拟主机
server {
listen    8080;
server_name localhost; # 浏览器访问域名
charset utf-8;
access_log logs/localhost.access.log access;
# 路由
location / {
root  www; # 访问根目录
index index.html index.htm; # 入口文件
}
}
# 引入其他的配置文件
include servers/*;
}

搭建站点

在其他配置文件`servers`目录下,添加新建站点配置文件 xx.conf。

电脑 hosts 文件添加  127.0.0.1   xx_domian# 虚拟主机

?
1
2
3
4
5
6
7
8
9
10
11
12
13
server {
listen    8080;
server_name xx_domian; # 浏览器访问域名
charset utf-8;
access_log logs/xx_domian.access.log access;
# 路由
location / {
root  www; # 访问根目录
index index.html index.htm; # 入口文件
}
}

执行命令 nginx -s reload,成功后浏览器访问  xx_domian 就能看到你的页面

根据文件类型设置过期时间

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
location ~.*\.css$ {
expires 1d;
break;
}
location ~.*\.js$ {
expires 1d;
break;
}
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
access_log off;
expires 15d;  #保存15天
break;
}
# curl -x127.0.0.1:80 http://www.test.com/static/image/common/logo.png -I #测试图片的max-age

禁止文件缓存

开发环境经常改动代码,由于浏览器缓存需要强制刷新才能看到效果。这是我们可以禁止浏览器缓存提高效率

?
1
2
3
location ~* \.(js|css|png|jpg|gif)$ {
add_header Cache-Control no-store;
}

防盗链

可以防止文件被其他网站调用

?
1
2
3
4
5
6
7
location ~* \.(gif|jpg|png)$ {
# 只允许 192.168.0.1 请求资源
valid_referers none blocked 192.168.0.1;
if ($invalid_referer) {
rewrite ^/ http://$host/logo.png;
}
}

静态文件压缩

?
1
2
3
4
5
6
7
8
9
10
11
12
server {
# 开启gzip 压缩
gzip on;
# 设置gzip所需的http协议最低版本 (HTTP/1.1, HTTP/1.0)
gzip_http_version 1.1;
# 设置压缩级别,压缩级别越高压缩时间越长 (1-9)
gzip_comp_level 4;
# 设置压缩的最小字节数, 页面Content-Length获取
gzip_min_length 1000;
# 设置压缩文件的类型 (text/html)
gzip_types text/plain application/javascript text/css;
}

执行命令 nginx -s reload,成功后浏览器访问

指定定错误页面

?
1
2
3
4
5
# 根据状态码,返回对于的错误页面
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /source/error_page;
}

执行命令 nginx -s reload,成功后浏览器访问

跨域问题

跨域的定义

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。通常不允许不同源间的读操作。

同源的定义

如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源。nginx解决跨域的原理

例如:

前端server域名为:http://xx_domain 后端server域名为:https://github.com

现在http://xx_domain对https://github.com发起请求一定会出现跨域。

不过只需要启动一个nginx服务器,将server_name设置为xx_domain,然后设置相应的location以拦截前端需要跨域的请求,最后将请求代理回github.com。如下面的配置:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
## 配置反向代理的参数
server {
listen  8080;
server_name xx_domain
## 1. 用户访问 http://xx_domain,则反向代理到 https://github.com
location / {
proxy_pass https://github.com;
proxy_redirect   off;
proxy_set_header  Host       $host;    # 传递域名
proxy_set_header  X-Real-IP    $remote_addr; # 传递ip
proxy_set_header  X-Scheme     $scheme;   # 传递协议
proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
}
}

这样可以完美绕过浏览器的同源策略:github.com访问nginx的github.com属于同源访问,而nginx对服务端转发的请求不会触发浏览器的同源策略。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://juejin.im/post/5d7e49c8f265da03ce3a0884

声明: 猿站网有关资源均来自网络搜集与网友提供,任何涉及商业盈利目的的均不得使用,否则产生的一切后果将由您自己承担! 本平台资源仅供个人学习交流、测试使用 所有内容请在下载后24小时内删除,制止非法恶意传播,不对任何下载或转载者造成的危害负任何法律责任!也请大家支持、购置正版! 。本站一律禁止以任何方式发布或转载任何违法的相关信息访客发现请向站长举报,会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。本网站的资源部分来源于网络,如有侵权烦请发送邮件至:2697268773@qq.com进行处理。
建站知识

小知识:Nginx使用反向代理实现负载均衡过程解析

2023-4-4 1:13:54

建站知识

小知识:关于nginx没有跳转到upstream地址的解决

2023-4-4 1:32:22

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索