刚开始写前端的时候，大家基本都是 HTML、CSS、JS 一把梭。代码写完了，本地用 webpack-dev-server 跑起来，页面就在眼前。这个时候 Nginx 好像跟我们没啥关系。

后来，项目要上线，或者要自己搭个小测试环境。这时候主管扔过来一台服务器：“去，用 Nginx 部署一下。” 懵了。Nginx 是啥？我前端用它做啥？

其实，不复杂。前端用 Nginx，翻来覆去就干那么固定的几件事。

静态文件服务

我们写的 Vue、React 项目，打包完就是一堆 .html、.css、.js 和图片。这些文件根本不需要 Node 服务器。你只要在 Nginx 里配个 root 目录，它就老老实实把这些文件提供给浏览器。改个反向代理域名，网站就通了。没半点花哨。

解决跨域问题

这也是前端最常碰到的需求。后端的接口通常在另一个域名或者端口上。我们前端本地开发，直接 fetch 过去，浏览器就报跨域错误。webpack-dev-server 的 proxy 解燃眉之急，但有时不方便。比如你想连手机测试，或者后端要直接看你的本地环境，proxy 就不够灵活。这时候，求助于 Nginx 的反向代理。

你把包含 /api 的请求全部转发到后端服务器。因为 Nginx 跟服务器通信不受浏览器同源策略限制，它去请求后端，再把数据带回来，跨域就好像没发生过。

具体配置方法

写一个 location /api，然后 proxy_pass 后端的地址。前端代码继续请求 /api/xxx，感觉不到背后有代理的存在。

处理 History 模式刷新 404

还有一个让前端头大的事：history 路由模式下刷新报 404。

用 Vue Router 或 React Router 的 history 模式，页面路径不再带 #，好看多了。可是当你直接访问 /user/123 然后刷新，页面直接白屏 404。因为服务器上根本没有这个路径对应的文件。怎么办？用 Nginx 的 try_files。

它干的事很好理解：先去磁盘上找请求的文件，找不到就返回 index.html。这样，前端路由接管后面的活，页面就正常显示了。配好之后，history 模式随便刷新。

上面三件事，差不多覆盖了前端跟 Nginx 的大部分交集。除了上面这些，Nginx 还能顺带做几个小活。

开启 Gzip 压缩

给静态文件开 gzip，压缩 CSS、JS，减少传输体积，加载速度明显变快。

配置 HTTPS

配 HTTPS，把证书文件路径写在配置里，网站就能支持 https，前端零改动。

域名重定向

做域名重定向。比如旧域名换新域名，写个 rewrite 规则，所有流量永久跳转，对搜索引擎也对路。

缓存控制

缓存控制也是常用功能。那些带哈希的文件名，基本不会变，设置很长的缓存时间，用户二次访问几乎秒开。

为什么选择 Nginx

你可能觉得，有些活儿 webpack-dev-server 也能干，何必上 Nginx？

因为它跑在服务器上，稳，快。后端同事基本全在用 Nginx，我们前端能自己配置，沟通成本低很多。再说，有时候你想快速给别人看个 demo，用 Nginx 指个目录就起来了，比写个 node 服务省事得多。

把这些最常见的用法摸清楚，再打开那些 .conf 文件，就不会觉得是天书了。至少你知道它是干什么的，出了问题知道往哪个方向找。

好了，前端用 Nginx 基本就干这些。下次别人问起，你可以随口就告诉他。