1. 首页
  2. Nginx私房菜

nginx入门学习

nginx概念

nginx是一个高性能的http和反向代理的web服务器。

直接说概念好像有点枯燥,先学会使用吧。

nginx 安装

window安装

进入官网,找到window版本,下一步下一步就完成了。

注意: nginx默认使用的是80端口,如果本地有80端口被占用,可修改nginx配置文件(后面会讲到)

linux安装

本文主要讲的是linux下nginx的安装,毕竟生产环境下,linux服务器占了大多数。

linux下nginx的安装步骤:

详细见安装步骤:

如何让nginx成为全局命令呢?

通过上面安装,还无法全局使用nginx,和window一样的思路,需要在全局环境变量配置。

  1. 打开环境变量所在文件: vim /etc/profile
  2. 在文件末尾,加上一行 PATH:$PATH:/usr/local/nginx/sbin/ 也就是nginx安装目录下的sbin目录(为命令行目录)
  3. 重新加载环境
    source profile

经过上面的配置,已经可以全局使用nginx这个命令了。

下面说一下nginx常见的命令:

  • nignx: 运行nginx
  • ps -ef | grep nginx: 查看nginx的运行进程
  • nginx -t: 当我们每次修改完nginx配置时,需要判断修改是否有误。如果使用此命令,提示success则表示成功,否则修改有误。
  • nginx -s reload: 重启nginx

nginx常见配置

nginx基本配置

配置文件是在conf目录下的nginx.conf文件。(本文的目录为/usr/local/nginx/conf),注意是在nginx下的安装目录下寻找。window也相同。

这是默认的nginx配置文件(一一进行讲解)

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区,你想要的,在这里都能找到


# 运行用户,本文是nobody,可以不设置。nginx中#代表注释 #user nobody; # nginx进程,默认和cpu核心数相同 worker_processes 1; # 错误日志存放目录 #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #进程pid存放位置 #pid logs/nginx.pid; events { # 单个后台进程的最大并发数 worker_connections 1024; } http { # include:导入某个文件,这儿表示导入当前目录的mime.types(这个文件是后缀名与类型的映射表) include mime.types; # 默认文件类型 default_type application/octet-stream; # 设置日志模式 #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #nginx访问日志默认存放位置 #access_log logs/access.log main; # 是否开启高效传输模式 on:开启 off:关闭 sendfile on; # 减少网络报文段的内容 #tcp_nopush on; # 保持连接的时间,也叫超时时间 #keepalive_timeout 0; keepalive_timeout 65; # 是否开启gzip #gzip on; # 配置服务(这儿才是重中之重) server { # 端口 listen 80; # 域名 server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { # 默认使用的目录(这儿使用的当前安装目录下的html目录) root html; # 默认指向这个目录下的哪个文件 index index.html index.htm; } # 配置404页面 #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # 配置错误页面 error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} } include /usr/local/nginx/conf/config_nginx_lijiayi/*.conf; # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # #server { # listen 443 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # } #} } //JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

上面主要讲解了一些nginx的基础配置,其实很多我们了解即可。我们一般的配置都是在server上配置。

nginx访问权限配置

比如我们的后台管理系统,只允许内网的访问,不对外公开,就需要配置权限


location /{ allow xx.xx.xx.xx; deny all; } //JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

但是需要注意指令的优先级

比如上面的配置,如果讲deny放在allow前面会怎么样?
会禁止所有ip访问。先起作用的配置会覆盖后面的配置。

nginx做静态资源文件服务器

首先说一下,什么是静态资源文件服务器?

说白了就是只有前端的资源文件,如果js css img等。只需要服务器向本机某个目录读取并返回给客户端。(其实类似于express框架中,express实例.use(express.static(path.join(__dirname, ‘目录名称’))),笔者也实现了一个类似的功能,见node构建静态文件服务器)

实际操作:(注: 以下操作均在linux下操作)

创建一个静态资源文件目录test,比如test目录下有两个子目录blob data(这两个各有一个html文件),并且有static目录(放img等资源)。

上面的文件目录为:


- test - blob - index.html - data - data.html - static - 2.jpg //JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

我们想通过域名+’/frontEnd/’的方式读取到test这个静态服务目录。

nginx的配置规则如下:


location /frontEnd/ { alias /test/; index index.html; autoindex on; } //JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

并重启nginx,nginx -s reload, 访问域名+/frontEnd/即可成功访问。此时我们就用nginx配置了一个静态资源文件服务。

其实上面用到了alias autoindex等基本配置没讲到的地方。甚至我们衍生出nginx的location路径匹配规则。这些我们会在后面的nginx常见语法中讲到。这里只需要了解即可。

nginx解决跨域

跨域在前端非常常见,就是非同源之间的访问。

如何解决跨域呢?

这里主要使用nginx来进行跨域处理。

比如本地有个node服务(localhost:8080),请求/data会返回一个json数据。


curl http://localhost:8080/data 返回 { a: 1, b: 2, c: 3 } //JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

在本地的其他端口上面有个静态页面,使用ajax请求http://localhost:8080/data,浏览器会报跨域的错误。

使用nginx进行配置


location ^~ /api/ { rewrite ^/api/(.*)$ /$1 break; proxy_pass http://localhost:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_connect_timeout 5; } //JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

前端代码如下:


$.ajax({ type: 'get', url: '/api/data', success: function(res){ console.log(res) } }) //JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

上面代码慢慢来解释一下:

前端代码:

ajax访问的地址为: http://localhost/api/data

nginx配置:

这里就有个匹配规则(^~ /api/),^~ 又代表什么? 后面都会解释到

这里可以先大概的认为: 当访问开头path为api的时候,对应下面的具体匹配规则:

rewrite ^/api/(.*)$ /$1 break; // 意思是将前面的正则表达式进行替换,重写了url。这里的$1和js正则里的概念是相同的,匹配到第一个()的表达式。

所以这里最终将: http://localhost/api/data重写为http://localhost/data

roxy_pass http://localhost:8080/;// 代理的意思,将上面的url代理到http://localhost:8080/,也就是将http://localhost替换为http://localhost:8080/,所以整体的地址为: http://localhost:8080/data。从而完成了跨域的处理。

有个问题:配制成proxy_pass http://localhost:8080; 会有影响吗?(少了/)

后面的那几个配置属性:

解决代理引起的ip host问题。

因为: 如果默认不配置这几项属性,我们真正的后端服务器(localhost:8080)获取到的ip host都是我们中间服务器的(这里指的是nginx服务器)。如果我们需要对违规用户进行ip封号,因为无法获取客户端的ip。为了解决此类问题,使用了上面的配置。

如果不了解上面的小知识点,可搜索http X-Forwarded-For相关头。

nginx反向代理负载均衡

这块功还没有通过代码测试。所以主要讲一下相关概念和简单的配置。

什么是反向代理负载均衡呢?举例

反向代理: 我们访问百度(www.baidu.com), 我们知道百度可能会有上百台服务器在运行支持百度的服务。因为一台服务器无法支撑庞大的访问量。 那么我们访问www.baidu.com其实就是访问到了中间服务器,中间服务器再经过一系列转发等操作,转发到真正为我们提供服务的后端服务器(也就是集群)。

这里说的中间服务器就是nginx服务器。

伪nginx配置文件:


http { upstream baiduNginx { server www.xxx.com; server www.yyy.com; ... } server { listen 80; server_name www.baidu.com; location / { proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Scheme $scheme; proxy_pass baiduNginx; } } } //JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

上面的伪代理就是反向代理负载均衡的核心配置。

在具体的负载均衡配置中,还可配置多种策略。这里就不展开讲了。

nginx常见语法

nginx其实有很多的语法配置 公共常量等等。

这里主要讲解一下一些常见的语法。

上面我们其实已经积累了很多问题:

  1. nginx location的匹配规则
  2. root 和 alias的区别
  3. ^~ 是个啥?

其中我们会将第4个问题集中到第一个问题里讲解。

nginx location的匹配规则:

location的匹配方式有两种:

  1. 前缀匹配:从前面匹配,要求是前面是一样的。(比如/a, /b /ac/, /d/都属于前缀匹配)
  2. 正则匹配: 匹配正则表达式(包含~ !~ ~*等字符就认为它是正则匹配)

location的匹配规则: 首先前缀匹配,然后再进行正则匹配

有两种特殊的前缀匹配:

  • \= 代表是精确匹配,要求url和location的匹配要完全一样。如果是精确匹配,停止后面的所有匹配
  • ^~ 若最长的前缀匹配包含了这个字符,停止后面所有匹配

正则匹配:

  • ~ 区分大小写的正则匹配
  • ~* 不区分大小写的正则匹配
  • !~ 区分大小写的不匹配正则
  • !~* 不区分大小写的不匹配正则

举例:


location = / { [ configuration A ] } location / { [ configuration B ] } location /documents/ { [ configuration C ] } location ^~ /images/ { [ configuration D ] } location ~* \.(gif|jpg|jpeg)$ { [ configuration E ] } //JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

1.访问地址为: /

先进行前缀匹配(按照书写规则),根据规则,会进行A B C D前缀匹配规则,然后再进行正则匹配。但是匹配到A时,是精确匹配,则停止后续匹配。

2.访问地址为: /index.html

先进行前缀匹配,发现只有B符合,且B为最长前缀匹配。

然后进行正则匹配,都没匹配上,选择之前的最长前缀匹配B

3.访问地址为: /documents/document.html

先进行前缀匹配, B C都符合,且 C为最长前缀匹配

然后进行正则匹配,都没匹配上,选择之前的最长前缀匹配C

4.访问地址为: /images/1.gif

先进行前缀匹配, B D都符合,且 D为特殊前缀匹配,则停止后续正则匹配。当前的规则使用 D

5.访问地址为: /documents/1.jpg

先进行前缀匹配,B C都符合,最长前缀匹配为C。

再进行正则匹配,匹配到E , 并丢弃之间的最长前缀匹配。 当前的规则使用E

root 和 alias的区别


location /a/ { root /test/; index index.html; } //JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

访问http://xxx.com/a/index.html

真正寻找的资源是在 /test/a/index.html

root处理: root 路径 + location 路径


location /a/ { alias /test/; index index.html; } //JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

访问http://xxx.com/a/index.html

真正寻找的资源是在 /test/index.html

alias 的处理:使用 alias 路径替换 location 路径, alias后面必须以/结束

这里多注意一下,多写两边试试效果

作者:陈_青
链接:https://juejin.im/post/6844903919353610253

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:nginx入门学习

链接:https://www.javascriptc.com/4185.html

« 尝鲜Vue3之一:浏览器中如何断点调试Vue3 源码
尝鲜Vue3之六:响应式原理的革新 – Vue2、Vue3实现对比»
Flutter 中文教程资源

相关推荐

QR code