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

原本有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自动加的

然后我们跳到其他页面后，再回到上次的页面，发现这个请求并没有缓存。size的位置还是有值。

通过阅读 mdn 发现，缓存是能对 get请求生效，而对post不生效。

cache-control FAQ MDN

那我们找个get请求，比如登录时的获取验证码。

然后我们再次点击刷新验证码。会发现

size位置变成了 disk cache服务器404 找不到文件，浮到disk cache的位置。

这就说明是从 缓存里获取的。观察验证码，确实也没有变化。

第三步: 将build好的内容放到nginx下的html文件夹下

只需要dist下的内容，如

clipboard.png第四步: 启动nginx服务器

在

路径下右键，打开命令号工具，并输入

>start nginx

然后在浏览器地址栏输入

localhost:8880

即可

第五步: 停止nginx服务器

>nginx -s stop

注意事项

1、在修改nginx.conf文件时，每行的末尾必须带有分好";"，否则会报错。2、有些命令行工具在执行start nginx后，一闪而过，所以你并不知道到底启动了还是没有，可以运行下面的命令:

tasklist /fi "imagename eq nginx.exe"

结果类似于这样

3、如果你运行nginx -s stop命令后，再次运行tasklist /fi "imagename eq nginx.exe"命令发现还是有进程，并没有停止，可以访问任务管理器，然后结束进程

最后

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

欢迎关注「前端瓶子君」服务器404 找不到文件，回复「算法」，加入前端算法源码编程群，每日一刷（工作日），每题瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持