如何使用nginx搭建前端环境

注意：nginx文件夹必须放在没有中文的路径下，否则无法使用

进入nginx的html文件夹，将前端工程放进去（即下图的sky)，文件通过npm run build生成dist文件夹获得

配置反向代理

前端的请求地址与后端的接口地址并不一致，而nginx反向代理，就是将前端发起的动态请求由nginx转发给后端服务器。好处是能通过缓存提高访问速度，利用多台服务器进行负载均衡，保证后端服务安全。

我们进入nginx.conf查看反向代理配置

如下图所示，upstream webservers为我们设置的参加负载均衡的服务器，proxy_pass为nginx转发的后端接口地址，例如，/api/的作用是，如果前端请求的地址包括/api/，就会将地址中/api/及以前的部分全部替换成http://localhost:8080/admin/,如果前端请求http://localhost/api/employee/login，nginx就会转发到http://localhost:8080/admin/employee/login

双击运行nginx.exe，nginx的端口默认为80，所以我们直接打开浏览器，在地址行输入localhost:80或者直接localhost（localhost不加端口默认访问80端口），即可进入前端网页