本文已参与「新人创作礼」活动,一起开启掘金创作之路。
前言
没接触过的东西也都觉得很难,但是真正去使用会发现很简单,nginx就是这样的东西,很多人还不知道nginx如何反向代理请求,于是写一篇记录,顺便也当给自己做个内容归纳笔记。
包括nginx的配置文件介绍、nginx的常用命令、nginx解决跨域的详细步骤、还有alias与root代理的区别注意事项,读完就基本能使用nginx进行项目开发了。
nginx下载
-
nginx用来处理请求,作为服务器代理,那么肯定得放在服务器上,比如自己租来的云服务器。
-
在宝塔linux上可以直接下载比较方便,推荐,如果没用宝塔,可以自己在linux上配置:linux 如何安装nginx。
nginx目录
宝塔安装的大概是这样的目录,当然自己配置也没差多少,都有几个重要的目录。
-
sbin
,这里是nginx的启动文件所在目录,我们执行nginx
启动命令必须得进入该文件夹,所以我的建议是配置环境变量,让它在什么位置都可以执行,如何配置环境变量呢:linux 如何安装nginx的配置环境变量小节。 -
html
,这是默认的静态文件夹,里面一般会有一个index.html
入口页和一个50x.html
错误页,nginx默认配置会将80端口代理到这里,也就是你访问你服务器的80端口http://xxx.xx.xxx.xx:80(默认端口80可以不写)/
会进入这里的index.html
页面,你可以用自己写的html覆盖它。 -
conf
也就是我们的配置nginx的目录,默认配置文件是里面的nginx.conf
。
nginx.conf
默认的把默认配置注释掉的部分删除大概长这个摸样,我就重点说一下server
里面是如何代理主页的部分。
-
listen
代表监听的端口,这里是80
。 -
server_name
服务名无所谓自己定义。 -
下面
location
就是要代理的路径,/
路径什么意思?就是你访问http://xxx.xx.xxx.xx:80(默认端口80可以不写)/
后面那个/
,代理静态文件
用root
,这里的root
告诉你80端口的/
会被代理到html
文件夹,入口文件就是index.html
或者index.htm
。
nginx常用命令
- 我们修改了nginx.conf配置,就得重新启动nginx,否则不会生效。
nginx -s reload
- 使用别的文件作为配置文件,也可以通过这种方式启动nginx。
nginx -c /路径/other.conf
- 关闭nginx服务
nginx -s stop
nginx解决跨域
怎么产生跨域的
-
首先我们要知道我们项目部署如何产生跨域的。
-
我们假设前端用react编写一个项目,打包好之后会生成一个dist文件夹,里面有入口index.html。后端我们用nodejs写了一个在
3000
端口上的提供接口的服务器。 -
在这个index.html有我们写的请求数据的代码,比如
getName
请求名http://xxx.xx.xxx.xx:3000/getName
。 -
当我们把index.html文件部署在服务器80端口时,你这个
http://xxx.xx.xxx.xx:3000/getName
请求就是在http://xxx.xx.xxx.xx:80
上发送的,端口不一致,满足跨域问题条件,这就是产生跨域问题了。
怎么解决跨域
-
首先我们要想一个代理的服务名,比如大家都常用的
/api
,那我们直接把原来前端代码请求的http://xxx.xx.xxx.xx:3000/getName
全部给它改成/api/getName
。 -
因为index.html代理到了80端口,也就是你现在的服务
/api/getName
是在http://xxx.xx.xxx.xx:80
发出的,也就是http://xxx.xx.xxx.xx:80/api/getName
。 -
还记得我们的nginx在监听
80
端口上的服务吗?能代理/
那/api
自然也可以代理。 -
我们就把
/api
代理去http://xxx.xx.xxx.xx:3000
。location /api { proxy_pass http://localhost:3000; }
-
但是上方的代理存在一些问题,也就是虽然代理成功了,但是变成了
http://xxx.xx.xxx.xx:3000/api/getName
,这个/api
是我们临时使用的,它存在服务上我们还是无法正确请求到。 -
你可以将你
http://localhost:3000
上的对应请求前面也加上/api
(这也是一种常见解决方案)。 -
你也可以选择在代理proxy_pass后面加上/
location /api/ { proxy_pass http://localhost:3000/; }
-
为什么改成这样就可以去掉
/api
?不急,我写了对应的文章:nginx proxy_pass路径后带/与不带/的区别
代理路径alias与root
- 有时候我们不想要一个项目直接放在80端口的
/
请求上,这样我们的服务器不能做更多的事,我们代理的时候可以选择alias
和root
,其实没什么区别就是怕不区分明白会乱掉,觉得哪个好用就只用一个就好了。
用alias
-
因为我们不想使用
/
,因此我们要添加一个服务名,比如把我们的/
请求换成/home
。 -
alias
表示遇到/home
请求我们就去alias后面的内容也就是html
文件夹找内容,location /home { alias html; index index.html index.htm; }
用root
-
把
alias
换成了root
,就是我们要在html
中创建home文件夹
,把静态入口放入,其他都一致。 -
root
表示遇到/home
请求我们就去root后面的内容+location后面的内容去html/home
文件夹找内容,location /home { root html; index index.html index.htm; }
注意
-
代理路径很容易出现一个问题,就是静态资源访问不到了,包括js、css、图片等,因为路径的问题,例如react打包的dist项目,静态文件是以
/
绝对路径的形式访问,我们需要单独给它们添加代理。 -
下面以index.html、js文件、css文件为例。
-
比如你要把它们都放在html文件夹,那就用alias。
location /test{ alias html; index index.html; } location ~ .*\.(js|css)?$ { root html; }
-
又比如你要把它们都放在html中的test文件夹,那就用root。
location /test{ root html; index index.html; } location ~ .*\.(js|css)?$ { root html/test; }
-
当你使用一些脚手架打包dist后,生成的部署文件css和js,如果index.html将被代理路径,你可能得根据对应的路径修改base和publicPath,这样就可以在一个端口下用多个路径部署多个项目。
尾言
如果觉得文章对你有帮助的话,欢迎点赞收藏哦,有什么错误或者意见建议也可以留言,感谢~