域名解析办错误显示电脑错误_前端必备知识之 Nginx 复盘总结

作为前端开发人员，我们可能或多或少接触过Nginx，但可能是因为我们自己不需要对它进行一些必要的配置，导致我们对它的了解并不深。但是如果大家在工作之余，实际开发过自己的项目，就会发现在很多场景下，nginx对于我们来说，遍历的次数非常多，而且它的性能是比较高效的，在国内很多网站其实都有使用。在了解它之前，我们需要对它有一些基本的了解，首先，我们需要知道

什么是 Nginx

首先Nginx是一款高性能的HTTP和反向代理Web服务器，同时还提供IMAP/POP3/SMTP服务，是一款轻量级的Web服务器、反向代理服务器和邮件服务器。其实Nginx在最初设计的时候就是为邮件服务而生的，它的特点是内存占用小、体积小、并发强、性能高，在日常开发过程中，用到的场景非常多。

Nginx 用于什么？

从大局来看，主要有三大特点：反向代理、负载均衡、动静分离。

反向代理

反向代理是Nginx最常用的场景，如果我们开发的服务请求量很大，一台服务器已经承受不住了，需要扩容使用多台服务器，那么就需要增加一层中间件来分发用户请求，将用户请求发送到不同的服务器上，这时候我们就可以使用Nginx来完成，当然这只是它的功能之一，在了解反向代理之前，我们先说一下正向代理，有反向就一定有正向。

先说反向代理，假设我们是一个用户，上面的场景中，不管加了多少台服务器，我们的用户访问的永远都是同一个域名，对于用户来说，反向代理是无感知的，这里的代理就是Nginx中间件层，把用户的请求代理到我们的服务器上，同时也是在服务器端完成的，反向代理的过程隐藏了真正的客户端，客户端请求的服务全部由代理服务器来请求。

先说正向代理，假设这样的场景，我们在日常开发中应该经常会用到VPN，公司的一些项目或者私人的git或者一些内部的网站，我们需要登录VPN才能访问。基本原理就是在客户端和原始服务器之间放置一个服务器，客户端为了从原始服务器获取内容，就向代理发送请求，并指定目标（原始服务器），然后代理将请求转发到原始服务器，并将获取到的内容返回给客户端。客户端就可以使用正向代理了，我们登录VPN之后，所有的请求都会经过VPN服务器的代理，才能访问某些资源或者网站，那么这个代理服务器就会是公司内部的白名单ip，这样所有的请求都会统一从这里进入，就实现了一个正向代理。这样，正向代理的过程就隐藏了真正的客户端，客户端请求的服务都由代理服务器来请求了。

当然这个只在大型项目中使用，对于我这个个人开发者来说，也没有多台服务器做负载均衡或者反向代理，那拿它来干什么呢？

隐藏服务端口号

首先我们有了自己的服务器之后，大概就会有自己的域名，这个时候如果我们有多个网站的话，大概就会自己创建二级域名，这个时候当我们想要部署多个网站的时候，可能会变成**192.xx.xx.xx:888[1]，*192.xx.xx.xx:999[2]这样，如果你是一个前端开发者，部署过多个Node项目的话，肯定会遇到这个问题。我们知道，对于一个服务器来说，正常情况下各个端口都是独立的，不能共用的。【也有特殊的场景，比如提供的双工通信，可以让http和ws使用同一个端口】。如果我们想要通过二级域名来区分不同的服务，就需要解析成不同的二级域名。我们知道，一个网站在不添加端口的情况下默认打开时，http对应的是80端口，https对应的是443端口，一般情况下，云厂商也是默认打开这两个端口的。 因此我们在使用 Nginx 时，只需要监听 80 和 443 端口，判断访问的域名地址，并转发到不同的端口即可（具体配置会在最后贴出）。那么作为个人用户，我们在这个场景下就可以实现，不用再添加丑陋的端口号了。所有的请求都会通过 80 和 443 端口代理到我们真正的服务端口上。

部署前端项目

因为同样是静态web服务器，所以部署我们的前端项目非常简单。相信很多人如果尝试自己部署的话，使用Nginx很简单。下载、安装、运行、指定默认目录，把前端项目拖进去就可以访问了。这个步骤比较简单，就不详细讲解了。这也是我们前端可以用到的一个场景。

负载均衡

说完了反向代理，我们再来看看负载均衡，这个很好理解。在上面的场景中，如果我们使用三台服务器，那么客户端发送请求之后，我们应该把请求发给谁呢？我们总不能把所有的请求都转移到三台服务器中的一台上，这显然是不合理的。为了最大限度地发挥我们的性能，负载均衡就是把客户端的请求合理的分配给服务器，默认情况下我们都是按照均等的比例进行分配，可以理解为1:1:1。但是在实际场景中，我们的服务器配置可能不一样，有的配置好有的配置差，所以这里就有一个加权的概率，我们可以配置哪台服务器分配请求多一些，哪台服务器分配请求少一些。这样的配置可以最大限度地发挥服务器的性能，合理的分配请求会让系统更加健壮和稳定。

动静分离

在我们开发过程中，有些请求是需要动态计算的，比如需要连接MySQL数据库进行增删查改等操作，这些都是动态的。而对于一些前端文件比如HTML、CSS、JS，其实是不需要后台处理的，那么我们就可以通过动态文件和静态文件分离的方式来实现，并且将这些静态文件缓存起来，来提高效率。当然这一点在目前前后端分离的场景下，我个人觉得实用性似乎不高，使用场景相对上面两点来说比较有限，这三点是比较大的三点，在比较小的地方还有很多细节需要注意，下面我们通过配置来详细了解一下。

Nginx实战分析

使用之前我们需要先下载，下载很简单，如果是的话就去官网下载解压后直接打开exe就可以了，mac用户大部分都有brew包管理，我们只需要brew nginx就可以完成下载了。

使用很简单，只需要在终端输入nginx就可以启动成功，它默认使用8080端口，所以我们启动成功之后，我们访问127.0.0.1:8080就可以看到经典的nginx了。首先我们作为一个前端开发人员看到这个页面的第一印象是什么？这个地址显示的是一个网页，所以这个网页肯定是内置的。其次我们如果改一下内容，显示的是不是我们自己的东西？再者如果我们用这个文件替换掉我们自己的项目，我们能访问到我们自己的项目吗？当然是这样的，很多前端项目的部署其实很简单，我们将我们的项目拖到这个文件的地址上覆盖掉，但是我们怎么知道这个文件在什么目录，什么地址呢？那就要看配置信息了。

在终端输入nginx -t，显示具体信息。

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

这样我们就可以看到nginx配置文件的地址，以及当前的配置文件是否合规，是​​否可以使用。如果你的配置文件有错误，这里会提示你。然后我们可以cd到配置目录，看看它的默认配置。我们可以直接打开 . 或者 cat nginx.conf 查看默认配置，如下，

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;
events {
    worker_connections  1024;
}
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  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;
    #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;
        }
        #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;
        }
    }

    # 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;
    #    }
    #}
    include servers/*;
}

这里的配置太多了，为了简单起见，我们把一些暂时不需要的配置删除，然后我们再来分析一下。

监听端口 8080

首先我们知道默认的端口是8080，同时我们刚刚也说了浏览器只有80和443两个端口是不需要拼接的，所以正常情况下我们是不要端口号的，所以我们只要找到8080然后替换成80就可以了。所以现在我们知道这个配置是指我们要监听哪个端口号，改成80之后我们访问服务就不需要再增加端口了，直接访问127.0.0.1就可以了。当然我们现在还访问不到，因为修改配置之后Nginx需要重新加载，我们可以停止再启动，或者更简单的 nginx -s 重新加载就可以了，更具体的命令我们后面会讲，重新加载完成后我们访问的时候会发现效果是一样的，如果是在我们的服务器上，这里就不讲安装，大家可以去官网或者百度找，我们将域名解析到我们自己的服务器上就可以了。 这时候你就不用添加端口，直接通过访问自己的域名就可以访问项目了。如果你还是个初学者，不懂Linux一系列命令，那么我建议你使用sftp，用可视化工具直接拖拽文件。晚上按照上面的步骤操作，那么我们网站的第一步其实就可以这样部署了。如果你没有域名，直接输入你的服务器ip也可以访问成功。

如何在一台服务器上部署多个网站

作为个人开发者，我们大多数情况下只有一台服务器，但是还是想部署多个项目，这时候该怎么办呢？就需要接下来的配置了。为了让很多同学更容易理解，我们还是拿前端来举例子，我们在自己的电脑上开发项目的时候，同时在8080端口启动前端项目，在3000端口启动后端node项目。那么，我们能不能通过两个端口启动两个服务呢？在我们的服务器端也是一样，多个服务只需要运行在不同的端口上就可以了。在Nginx的配置中，我们只需要根据用户访问的地址，指向不同的端口就可以了。那么这个该怎么配置呢？下面就拿我的个人网站来做基础配置吧：

server {
    listen       80;
    server_name   chat.jiangly.com;
    location / {
        proxy_pass   http://127.0.0.1:7000;
    }   
}

我们发现这么简单，两行就够了，监听80端口，当域名访问的时候，就指向我们的7000端口，那么7000端口就是我们项目运行的真正端口了。很显然，这是一个后端的node服务。这时候小伙伴们就有疑问了，如果我们是前端静态项目怎么办呢？我都打包好了，好像没有端口，直接访问就可以了，这个是哪里弄的呢？其实也很简单：

server {
        listen 80;
        server_name project1.jaingly.com;

        location / { 
                root /data/project1/;
                index index.html;
        }
}

我们发现已经变成了root，而root指向的是一个地址，那么我们只要把我们的项目放到这个地址就可以了。原来前端项目就是这么简单，现在我们可以一次性部署很多个网站了，不仅可以像前端一样访问静态网站，还可以配置node项目带端口，现在服务器想部署多少个项目就可以部署多少个了，如果没有域名的话，需要改成127.0.0.1加上端口号或者项目地址，比如127.0.0.1:7000，127.0.0.1/，用来区分项目。同时要注意这里用的相对路径是和我们nginx -t里的配置文件nginx.conf对比的，记住地址，不要把文件放错地方，不然会找不到的。