版权声明：感谢您的阅读，本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/weixin_43249693/article/details/82812056
最近在需要用到反向代理来跨域请求到数据。第一次用nginx，小白一个，索性就从头开始把用到的都集中记录在一起。有哪里说的不对或者不清楚的，还请大家指出来，我会及时做对应的修改。
本文涉及：
- nginx的安装
- 启动
- 改端口
- 反向代理
- gzip
一 nginx的安装
其实不用安装，从官网下载对应版本就好。我下载的是nginx/Windows-1.15.3。
下载完成后直接解压不需要安装。
注意，不要有中文路径。
二 启动
在nginx的根目录打开cmd 输入start nginx启动nginx（此时需要注意，不要直接点击nginx.exe来启动），启动成功或者失败都会有一个黑窗口闪一下，所以看不出来是否成功。可以通过：
http://localhost:80看是否有nginx的成功提示- 查看任务管理器 -> 进程 看有没有nginx判断启动成功与否。
若启动成功，我们就可以把我们的页面放到 nginx -> html文件夹下，直接打开了。
若没有启动功能。我们进入到nginx -> logs ->error.log查看错误日志。
我第一次启动不成功，日志记录如下：
2018/09/20 09:00:16 [emerg] 1076#2260: bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a socket in a way forbidden by its access permissions)
实际是我的80端口被占用，可以通过命令行查看指定端口是否被占用，但是简单粗暴的就是咱们直接把nginx的默认端口改了就好了。所以有了下面的第三部分，改端口。 - 我自己的常用命令：
- start nginx 启动nginx
- nginx -s reload 重新加载配置文件
- nginx -s quit 关闭
- nginx -s stop 快速关闭
quit和stop的区别：
- quit 在关闭前完成已经接收的连接请求
- stop 快速关闭，不管连接
三 改nginx端口
进入conf -> nginx.conf 配置文件
注意： 修改完配置文件，记得要nginx -s reload，配置才会生效
http {
...
server {
listen 7077; //默认是80，这里我改为7077端口，我只需要打开http://localhost:7077就可以看到nginx启动的页面了。
...
}
}
四 反向代理
同样还是conf -> nginx.conf中的server
http {
...
server {
listen 7077;
...
location /api { // 用 /api 来代替下面的 http://10.200.5.73:1411 我们在程序里只需要把http://10.200.5.73:1411写成/api就可以拿到跨域的数据了
rewrite ^/api/(.*)$ /$1 break; // 重写 URL
proxy_pass http://10.200.5.73:1411;
}
}
}
五 gzip
用gzip，我主要是为了减少vue加载资源过大，首页白屏时间略长的问题，后面我还会专门写一篇优化vue资源大小的文章。
同样还是conf -> nginx.conf中的server
http {
...
gzip on; //把原本的gzip的#注释去掉
gzip_static on;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-http-php image/jpeg image/gif image/png;
server {
listen 7077;
...
location /api {
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://10.200.5.73:1411;
}
}
}