前端想要了解的Nginx(上)

简介: Nginx 是一个高性能的HTTP和反向代理服务器,同时也是一个 IMAP/POP3/SMTP 代理服务器。常见场景:静态资源服务器动态匹配反向代理Gzip 压缩负载均衡

先来看下默认的Nginx配置,我将以此为基础依次介绍Nginx的用法


Nginx 安装目录下的nginx.conf就是Nginx全局的配置文件,我们主要修改这里的内容。nginx.conf.default作为配置文件的备份。


# 设置工作进程的数量
worker_processes  1;
# 处理连接
events {
    # 设置连接数
    worker_connections  1024;
}
http {
    # 文件拓展名查找集合
    include       mime.types;
    # 当查找不到对应类型的时候默认值
    default_type  application/octet-stream;
    # 日志格式,定义别名为 main
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
    # 指定日志输入目录
    #access_log  logs/access.log  main;
    # 调用 sendfile 系统传输文件
    sendfile        on;
    #tcp_nopush     on;
    # 客户端与服务器连接超时时间,超时自动断开
    #keepalive_timeout  0;
    keepalive_timeout  65;
    # 开启gizip 压缩
    #gzip  on;
    # 虚拟主机
    server {
        listen       8080;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        # 路由
        location / {
                root   html;
                index  index.html index.htm;
            }
    }
    # 引入其他的配置文件
    include servers/*;
}


搭建静态站点


# 虚拟主机server块
server {
    # 端口
    listen   8080;
    # 匹配请求中的host值
    server_name  localhost;
    # 监听请求路径
    location / {
        # 查找目录
        root /source;
        # 默认查找
        index index.html index.htm;
    }
}


这里说明一下相关字段


  • server  配置虚拟主机的相关参数,可以有多个


  • server_name 通过请求中的host值 找到对应的虚拟主机的配置


  • location  配置请求路由,处理相关页面情况


  • root 查找资源的路径


配置完成后执行 nginx -t 看是否有错误,如果看到的是下面这种就是成功了


nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful


然后执行nginx -s reload 更新Nginx配置文件


这时候打开浏览器  输入 localhost:8080  应该就能看到你的页面了


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


nginx -s reload 向主进程发送信号,重新加载配置文件


nginx -s stop 快速关闭


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


动态匹配(请求过滤)


通常在开发环境或者测试环境的时候呢我们修改了代码,因为浏览器缓存,可能不会生效,需要手动清除缓存,才能看到修改后的效果,这里我们做一个配置让浏览器不缓存相关的资源。


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


~* \.(js|css|png|jpg|gif)$ 是匹配以相关文件类型然后单独处理。add_header 是给请求的响应加上一个头信息Cache-Control no-store,告知浏览器禁用缓存,每次都从服务器获取 效果如下:



匹配规则


通常的形式如下


location = / {
    [ configuration A ]
}
location / {
    [ configuration B ]
}
location /documents/ {
    [ configuration C ]
}
location ^~ /images/ {
    [ configuration D ]
}
location ~* \.(gif|jpg|jpeg)$ {
    [ configuration E ]
}


  • = 表示精确匹配。只有请求的url路径与后面的字符串完全相等时,才会命中(优先级最高)。


  • ^~ 表示如果该符号后面的字符是最佳匹配,采用该规则,不再进行后续的查找。


  • ~ 表示该规则是使用正则定义的,区分大小写。


  • ~* 表示该规则是使用正则定义的,不区分大小写。


相关文章
|
8月前
|
缓存 负载均衡 前端开发
写给前端的nginx知识
写给前端的nginx知识
57 1
|
2月前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
272 0
|
2月前
|
移动开发 前端开发 JavaScript
前端vue2、vue3去掉url路由“ # ”号——nginx配置(一)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
121 0
|
2月前
|
负载均衡 前端开发 应用服务中间件
【Linux】Nginx安装使用负载均衡及动静分离(前后端项目部署),前端项目打包
【Linux】Nginx安装使用负载均衡及动静分离(前后端项目部署),前端项目打包
430 0
|
2月前
|
前端开发 JavaScript 应用服务中间件
前端vue2、vue3去掉url路由“ # ”号——nginx配置(二)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
123 0
|
4天前
|
前端开发 应用服务中间件 nginx
nginx前后端分离、多前端部署配置文件
nginx前后端分离、多前端部署配置文件
10 2
|
13天前
|
监控 前端开发 应用服务中间件
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽(2)
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽
32 1
|
13天前
|
负载均衡 前端开发 应用服务中间件
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽(1)
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽
35 1
|
2月前
|
前端开发 应用服务中间件 nginx
前端破圈使用Docker Nginx容器部署项目🏴‍☠️
前端破圈使用Docker Nginx容器部署项目🏴‍☠️
159 0
|
2月前
|
前端开发 应用服务中间件 nginx
Docker 安装 Nginx 部署前端项目
Docker 安装 Nginx 部署前端项目
425 1