nginx学习笔记

nginx 安装

直接用brew安装，没有brew的自行安装

brew install nginx

nginx 基本命令

可以通过

nginx -h

查看

sudo nginx -t

查看nginx配置文件有没有语法错误，切记一定要用管理员权限运行，不然会出现错误

sudo nginx

这个就可以开启你的nginx

sudo nginx -s reload

可以重启你的nginx
你还可以把reload替换成stop, quit, reopen, reload

sudo nginx -c filename

可以设置nginx的配置文件的目录，就是nginx.conf的位置

nginx 简单配置

server{
	# 监听的端口
	listen 80;
	# 域名,当两个项目共用一个端口的时候就可以通过不同的server_name来访问到不同的服务器资源
	server_name test.cn;
	# 资源的根目录,如果资源在用户的文件夹里面的话可能会没有访问资源的权限,需要给文件设置777权限
	# 你可以通过pwd目录查看当前的目录
	root /html/demo;
	# 如果网址上没有对应的资源地址打开的页面
    index index.js index.html index.htm;
}

这是一个简单的nginx配置，你需要把配置写在你对应的nginx.conf里面，你也可以在nginx文件夹下新建一个文件夹servers然后在nginx.conf中引入这个文件夹下的文件,至于文件名你可以用test.conf

include servers/*;

你只需要放一个html文件放在 /html/demo 下就可以通过127.0.0.1访问了，如果你想通过 test.cn 访问的话你需要设置一个hosts

127.0.0.1 test.cn

如果发现出现403的错误的话可能有两种情况

• 可能在你的root配置的地址里面找不到对应的index
• 还有一种可能就是没有对应的权限了。

nginx 坑之403错误

你可以查看一下你要访问的文件夹的对应权限ll命令就可以查看当前目录下的所有的权限了，关于权限的修改和设置你可以查看这个文章

mac 查看、修改文件权限的命令

然后之前我是在桌面上建的文件夹，然后就算修改了权限后也不可以访问，是因为他的上一级文件夹没有权限进不来，如果你在最外面的 / 目录下建立文件夹然后nginx就可以访问到，如果你想访问你这个用户下面的文件，你可以用node在你目录下开个服务然后用nginx反向代理过去。

nginx 反向代理

nginx的简单的反向代理就很简单

而且还不会出现资源访问的问题

首先你需要开一个node服务在8888端口

可以不需要之前写的root

然后在server里面加上一段

然后你就可以直接通过test.cn访问到你的node服务了

记得重启一下nginx

server {
    # ...前面的代码
    location / {
        proxy_pass http://127.0.0.1:8888;
    }
}

然后我理解反向代理的作用是，如果你的服务器上有两个项目都需要跑在80端口上，然后你就可以通过nginx配置不同的server_name来访问不同的服务，然后还可以解决负载均衡等等的问题

关于具体的配置你可以看看Nginx服务器的反向代理proxy_pass配置方法讲解

nginx 解决跨域

nginx 解决跨域其实就是nginx反向代理的一个实现，他的实现原理是，你的后端跑在localhost:81端口，然后你的前端是跑在localhost:82端口，当你前端调用后端接口的时候由于端口不同浏览器会报跨域的错误，然后你需要把两个项目跑在同一个端口上才可以，这样你就会有疑问，同样的域名，一个端口怎么能跑两个项目，我们实现的方法是监听一下83端口然后如果你的请求的url是由 /api 开头的就把它发送到81上去，否则就发送到82端口去。

具体的配置就是

server{
	# 监听的端口
	listen 83;
	server_name localhost;
    location /api {
    	rewrite ^/api$ / break;
        proxy_pass http://localhost:81;
    }
    location / {
        proxy_pass http://localhost:82;
    }
}

然后你的ajax可以这么写

	$.get({
		url: 'http://localhost:83/api',
		success: (data) => {
			console.log(data);
		} 
	})

nginx的配置要说明的是location后面的 / 和 /api 的意思是拦截url为这两个开头的请求，然后 rewrite 是Nginx的URL重写

    	rewrite ^/api$ / break;

• rewrite是关键字

• 第二项是一个正则，我这里是匹配 /api 这个字符串

• 然后第三项是第二项匹配到的正则需要替换成的字符串，我这里的意思是吧 /api 替换成 /

• 然后第四项是一个flag标记

• flag标记说明：

  last #本条规则匹配完成后，继续向下匹配新的location URI规则

  break #本条规则匹配完成即终止，不再匹配后面的任何规则

  redirect #返回302临时重定向，浏览器地址会显示跳转后的URL地址

  permanent #返回301永久重定向，浏览器地址栏会显示跳转后的URL地址

这样我就可以通过http://localhost:83/index.html访问到我的前端界面然后跨域请求到对应的接口了

参考资料

nginx反向代理-解决前端跨域问题
nginx配置location总结及rewrite规则写法

后来做项目的时候发现

rewrite ^/api$ / break;

只会吧/api替换成/,/api/data还是请求的/api/data的接口

然后改成了

rewrite ^/api/(.*)$ /$1 break;

如果/api/后面还有东西，就替换成/加上之前api后面的东西

我的博客