nginx基础使用

ngninx基础使用

项目中很多地方都用到了nginx，但是经常忘记配置，每次使用几乎都是重新来过。今天就瞎几把写点东西。希望对自己日后有用。

基础vue项目部署

效果：用户直接访问 http://127.0.0.1:8080
nginx.conf 配置文件中的http里面添加一个server即可

nginx.conf

server {
        listen       8080;
        server_name  user;
		gzip on;  
		#开启gzip压缩功能
		gzip_min_length 1k;
		#设置允许压缩的页面最小字节数，页面字节数从header头的content-length中获取。默认值是0,不管页面多大都进行压缩。建议设置成大于1k。如果小于1k可能会越压越大。
		gzip_buffers 4 16k;
		#压缩缓冲区大小。表示申请4个单位为16k的内容作为压缩结果流缓存，默认值是申请与原始数据大小相同的内存空间来存储gzip压缩结果。
		gzip_http_version 1.0;
		#压缩版本（默认1.1，前端为squid2.5时使用1.0）用于设置识别http协议版本，默认是1.1,目前大部分浏览器已经支持gzip解压，使用默认即可。
		gzip_comp_level 2;
		#压缩比率。用来指定gzip压缩比，1压缩比量小，处理速度快；9压缩比量大，传输速度快，但处理最慢，也必将消耗cpu资源。
		gzip_types text/plain application/x-javascript text/css application/xml;
		#用来指定压缩的类型，“text/html”类型总是会被压缩。
		gzip_vary on;
		#vary header支持。该选项可以让前端的缓存服务器缓存经过gzip压缩的页面，例如用squid缓存经过nginx压缩的数据。
		
		location / {
			# 以下两种皆可
            #root   F:/nignx/nginx-1.18.0/html/user;
            root   /html/user;
            index  index.html index.htm;
			if (!-e $request_filename) {
                rewrite ^(.*)$ /index.html?s=$1 last;
                break;
            }
        }
    }

vue项目二层代理

效果：用户直接访问 http://127.0.0.1:8080/user
与基础代理的不同是两个server，如果nginx二层代理配置为/user，则打包时需要配置 publicPath:’/user’；
核心思想是，用户浏览器访问的路径要能匹配经过nginx代理后的vue项目的访问路由
nginx.conf

server {
        listen       18080;
        server_name  user;
		gzip on;  
		#开启gzip压缩功能
		gzip_min_length 1k;
		#设置允许压缩的页面最小字节数，页面字节数从header头的content-length中获取。默认值是0,不管页面多大都进行压缩。建议设置成大于1k。如果小于1k可能会越压越大。
		gzip_buffers 4 16k;
		#压缩缓冲区大小。表示申请4个单位为16k的内容作为压缩结果流缓存，默认值是申请与原始数据大小相同的内存空间来存储gzip压缩结果。
		gzip_http_version 1.0;
		#压缩版本（默认1.1，前端为squid2.5时使用1.0）用于设置识别http协议版本，默认是1.1,目前大部分浏览器已经支持gzip解压，使用默认即可。
		gzip_comp_level 2;
		#压缩比率。用来指定gzip压缩比，1压缩比量小，处理速度快；9压缩比量大，传输速度快，但处理最慢，也必将消耗cpu资源。
		gzip_types text/plain application/x-javascript text/css application/xml;
		#用来指定压缩的类型，“text/html”类型总是会被压缩。
		gzip_vary on;
		#vary header支持。该选项可以让前端的缓存服务器缓存经过gzip压缩的页面，例如用squid缓存经过nginx压缩的数据。
		
		location / {
            root   F:/nignx/nginx-1.18.0/html/user;
            index  index.html index.htm;
			if (!-e $request_filename) {
                rewrite ^(.*)$ /index.html?s=$1 last;
                break;
            }
        }
    }

	# 监听 8080 端口
    server {
        listen       8080;
        server_name  127.0.0.1;
		# vue项目二次代理，打包时需要 在vue.config.js 里面配置 publicPath:'/user',
		location  /user {
            proxy_pass http://127.0.0.1:18080/;
		}

vue.config.js

接口代理

效果，原接口地址为：http://127.0.0.1:8093/test
代理后接口地址为：http://127.0.0.1:8093/api/test
nginx.conf配置中 http 添加一个 server

server {
        listen       8080;
        server_name  127.0.0.1;
		# 接口代理
		location ^~ /api/ {
            proxy_pass http://127.0.0.1:8093/;
			proxy_set_header        Host 127.0.0.1;
			proxy_set_header        X-Real-IP $remote_addr;
			proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
		}
    }

mysql数据库代理

效果：用户不再通过直接访问数据库端口，而是访问经过nginx代理过后的端口，
场景：A服务器不能直接访问C服务器的数据库，但是B服务器能够访问，而且A服务器能够访问B服务器，此时在B服务器上配置C服务器的数据库代理即可。
与接口，vue项目不同的是数据库不在是配置http,而是添加一个stream配置

第一步，在nginx.conf同层添加一个db.conf文件，文件信息为

server {
    #注意端口不能跟mysql监听的一样
    listen 8080; 
    proxy_pass db;
}
# 负载的实际端口和地址  也可以其他能访问的地址，不一定是本机
upstream db {
    server 172.27.110.245:3306;
    server 172.27.110.246:3306;
}

第二步，在nginx.conf文件上添加一个stream配置，注意的是该stream与http同级。

# 数据库代理
stream{
    include db.conf;
}

文件代理

效果：用户直接在浏览器就可以浏览服务器目录结构，下载服务器文件。
场景：每次下载日志文件都需要使用xftp连接很不方便
方案：nginx.conf文件的http配置里面添加一个server配置。用户在浏览器直接访问http://127.0.0.1:8081

	# 监听 8081 端口
    server {
        listen       8081;
        server_name  127.0.0.1;
		#配置允许跨域
		add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers X-Requested-With;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
		
		 location / {
            #windows代理本地文件夹
            #root C:;
            #linux代理本地文件夹
            root /;
            autoindex on;
        }
    }