前端想要了解的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路径与后面的字符串完全相等时,才会命中(优先级最高)。


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


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


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


相关文章
|
6月前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
616 0
|
6月前
|
移动开发 前端开发 JavaScript
前端vue2、vue3去掉url路由“ # ”号——nginx配置(一)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
510 0
|
1月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
355 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
1月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
155 0
|
6月前
|
前端开发 JavaScript 应用服务中间件
前端vue2、vue3去掉url路由“ # ”号——nginx配置(二)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
337 0
|
3月前
|
负载均衡 前端开发 应用服务中间件
使用Nginx配置SSL以及部署前端项目
本文介绍了如何使用Nginx配置SSL证书以启用HTTPS,并展示了如何通过Nginx部署前端项目,包括配置SSL证书、设置代理和负载均衡的示例。
117 2
|
3月前
|
JSON 前端开发 应用服务中间件
韬光敛彩:用 nginx + express 无痛实现前端项目本地 mock
韬光敛彩:用 nginx + express 无痛实现前端项目本地 mock
|
3月前
|
缓存 负载均衡 前端开发
前端必会的nginx知识点
【8月更文挑战第22天】前端必会的nginx知识点
84 0
|
4月前
|
前端开发 应用服务中间件 nginx
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
|
4月前
|
开发框架 前端开发 应用服务中间件
部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用
部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用
下一篇
无影云桌面