nginx入门攻略(一篇简单掌握nginx)

简介: nginx入门攻略(一篇简单掌握nginx)

目录


前言


没接触过的东西也都觉得很难,但是真正去使用会发现很简单,nginx就是这样的东西,很多人还不知道nginx如何反向代理请求,于是写一篇记录,顺便也当给自己做个内容归纳笔记。


包括nginx的配置文件介绍、nginx的常用命令、nginx解决跨域的详细步骤、还有alias与root代理的区别注意事项,读完就基本能使用nginx进行项目开发了。


nginx下载


nginx用来处理请求,作为服务器代理,那么肯定得放在服务器上,比如自己租来的云服务器。

在宝塔linux上可以直接下载(比较方便,推荐),如果没用宝塔,可以自己在linux上配置:linux配置nginx详解。

nginx目录


宝塔安装的大概是这样的目录,当然自己配置也没差多少,都有几个重要的目录。


sbin,这里是nginx的启动文件所在目录,我们执行nginx命令必须得进入该文件夹,所以我的建议是配置环境变量,让它在什么位置都可以执行,如何配置环境变量呢:linux服务器如何添加环境变量。

html,这是默认的静态文件夹,里面一般会有一个index.html(入口页)和一个50x.html(错误页),nginx默认配置会将80端口代理到这里,也就是你访问你服务器的80端口http://xxx.xx.xxx.xx:80(默认端口80可以不写)/会进入这里的index.html页面,你可以用自己写的html覆盖它。

conf也就是我们的配置nginx的目录,默认配置文件是里面的nginx.conf。

image.png

nginx.conf


默认的把默认配置注释掉的部分删除大概长这个摸样,我就重点说一下server里面是如何代理主页的部分。


listen代表监听的端口,这里是80。

server_name服务名无所谓自己定义。

下面location就是要代理的路径,/路径什么意思?就是你访问http://xxx.xx.xxx.xx:80(默认端口80可以不写)/后面那个/,代理静态文件用root,这里的root告诉你80端口的/会被代理到html文件夹,入口文件就是index.html或者index.htm。

image.png

nginx常用命令


  1. 我们修改了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;
     }
  1. 但是上方的代理存在一些问题,也就是虽然代理成功了,但是变成了http://xxx.xx.xxx.xx:3000/api/getName,这个/api是我们临时使用的,它存在服务上我们还是无法正确请求到。
  2. 于是我们需要改成
     location /api/ {
         proxy_pass   http://localhost:3000/;
     }

为什么改成这样就可以去掉/api?不急,我写了使用手册:nginx配置proxy_pass(超简单公式记忆法)

代理路径alias与root


有时候我们不想要一个项目直接放在80端口的/请求上,这样我们的服务器不能做更多的事,我们代理的时候可以选择alias和root,其实没什么区别就是怕不区分明白会乱掉,觉得哪个好用就只用一个就好了。

用alias


因为我们不想使用/,因此我们要添加一个服务名,比如把我们的/请求换成/home。

开始代理静态入口,注意我把root换成了alias,alias表示遇到/home请求我们就去alias后面的内容也就是html文件夹找内容,如果是root就是root后面的内容+location后面的内容去html/home找,这就是两者区别。

 location /home {
     alias html;
     index index.html index.htm;
 }

用root

  1. 把alias换成了root,就是我们要在html中创建home文件夹,把静态入口放入,其他都一致。
    location /home {
        alias html;
        index index.html index.htm;
    }

注意


代理路径很容易出现一个问题,就是静态资源访问不到了,包括js、css、图片等,因为路径的问题,例如react打包的dist项目,静态文件是以/绝对路径的形式访问,我们需要单独给它们添加代理。


下面以index.html、js文件、css文件为例。


比如你要把它们都放在html文件夹。

     location /test{
         alias html;
         index index.html;
     }
     location ~ .*\.(js|css)?$ {
         root html;
     }

又比如你要把它们都放在html中的test文件夹。


     location /test{
         root html;
         index index.html;
     }
     location ~ .*\.(js|css)?$ {
         root html/test;
     }


相关文章
|
4月前
|
存储 缓存 负载均衡
Nginx入门笔记
Nginx入门笔记
163 0
|
1月前
|
应用服务中间件 nginx C语言
Nginx入门 -- 基本数据结构中之ngx_str_t,ngx_array_t
这两种数据结构是Nginx自定义数据类型的例子,它们证明了Nginx设计者在构建一个为高并发和高性能优化的web服务器时的精确和高效。理解这些数据结构是深入学习Nginx内部机制的基础,同时也是扩展和开发Nginx模块不可或缺的一部分知识。
26 1
|
3月前
|
监控 前端开发 应用服务中间件
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽(2)
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽
62 1
|
3月前
|
负载均衡 前端开发 应用服务中间件
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽(1)
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽
121 1
|
4月前
|
缓存 负载均衡 应用服务中间件
nginx(NGINX)详细下载安装及使用教程(非常适合入门)
nginx(NGINX)详细下载安装及使用教程(非常适合入门)
|
12月前
|
缓存 负载均衡 应用服务中间件
Nginx__基础入门篇
Nginx__基础入门篇
|
9月前
|
负载均衡 网络协议 应用服务中间件
当当网266买来的1399页Nginx笔记,原来我入门都不算
Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点(俄文:Рамблер)开发的,第一个公开版本0.1.0发布于2004年10月4日。
当当网266买来的1399页Nginx笔记,原来我入门都不算
|
4月前
|
负载均衡 算法 应用服务中间件
Nginx+Tomcat实现反向代理与负载均衡入门
Nginx+Tomcat实现反向代理与负载均衡入门
233 0
|
11月前
|
缓存 负载均衡 应用服务中间件
Nginx从入门到精通(超级详细)(下)
Nginx从入门到精通(超级详细)(下)
|
11月前
|
负载均衡 前端开发 应用服务中间件
Nginx从入门到精通(超级详细)(上)
Nginx从入门到精通(超级详细)(上)