前言:最近在Nginx上部署Vue项目,同时还存了一些静态资源,但我查了好久都没找到一篇详细介绍路径配置的文章,因此就根据我有限的经验写了这篇文章,希望能够对读者有所帮助
详解server中各部分作用及如何配置
如下图所示,这是我配置好的一个server代码块,我这里配置了https,所以会比默认的多一部分内容,如果你只需要配置http,则只需关注红色方框的部分即可,下面会按顺序讲解。
①listen项
用来配置端口号的,常见端口号如 http 是80端口, https 是443端口,如图所示,可以配置多个端口,表示通过这些端口都可以请求到。
注意事项:
如果是80端口或443端口,是不需要写在路径中的,因为完整路径前的http或https就表明了端口;
但如果配置了静态资源是其他端口,如 8080 端口,则需要在访问时加上端口号才能请求到
例子:
配置文件:
访问路径:
②server_name项
如果要配置域名就写域名,没有域名就写localhost,这一项决定了访问路径中的协议和端口之间的内容,也就是下图的内容(我这里配置了域名)
如果写的是localhost,则可以在路径上通过 部署到的电脑的IP地址 进行访问,就是把上图的域名替换为ip地址进行请求
③location 后的路径项
这一项决定了访问路径的填写和访问到的资源路径两方面,后者一般需要和第④项结合着理解,一下还会提及
简单而言,我推荐的写法是 “/+你想写的符号”,如下:
这里的rotograph就是 “你想写的符号”
而这个符号决定了访问路径,如按上图,那么我的访问路径就是
也就是说这个符号在访问路径中处于端口号的后面,而其所访问的就是你设置所指向的资源,第④项会说的。
注意事项:
那么当我们不写符号时,也就是 location / 这样,则在访问路径的端口号后不需要任何东西就可以访问到指定的资源,就是通常理解的“首页”
而如果我们配置了多个location块,而其后的符号都是相同的,这时会遵循长路径优先匹配原则,也就是输入网址,会优先匹配到指定资源路径更长的那个
④root 项
这一项填写的是根路径,其实还有另外一项,叫 alias,它们的区别可以见 root和alias的区别 这篇文章(不保真)。
这里主要说一下root,它会结合第③项配置的路径,从而得到指定要访问的资源路径的真实地址。
例子:
那么,我想通过 http://xxx:端口名/rotograph 这个路径来访问这个资源怎么办?
将根路径设置成 /usr/show 即可,这里千万注意不要漏掉前面的 /,写成 usr/show是不对的。
注意事项:
如果我们在root项中前面没有写 /(默认的就没写),那么会访问到哪里呢?
其实Nginx有一个默认站点目录,一般为 /usr/share/nginx/html ,所以你将默认的文件中的html改成这个路径,也会返回Nginx的那个页面,我猜测,如果不写 /,那么所有root后的配置路径在访问时都会在前面被拼接一个 /usr/share/nginx/,如下所示:
这个配置路径前没有 / ,那么其访问的真实资源地址就是下图红框中的地址
所以,如果我们想把项目部署到别的目录,那么配置root项时路径前一定要加 / !
如下:
这样配置,就只需将项目部署到如下地址 /webapp/vue1中即可。
⑤index项
这一项最简单,就是定位到指定资源目录后,你想展示那个文件,如我设置 index.html就展示名为 index.html的文件,我也可以设置成 pic1.jpg,那么就展示一张图片
注意事项:
配置到index项的文件是不需要在路径中写出的,会自动展示,如下:
配置:
访问效果:
后记
综上,只要给出想要访问的资源,那么就很容易配置location块,只需要将指定资源地址合理划分就能得到第③项和第④项了,如下:
将红色框中路径作为root项,将黄色框中/img作为location后的路径项,就可以轻松通过 http://ip地址:端口号/img访问到该目录啦~文章来源:https://www.toymoban.com/news/detail-484585.html
以上就是这篇文章的全部内容了,希望能够对你有所帮助,如果你喜欢这篇文章的话,求赞、求收藏、求评论、求分享,最重要的是点一个大大的关注,各位的支持就是我写博客的最大动力,ok各位,我们下篇再见!文章来源地址https://www.toymoban.com/news/detail-484585.html
到了这里,关于一文彻底搞懂Nginx的.conf文件路径配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!