1. 首页

前端Nginx点详解，给面试加分项

• 2020年10月24日 07:00 • 未分类 • 阅读 521

nginx简介

1.nginx是一个高性能的Web服务器和反向代理服务器，也可作为电子邮件代理服务器。
2.在连接高并发的情况下，nginx是Apache服务不错的替代品，能够支持高达 50,000 个并发连接数的响应。

正向代理与反向代理

1.反向代理是指以代理服务器来接受Internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回到Internet上请求连接的客户端，此时代理服务器对外表现为一个反向代理服务器。
2.正向代理是指用户无法访问某网站，但是可以访问某代理服务器，而代理服务器可以访问该网站。于是用户通过访问代理服务器去访问该网站，代理服务器把响应信息返回给用户。
3.反向代理中用户访问的IP和端口是nginx服务器的，不知道提供服务的底层服务器，底层服务器在内网中，对外公开的是nginx服务器，nginx充当中间层。而正向代理中用户是知道目标服务器的域名信息的，知只是迫于网络的限制无法访问，如最常见的访问外网。

nginx安装与启动

nginx有windows版本和linux版本，一般针对项目需求是在Linux部署nginx服务器。

下载地址

nginx.org/en/download…

windows版本下载一个压缩包，解压即可
1.文件路径必须为英文，否则启动不成功。
2.查看端口占用，nginx服务器默认启动80端口。 cmd中

  • netstat -an  显示出电脑中所有被打开的端口列表
  • netstat -ano  显示出所有占用端口的列表
  • netstat -ano | findstr “80”  显示出80端口占用的详细情况
  • tasklist | findstr “80”    查询端口具体哪个应用占用

Netstat是在内核中访问网络连接状态及其相关信息的程序，它能提供TCP连接，TCP和UDP监听，进程内存管理的相关报告。

启动成功

前端Nginx点详解，给面试加分项

  • 启动方式1：双击nginx.exe
  • 启动方式2：start nginx
  • 关闭方式1: 结束进程（两个进程）
  • 关闭方式2：nginx -s stop

nginx配置文件

nginx的核心配置文件nginx.conf主要由3个部分组成

  • 基本配置

\#user  nobody; #配置worker进程运行用户
worker_processes  1; #配置工作进程数目,根据硬件调整，通常等于CPU数量或者2倍于CPU数量

#error_log  logs/error.log; #配置全局错误日志及类型 [debug|info|notice|warn|error|crit(致命错误)]默认error
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid; #配置进程pid文件


//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列
  • events配置

\#配置工作模式和连接数
events {
    # use epoll; #事件处理模型优化
    worker_connections  1024; #配置每个worker进程连接数上限，nginx支持的总连接数等于worker_connections*worker_processes
    # 我的本双核四线程，多任务运行弱，CPU主频2.4GHz,运行缓慢
}

//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列
  • http配置，基本配置和多个server配置

http {
    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"';

    #配置access_log日志及存放路径，并使用上面定义的main日志格式
    #access_log  logs/access.log  main;

    sendfile        on; #开启高效文件传输模式
    #tcp_nopush     on; #防止网络阻塞

    #keepalive_timeout  0;
    keepalive_timeout  65; #长连接超时时间，单位是秒
    #gzip  on; #开启gzip压缩输出

    #可以配置多个server
    server {
        listen       80; #配置监听端口
        server_name  localhost; #配置服务名

        #charset koi8-r; #配置字符集（俄罗斯字符集）
        #access_log  logs/host.access.log  main;

        #默认的匹配斜杠/的请求，当访问路径中有/，会被该localtion匹配到并进行处理
        #nginx根目录 /html/index.html
        location / {
            root   html; #root根目录，nginx安装主目录下的html目录
            index  index.html index.htm; #配置首页文件的名称
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html; #配置50x错误页面 html/50x.html
        #精确匹配
        location = /50x.html {
            root   html;
        }

        #PHP脚本请求全部转发道到Apache处理
        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        #PHP脚本请求全部转发道到FastCGI处理
        # 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;
        #}

        # 禁止访问.htaccess文件-通常是禁止外网访问的文件
        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

    # 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服务，安全的网络传输协议，加密传输，端口443
    # 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的主要应用

1.静态网站

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

nginx是一个http的web服务器，可以将服务器上的静态文件（html、图片等）通过http协议返回给浏览器客户端；若不配置location，nginx默认查找根目录html中的index.html文件。


    server {
        listen       8080;
        server_name  localhost;
        location / {
        root   wangyi/static; #root= ip+端口
            index  index.html index.htm;
        }
        #访问：localhost:8080，或如下配置
         location /static {
        root   wangyi;  #注意分号
            index  index.html index.htm;
        }
        #访问：localhost:8080或localhost:8080/static
        .......
    }

//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

前端Nginx点详解，给面试加分项

2.负载均衡

网站服务器由多台服务器组成一个集群对外提供服务，当用户输入域名进行访问的时候，负载均衡负责将用户请求分发到集群中的不同服务器，从而提高并发处理能力。nginx作为访问的统一入口，分发请求，实现负载均衡。 负载均衡实现方式有硬件负载均衡和软件负载均衡。

nginx负载均衡

nginx通过在nginx.conf配置文件中配置实现负载均衡 1.首先在http模块配置


upstream network1{
    server 127.0.0.1:3000 weight=3; #权重
    server 127.0.0.1:5000 weight=1;
}

//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

weight表示权重，用于后端服务器性能不均的情况，访问比率约等于权重之比，权重越大，被访问的几率越大。 upstream是配置nginx与后端服务器负载均衡非常重要的一个模块，他还能对后端服务器的健康状态进行检查，若后端服务器中有一台发生故障，则前端请求不会转发到该故障机器。 2.然后在server模块里配置


localtion /webname{
    proxy_pass http://network1;
}

//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

参数‘http://’是固定的，network1字符串要和upstream后面的字符串相等。代理转发到network1下，然后去匹配upstream，再去匹配upstream下的server。

node.js创建http服务器实现负载均衡

node http服务创建好以后，nginx 配置好以后，node作为代理服务器就可以访问node服务了。


upstream network1 {
        server 127.0.0.1:3000 weight=3;
    server 127.0.0.1:5000 weight=1;
        server 127.0.0.1:6000 weight=1;
    }

    server {
        listen       8080;
        server_name  localhost;

        location / {
            # 访问不到服务器，做详细配置。
        #proxy_redirect off;
            #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_set_header Host $http_host;
            #proxy_set_header X-NginX-Proxy true;
            #proxy_set_header Connection "";
            #proxy_http_version 1.1;
           proxy_pass http://network1;
        }

//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列



const http = require('http')
const fs = require('fs')
const url = require('url')
http
    .createServer((req, res) => {
        if(req.url == '/favicon.ico'){
            res.writeHead(200);
            res.end()
            return;
        }
        res.writeHead(200);
        fs.createReadStream(__dirname + '/index.html') #不同的页面内容查看效果
        .pipe(res);
    })
    .listen(5000)  #3000、6000。。。
------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>node</title>
   <link rel="stylesheet" href="">
</head>
<body>
    <div>第 1 个node服务器</div>
    <!-- <div>第 2 个node服务器</div> -->
    <!-- <div>第 3 个node服务器</div> -->
</body>
</html>

//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

nginx可以成功访问服务器，访问比大约等于权重之比。

前端Nginx点详解，给面试加分项

前端Nginx点详解，给面试加分项

nginx常用负载均衡策略
  • 1.轮询（默认）

每个请求轮流分配到不同的后端服务器，如果后端服务器宕机，则自动剔除。具体轮询策略为第一次访问第一个，第二次访问第二个。。。。。


upstream network1 {
        server 127.0.0.1:3000;
        server 127.0.0.1:5000;
        server 127.0.0.1:6000;
    }

//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列
  • 2.权重

每个请求按照一定比例分发到不同的后端服务器，用于后端服务器性能不均的情况，访问比率约等于权重之比，权重越大，被访问的几率越大。


upstream network1 {
        server 127.0.0.1:3000 weight=3;
        server 127.0.0.1:5000 weight=1;
        server 127.0.0.1:6000 weight=1;
    }

//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列
  • 3.ip_hash

ip_hash也叫ip绑定，每个请求按照访问ip的哈希值分配，这样每个访问客户端会固定访问一个后端服务器，可以解决会话session丢失的问题，常见账号密码登录。 哈希函数hash(“192.168.0.164”)%2 = 0 / 1,ip不变的话访问的服务器不变。


upstream network1 {
       ip_hash;
       server 127.0.0.1:3000;
       server 127.0.0.1:5000;
       server 127.0.0.1:6000;
   }

//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

当使用ip_hash以后，会一直访问3000端口的第一台服务器。

  • 最少连接 web请求会被转发到连接数最少的服务器上。

 upstream network1 {
        least_conn;
        server 127.0.0.1:3000;
        server 127.0.0.1:5000;
        server 127.0.0.1:6000;
    }

//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列
负载均衡其他配置

upstream network1 {
        least_conn;
        server 127.0.0.1:3000;
    server 127.0.0.1:5000 backup; #备份 当所有非backup机器宕机的时候才能请求backup机器。
    }
upstream network1 {
        least_conn;
        server 127.0.0.1:3000;
    server 127.0.0.1:5000 down;#当前机器是down状态，不参与负载均衡。
    }

//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

3.静态代理

把所有静态资源的访问改为访问nginx,而不是后台服务器，nginx更擅长于静态资源的处理，性能更好，效率更高。在实际应用中将静态资源html,css,js,图片交给nginx处理。 nginx实现静态代理，在nginx.conf配置文件中添加静态资源的location。
1.基于请求资源的后缀


location ~ .*\.(js|css|htm|html|gif|jpg|jpeg|png|bmp|swf|ioc|rar|zip|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma)${
    &emsp;root/html; #访问静态资源的路径，静态资源部署在nginx安装目录下，跟访问html/index.html一个道理。
}

//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

2.基于请求资源的存放目录


location ~ .*/(js|css|img|imgags)${
    &emsp;root/opt/static
}

//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列

linux安装目录：/user/local/nginx，在linux作为nginx部署服务器时，请求linux中存放静态资源的某个目录，如/opt/static

4.动静分离

nginx的负载均衡和静态代理结合在一起，实现动静分离，服务器专注于动态资源，nginx专注于静态资源。

前端Nginx点详解，给面试加分项

5.虚拟主机

虚拟主机就是把一台物理服务器划分成多个“虚拟”的服务器，这样我们的一台物理服务器就可以当做多个服务器来使用，从而可以配置多个网站。 Nginx下，一个server标签就是一个虚拟主机，设置多个虚拟主机，配置多个server即可。

基于端口的虚拟主机

根据nginx的不同端口即可访问到基于不同端口的服务器。


 server {
        listen       8080; #9090。。。
        server_name  localhost;
        location / {
          proxy_pass http://network1;
        }
 }
 upstream network1 {
        server 127.0.0.1:3000;
    }
 upstream network2 {
        server 127.0.0.1:5000;
    }

//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列
基于域名的虚拟主机

基于域名的虚拟主机访问时以域名的形式访问，这就涉及到DNS域名解析的知识，我们可以在windows的hosts文件给域名直接指定端口，windows C:\Windows\System32\drivers\etc有个hosts文件，如果在这里指定了一个域名对应的ip地址，那浏览器会首先使用这个ip地址。


 server {
        listen       8080;
        server_name  www.maanshan.com
        # server_name  www.laioyang.com
        location / {
          proxy_pass http://network1;
          #proxy_pass http://network2;
        }
 }

//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列



upstream network1 {
        server 127.0.0.1:3000;
    }
 upstream network2 {
        server 127.0.0.1:5000;
    }

//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列
虚拟主机实例

www.meituan.com

  • www.liaoyang.meituan.com
  • www.maanshan.meituan.com

前端Nginx点详解，给面试加分项

前端Nginx点详解，给面试加分项

前端Nginx点详解，给面试加分项

作者：张舍予
链接：https://juejin.im/post/6844904005160681486

看完两件小事

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

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

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

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

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

标题：前端Nginx点详解，给面试加分项

链接：https://www.javascriptc.com/4191.html

赞 (0)
打赏 微信扫一扫 微信扫一扫
0
« 学习Vue3的虚拟dom
那些年与面试官交手过的HTTP问题»
Flutter 中文教程资源

相关推荐

QR code