手把手搭建nginx服务器，部署前端代码

第一步: 下载 nginx

下载后，将其解压到本地的任一目录下。

此时我们可以看到有如下目录:

html路径下放置我们前端 build好的代码(如何build，相信各位都会)，conf下有个非常重要的文件nginx.conf，用来配置nginx服务器。

第二步: 配置nginx服务器

打开nginx.conf文件，直接找到配置server 的地方,取消掉暂时用不到的配置，下面便是我的配置:

server {
        # 启动后的端口
        listen       8880;   
        
        # 启动时的地址
        server_name  localhost;

        # 启动后，地址栏输入: localhost:8880, 默认会在html文件夹下找 index.html文件
        location / {
            root   html;
            index  index.html; 
        }
        
        # 404页面配置，页面同样在html文件夹中
        error_page  404    /404.html;
        location = /404.html {
            root   html;
        }
        

        # 其他错误码页面配置
        error_page  500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }


        # 配置代理。由于项目是在本地起动的，而我们的request需要请求其他ip地址。如果你的request链接为localhost:8880/api/login?name=12345,那么下面配的就是location /api,最终会代理到 http://192.168.0.0:80/api/login?name=12345
        
        location /api {
           proxy_pass   http://192.168.0.0:80;       
        }

        # 一把前端不管用vue，还是react等框架，默认都是单页面的，如果你的项目是多页面的，则需要用到下面的配置。
        # 因为此时你的浏览器的url不是localhost:8880/#/login,而是 localhost:8880/a.html/#/login
        # 所以我们需要将路径中a.html指向具体的html文件夹中的文件，因为默认是index.html
        location /a.html {
          alias html;
          index a.html;
        }
        location /b.html{
          alias html;
          index b.html;
        }
}

1.1 gzip 压缩

#前面有很多，不关注多余的
http {
    #前面有很多，不关注多余的
    
    #开启gzip压缩
    gzip  on;
    # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
    gzip_min_length 1k;
    # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明
    gzip_comp_level 9;
     # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
    gzip_types text/plain application/json application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
    # 是否在http header中添加Vary: Accept-Encoding，建议开启
    gzip_vary on;

    
    #后面有很多，不关注多余的
}

#后面有很多，不关注多余的

此时你会在chrome的network中的 content-encoding的列上看到:

有的请求已经有了gzip，当我们点击这个有gzip的请求后，会看到如下:

在response header中多了一个 content-encoding:gzip.

那么也就说明这个请求已经被gzip压缩了，那么为什么有的没有gzip呢，因为他们的资源小于1k，在上面配置文件中，我们配置了只有大于1k的才会被压缩。

鼠标浮到 http的请求size上，会出现个hover，可以看到

原本有1.5k大小的请求，被压缩后，只有992b。几乎缩小了一倍。

这对于前段开发来说，将大大减小http请求的响应时间，进而影响页面的响应速度。

1.2 cache缓存

如果不设置 cache缓存，则可以看到response header为下面:

此时我们跳到其他页面，再进入刚才的页面，会发现重新发了个一个一模一样的请求

然后我们在nginx中设置缓存。

location /api {
           proxy_pass   http://192.168.0.0:80;

           #expires作用于http, server, location。 可以控制HTTP应答中的“Expires”和“Cache-Control”的头标（起到控制页面缓存的作用）。
           #如果expires为-1s，即永远过期，则reponse header为Cache-Control: no-cache， 当expires为正值，则header为Cache-Control: max-age = #
           expires  1d;      
        }

此时我们发现 reponse header中多了两个属性，这是由nginx自动加的