【干货】前端Nginx统一配置
一、缓存策略
项目入口文件index.html 不缓存，其他静态资源js、css、font、img等走缓存策略，具体配置如下：
location /yourpath { # 换成自己的项目路径
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Headers access-control-allow-headers,content-type,access-control-allow-methods,access-control-allow-origin,x-requested-``with``,source,CASTGC,Host,Origin,Referer,Authorization,Cache-Control,If-Modified-Since,User-Agent,Keep-Alive,X-Mx-ReqToken;
add_header Vary Origin; # 解决微前端跨域请求静态资源失败的问题
try_files $uri $uri/ /yourpath/index.html; # 换成自己的项目路径
alias /data/apps/yourpath/; # 换成自己的项目路径
index index.html;
# html 入口文件不缓存
if ($request_filename ~* .*\.(?:htm|html)$)
{
add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
}
# css、js缓存
if ($request_filename ~* .*\.(?:js|css)$)
{
expires 7d;
}
# 缓存图片、字体
if ($request_filename ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|woff2|ttf)$)
{
expires 7d;
}
}
二、开启gzip压缩
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/css text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";
三、运行和控制Nginx
// 启动
nginx
// 重新打开日志文件
nginx -s reopen
// 重新载入配置文件
nginx -s reload
// 停止
nginx -s stop
// 查找ng配置文件 /usr/local/etc/nginx
nginx -t
// 从容停止
// (1) 查看进程号
ps -ef|grep nginx
// (2) 杀死进程
kill -QUIT <进程号> 或 kill -TERM <进程号>
// 强制停止
pkill -9 nginx
四、Nginx作为Web服务器
Nginx作为Web服务器, 需要定义server虚拟主机，让这些虚拟主机去处理对于特定域名或IP地址的请求。
每个server虚拟主机都定义了 location 指令，location 定义了对于指定的一组 URI 是如何匹配和进行处理的。
1.web服务器基本实例
server {
listen 80;
server_name one.sample.com;
location / {
root /usr/local/www;
index index.html;
}
}
# 参数说明
# server 代表1个虚拟主机，可以有多个
# server_name 匹配请求的指定域名或IP地址
# location 配置请求的路由，匹配对应的URI
# root 查找资源的路径(文件夹目录)
# index 默认查找
2.location匹配规则（请求过滤）
(1) 语法
server {
location 表达式 {
# 配置跨域、重定向、缓存测略等
}
}
(2) location表达式的类型
@它定义一个命名的location，使用在内部定向时，例如 error_page,try_files
/通用匹配，任何请求都会匹配到
=开头, 表示精确匹配, 只有请求的url路径与=后面的字符串完全相等才会匹配到（优先级最高）
^~ 表示普通字符匹配。使用前缀匹配。如果匹配成功，则不再匹配其他location
~开头表示区分大小写的正则匹配
~*开头表示不区分大小写的正则匹配
(3) location表达式的优先级
= 的优先级最高。一旦匹配成功，则不再查找其他匹配项。
^~ 类型表达式。一旦匹配成功，则不再查找其他匹配项。
~ 和 ~* 的优先级次之。如果有多个location的正则能匹配的话，则使用正则表达式最长的那个。
常规字符串匹配类型。按前缀匹配。
3.URL重写
URL重写是指: 当请求的URL满足事先定义好的规则时, 将跳转/定向到某个规则，比如常见的伪静态、301重定向、浏览器定向等。
(1) 语法
server {
rewrite 规则 定向路径 重写类型;
}
rewrite参数说明:
规则：字符串或者正则来表示想匹配的目标url
定向路径：匹配到规则后要定向的路径，如果规则里有正则，则可以使用$index来表示正则里的捕获分组
重写类型：
last：表示完成rewrite，浏览器地址栏URL地址不变
break；本条规则匹配完成后，终止匹配，不再匹配后面的规则，浏览器地址栏URL地址不变
redirect：返回302临时重定向，浏览器地址会显示跳转后的URL地址
permanent：返回301永久重定向，浏览器地址栏会显示跳转后的URL地址
(2) 示例
server {
listen 80;
server_name www.aaa.com;
location / {
rewrite ^/$ www.bbb.com permanent;
}
}
4.try_files
try_files是指: 按顺序检查文件是否存在，返回第一个找到的文件。如果所有的文件都找不到，会进行一个内部重定向到最后一个参数.
(1)跳转到文件
当访问:http://one.sample.com/test时会依次查找，若 1.html，2.html 都不存在，最终返回 3.html
server {
listen 80;
server_name one.sample.com;
root www;
index index.html;
location /test {
try_files /1.html /2.html /3.html;
}
}
(2)跳转到变量
当访问:http://one.sample.com/test时会依次查找，若 1.html，2.html 都不存在，则跳转到命名为abc的location
server {
listen 80;
server_name one.sample.com;
root html;
index index.html;
location /test {
try_files /1.html /2.html @abc;
}
location @abc{
rewrite ^/(.*)$ http://one.sample.com;
}
}
(3)vue-router设置HTML5 History 模式时, nginx的配置如下:
location / {
# URL 匹配不到任何静态资源，返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
try_files uri/ /index.html;
}
5.Gzip配置
server {
# 开启gzip 压缩(动态压缩，消耗cpu资源）
gzip on;
# 静态压缩（优先级高于动态压缩，返回预先压缩好的.gz文件)
gzip_static on;
# 设置用于处理请求压缩的缓冲区数量和大小。比如32 4K表示按照内存页（one memory page）大小以4K为单位（即一个系统中内存页为4K），申请32倍的内存空间。
gzip_buffers 32 4k;
# 设置gzip所需的http协议最低版本 （HTTP/1.1, HTTP/1.0）
gzip_http_version 1.1;
# 设置压缩级别（1-9）, 值越大压缩率越高，同时消耗cpu资源也越多
gzip_comp_level 2;
# 设置压缩的最小字节数， 页面Content-Length获取
gzip_min_length 1000;
# 设置压缩文件的类型 （text/html), 不建议压缩图片(如jpg、png本身已压缩)
gzip_types text/plain application/javascript application/css text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
#配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip_disable "MSIE [1-6]\.";
}
6. https配置
http {
server {
listen 443 ssl http2;
server_name localhost-uat.longfor.com;
# 配置ssl证书
ssl_certificate server.crt;
ssl_certificate_key server.key.unsecure;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
# location / {
# # root html;
# root /Users/admin/Workspace/test/dist;
# index index.html index.htm;
# }
# 转发到http
location / {
proxy_pass http://localhost-uat.sample.com;
}
}
}
- 测试环境配置Nginx支持Https
# 0. 创建私钥和证书存放目录
mkdir -p /usr/local/nginx/ssl/private
cd /usr/local/nginx/ssl/private
# 1. 创建服务器私钥
# 会提示输入两次密码(Enter pass phrase for server.key)，
# 两次密码保持一致，后面还会用到
openssl genrsa -des3 -out server.key 1024
# 2. 用于向第三方SSL证书颁发机构的请求文件CSR
# 提示输入私钥的密码后，会提示输入地域和邮箱，本着能偷懒就偷懒的原则，
# 直接留空回车，注意提示Common Name的时候输入自己的域名, 如localhost-uat.sample.com
openssl req -new -key server.key -out server.csr
# 3. 生成自签名的证书CRT
# 会提示输入私钥密码
openssl x509 -req -in server.csr -out server.crt -signkey server.key -days 3650
# 4. 剥离密码（避免重启Nginx的时候需要输入密码，提示Enter PEM pass phrase）
# 会提示输入私钥密码
openssl rsa -in server.key -out server.key.unsecure
# 5. 配置nginx
# 在nginx 配置文件server块listen 80; 后一行新增如下指令
listen 443 ssl;
ssl_certificate /usr/local/nginx/ssl/private/server.crt;
ssl_certificate_key /usr/local/nginx/ssl/private/server.key.unsecure;
# 6. 重启Nginx
nginx -t && nginx -s reload
# 7. 测试
# 打开 https://localhost-uat.sample.com
# chrome 浏览器提示 您目前无法访问localhost-uat.sample.com，因为此网站发送了Chrome无法处理的杂乱凭据
# 在chrome该页面上，直接键盘敲入这11个字符：thisisunsafe
# 鼠标点击当前页面任意位置，让页面处于最上层即可输入,输入时是不显示任何字符的，直接输入即可！
四、Nginx作为反向代理服务器
当访问http://one.sample.com/test时, nginx会将请求转发到http://localhost:3000上。
server {
listen 80;
server_name one.sample.com;
root html;
index index.html;
location /test {
# 请求host
proxy_set_header Host $http_host;
# 请求ip
proxy_set_header X-Real-IP $remote_addr;
# 请求协议
proxy_set_header X-Scheme $scheme;
# 代理服务器
proxy_pass http://localhost:3000;
}
}
五、Nginx作为负载均衡
1.负载均衡的介绍
在服务器集群中，Nginx起到一个代理服务器的角色（即反向代理），为了避免单独一个服务器压力过大，将来自用户的请求转发给不同的服务器。
负载均衡用于从 "upstream" 模块定义的后端服务器列表中选取一台服务器接受用户的请求。
2.负载均衡的基本实例
(1) upstream模块
一个最基本的upstream模块如下:
#动态服务器组, server是后端服务器，my_server是自定义的服务器组名称。
upstream my_server {
server localhost:8001;
server localhost:8002;
server localhost:8003;
}
(2) 反向代理
在upstream模块配置完成后，要让指定的访问反向代理到服务器组。
server {
listen 80;
server_name www.example.com;
root html;
index index.html;
location / {
# 反向代理到定义好的服务器组my_server
proxy_pass http://my_server;
}
}
(3) 完整配置
http {
upstream my_server {
server localhost:8001;
server localhost:8002;
server localhost:8003;
}
server {
listen 80;
server_name netdisk.longfor.com;
root html;
index index.html;
location / {
# 反向代理到定义好的服务器组my_server
proxy_pass http://my_server;
}
}
}
3. 负载均衡策略
(1) 轮询(默认方式)
表示每个请求按时间顺序逐一分配到不同的后端服务器。
upstream my_server {
server localhost:8001;
server localhost:8002;
}
(2) weight(权重方式)
表示在轮询策略的基础上指定轮询的服务器的权重，默认为1，权重越高分配到需要处理的请求越多。
upstream my_server {
server localhost:8001 weight=1;
server localhost:8002 weight=2;
}
(3) ip_hash
表示指定负载均衡器按照基于客户端IP的分配方式，这个方法确保了相同的客户端的请求一直发送到相同的服务器，以保证session会话。这样每个访客都固定访问一个后端服务器，可以解决session不能跨服务器的问题。
upstream my_server {
ip_hash;
server localhost:8001;
server localhost:8002;
}
备注:
在nginx版本1.3.1之前，不能在ip_hash中使用权重（weight）。
ip_hash不能与backup同时使用。
此策略适合有状态服务，比如session。
当有服务器需要剔除，必须手动down掉。
(4) least_conn
表示把请求转发给连接数较少的后端服务器。轮询算法是把请求平均的转发给各个后端，使它们的负载大致相同；但是，有些请求占用的时间很长，会导致其所在的后端负载较高。这种情况下，least_conn这种方式就可以达到更好的负载均衡效果。
upstream my_server {
least_conn;
server localhost:8001;
server localhost:8002;
}
(5) down
表示当前的server暂时不参与负载均衡。
upstream my_server {
server localhost:8001 down;
server localhost:8002;
server localhost:8003;
}
(6) backup
表示预留的备份机器。当其他所有的非backup机器出现故障或者忙的时候，才会请求backup机器，因 此这台机器的压力最轻。
upstream my_server {
server localhost:8001 backup;
server localhost:8002;
server localhost:8003;
}
