一、背景
本次nginx的配置都是在本地电脑上进行，将本地电脑作为一台服务器，所以一些配置过程中的路径都是基于本地电脑的路径，而不是真正服务器上的路径，和网上大部分看到的会有一些不同，可以说是以练手以及想要做更多研究为目的，比较适合纯前端想要尝试自己配置nginx的新手阅读。
二、实践
1、首先去nginx官网下载一个版本，可以选择下载最新的，解压缩到本地电脑上，我这里选择放在D 盘，例如D:/Nginx,解压缩后会得到nginx自带的目录，需要关注其中的conf目录以及html目录，如下图：
2、准备一个前端项目，可以正常启动和打包，build出一个静态资源包； 如果使用Vscode作为IDE，可以下载nginx的插件，后续做config就可以自动补全nginx的配置，插件如图：
3、前面两个步骤准备就绪后，将build包的内容复制到html目录里，代替原有的index.html文件，注意build目录本身不需要复制进去，此时是部署在根目录下：
4、打开nginx下的conf目录里的nginx.conf文件，这就是默认的nginx配置了，默认情况下里面有基本的config了，此时我们针对react的history router方式做关键配置，如果无特殊需求，一般上部署在根目录，那配置如下图:
三、部署到二级目录下，如何配置？
什么是二级目录下，为什么需要部署到二级目录？当我们只有一个域名，但是又需要在当前域名下部署多个项目的时候，此时就可以部署到二级目录下，例如根目录地址： http://192.169.11.12/login, 当部署二级目录的时候可以是：http://192.169.11.12/sprint-1/login, http://192.169.11.12/sprint-2/login,
如何配置？这个配置比部署在根目录下麻烦些。
首先因为路径加了二级目录，例如/sprint-1/,那react-route的配置也需要更新，需要加上basename为/sprint-1,这样所有路由会自动加上这个路径前缀
其次，因为打包是相对于/sprint-1目录，所以打包出来的index.html文件里的资源引入也需要带上这个路径，我们可以通过修改package.json里的homepage这个属性来处理 ，homepage属性定义了应用程序在部署后的基础URL路径，这对于确定资源文件的引用路径非常重要,"homepage":'/sprint-1',homepage默认是"/",对应基础URL在根目录下，更改后进行build，会发现index.html里的资源文件的路径会变成:"/sprint-1/static/xxx.js"，如图：
最后修改nginx的配置，此时访问页面的url是/sprint-1/login,那意味着这个路径下要先去访问index.html，这里我新建一个src的目录，和html目录区分开，那此时对应回服务器上要访问的路径应该是/src/sprint-1/login,build的文件就应该要放在html下的sprint-1目录里，对比根目录，多创建了一个sprint-1的目录，否则index.html内的link脚本就找不到对应的文件，如图：
nginx的配置就需要改成以下：
四、nginx中的反向代理配置
什么是反向代理？在前端中的使用场景？如何配置？ Nginx 的反向代理（Reverse Proxy）功能是用来将客户端请求转发给后端服务器的，中间 Nginx 起到代理的作用。这在前后端分离部署、负载均衡、跨域处理等场景中非常常用，在实际的场景业务中，客户端需要访问后端服务，一般使用axios或者fetch去call api，baseUrl那边设置一个/svc的路径，nginx这边匹配这个路径并转发到真正的后端服务上：
其次proxy_pass就是对应后端服务地址
五、遇到的一些问题
一、 更新了config后进行nginx -s reload,发现不生效，最后发现要重启电脑才行，如果是在真正的服务器上nginx -s reload应该是正常的
二、部署后可以打开地址，但是发现页面空白，调试发现是css文件没有加载进来，经过排查css文件其实已经下载下来了，但是不知道什么原因没解析到，后面发现是nginx的某个配置被我删除了:include mime.types;就是这个，它是告诉nginx，碰到资源后通过文件的类型去自动匹配的mime type去解析，而进一步查看下载的css文件，发现它的response type是text/plain了，应该需要时text/css才能被解析为css