一文彻底搞懂Nginx的.conf文件路径配置

前言:最近在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访问到该目录啦~

以上就是这篇文章的全部内容了,希望能够对你有所帮助,如果你喜欢这篇文章的话,求赞、求收藏、求评论、求分享,最重要的是点一个大大的关注,各位的支持就是我写博客的最大动力,ok各位,我们下篇再见!

 

TEL

400-123-3667
138-1230-0000