乐趣区

关于nginx:前端应该掌握的nginx知识

前言

为什么要懂 nginx?

  • 首先,进步本人的服务器部署能力
  • 其次,有助于了解后端接口链路

ngix 能干什么?

  1. 解决跨域问题
  2. 负载平衡
  3. 动态服务器
  4. 多 / 单页面网站
  5. gzip

注释

装置 & 常见命令 & nginx 配置文件构造

装置(以 ubuntu 为例):

$ sudo apt-get install nginx

更多请查看:装置 NGINX

查看版本:

$ sudo nginx -v
# 呈现版本信息示意装置胜利
nginx version: nginx/1.6.2

常见命令

启动服务:

$ nginx

其余命令:

$ nginx -s <SIGNAL>

SIGNAL:

  • quit – 失常敞开服务
  • reload – 从新加载配置文件运行
  • reopen – 关上日志文件
  • stop – 立即敞开服务

配置文件

文件构造

nginx 的主配置文件是 nginx.conf。能够在主配置文件中去 include 其余地位的配置文件。
通过上述形式装置的来看:

  • 默认配置文件门路/etc/nginx/nginx.conf
  • 这个文件里可能会有援用,比方 include /etc/nginx/conf.d/*.conf; 那么实际上你的我的项目配置文件就是在 /etc/nginx/conf.d/ 这个文件夹下的所有.conf 文件;
  • 个别一个我的项目(域名)配一个文件,比方你的域名是 www.baidu.com,那么你的配置文件就能够叫/etc/nginx/conf.d/www.baidu.com.conf
配置阐明


main:nginx 的全局配置,对全局失效。
events: 配置影响 nginx 服务器或与用户的网络连接。
http:能够嵌套多个 server,配置代理,缓存,日志定义等绝大多数性能和第三方模块的配置。
server:配置虚拟主机的相干参数,一个 http 中能够有多个 server。
location:配置申请的路由,以及各种页面的解决状况。
upstream:配置后端服务器具体地址,负载平衡配置不可或缺的局部。

解决跨域

Http 负载平衡

负载平衡策略:待补充
配置 upstream:

upstream balanceServer {
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
    server 10.1.22.35:12345;
}

配置 server:

 server {
        server_name  fe.server.com;
        listen 80;
        location /api {proxy_pass http://balanceServer;}
    }

动态服务器

/data/static/ 提供目录浏览:

server{
  listen 80 default_server; 
  server_name www.example.com;

  location ^~ /static {
    root /data/static/; # 设置拜访服务器下的文件目录
    autoindex on; # 开启目录浏览
    access_log  off; # 敞开拜访日志
    charset utf-8,gbk;     #避免中文目录呈现乱码
    expires     10h;# 设置过期工夫为 10 小时
  }       
}

查看更多:[nginx 开启目录浏览性能及主题丑化
](https://ld246.com/article/156…)

单页面网站

 server {
        server_name  fe.server.com;
        listen 80;
        location / {
            root /data/www;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    }
  • root
  • index
  • try_files

多页面网站

 server {
        server_name  fe.server.com;
        listen 80;
        location /app { }
        location /pc { }
        location /api { }
        location / {
            root /data/www;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    }

Gzip

应用 Gzip 实现 HTTP 压缩,能改良传输速度和带宽利用率。

    gzip                    on; 
    gzip_http_version       1.1;        
    gzip_comp_level         5;
    gzip_min_length         1000;
    gzip_types text/csv text/xml text/css text/plain text/javascript application/javascript application/x-javascript application/json application/xml;
  • gzip: 决定是否开启 gzip 模块,on 示意开启,off 示意敞开;
  • gzip_http_version: 辨认 http 协定的版本, 早起浏览器可能不反对 gzip 自解压, 用户会看到乱码
  • gzip_comp_level: 设置 gzip 压缩等级,等级越底压缩速度越快文件压缩比越小,反之速度越慢文件压缩比越大;等级 1 -9,最小的压缩最快 然而耗费 cpu
  • gzip_min_length: 设置容许压缩的页面最小字节(从 header 头的 Content-Length 中获取),当返回内容大于此值时才会应用 gzip 进行压缩, 以 K 为单位, 当值为 0 时,所有页面都进行压缩。倡议大于 1k
  • gzip_types: 设置须要压缩的 MIME 类型, 非设置值不进行压缩,即匹配压缩类型

部署 https

https://cloud.tencent.com/doc…
https 在 443 端口
须要 1.ssl_certificate:crt 证书文件;2.ssl_certificate_key:key 私钥文件。放在 nginx 文件夹下
在 conf.d 文件夹下新建一个 ssl.conf 文件

# 以部署 cloud.tencent.com 为例子
# 证书:1_cloud.tencent.com_bundle.crt
# 私钥:2_cloud.tencent.com.key
server {
        #SSL 拜访端口号为 443
        listen 443 ssl; 
        #填写绑定证书的域名
        server_name cloud.tencent.com; 
        #证书文件名称
        ssl_certificate 1_cloud.tencent.com_bundle.crt; 
        #私钥文件名称
        ssl_certificate_key 2_cloud.tencent.com.key; 
        ssl_session_timeout 5m;
        
        #请依照以下协定配置
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
        #请依照以下套件配置,配置加密套件,写法遵循 openssl 规范。ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; 
        ssl_prefer_server_ciphers on;
        
        location / {
           #网站主页门路。此门路仅供参考,具体请您依照理论目录操作。#例如,您的网站运行目录在 /etc/www 下,则填写 /etc/www。root html; 
            # 此处不必批改
            index  index.html index.htm;
        }
    }

http 重定向到 https

http 在 80 端口
http:// cloud.tencent.com -> https:cloud.tencent.com
server {

listen 80;
#填写绑定证书的域名
server_name cloud.tencent.com; 
#把 http 的域名申请转成 https
return 301 https://$host$request_uri; 

}

  1. nginx 内置变量
    $host:
    $request_uri: 残缺 url 中刨去最后面 $host 剩下的局部
  2. 301 跳转

参考文章

  • 前端工程化 / 前端开发者必备的 nginx 常识
退出移动版