nginx之ngnix搭建静态服务器,前端css,js,图片,视频等静态资源走nginx代理，实现Nginx缓存,压缩

搭建Nginx静态服务器的来由

由于前端随着业务的 扩展，打包速度越来越慢，因此考虑在前端打包之前,将vue静态资源放到nginx当中 ，直接请求NGINX静态资源。从而可以提高打包速度，也可以提高页面渲染速度。
首先我们是基于docker 进行安装nginx的 命令如下:
-d后台运行容器，并返回容器ID；
-p: 指定端口映射，格式为：主机(宿主)端口:容器端口
主机的目录 /home/nginx/resources映射到容器的 /home/nginx/resources

docker run -d -v /home/nginx/resources:/home/nginx/resources  -v /home/nginx/nginx.conf:/etc/nginx/nginx.conf  --name nginx_static -p 80:80 nginx  

我们来看一下nginx.conf里面是怎么写的？

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #开启nginx Gzip压缩
    gzip  on;
	#只有超过1k的文件才压缩
	gzip_min_length 1k;
	#说明哪些类型的文件在传输前进行压缩
	#image/jpeg类似的图片文件本身就已经就是压缩文件，对其gzip压缩后效果并不明显
	#gzip对于文本文件的效果极好
	gzip_types text/plain application/javascript text/css application/font-woff;
	#低版本IE禁用Gzip压缩
	gzip_disable "MSIE [1-6]\."
	#压缩使用的缓存，每个内存业为4k,申请32倍，一般写这个就行
	gzip_buffers 32 4k;
	#压轴的设置压缩级别1-9越大压缩比越高，但浪费的cpu资源也越多
	##设置压缩比率，最小为1，处理速度快，传输速度慢；9为最大压缩比，处理速度慢，传输速度快; 这里表示压缩级别，可以是0到9中的任一个，级别越高，压缩就越小，
	#节省了带宽资源，但同时也消耗CPU资源，所以一般折中为6
	#建议1-4即可
	gzip_comp_level 2;

    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80;#写内网端口，访问时用外网端口进行映射访问
        server_name  110.40.139.31;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
		#这个地方的意思其实是 http://ip:端口/static  开头的 都会 去找 这个/home/nginx/resources/目录下 /static 文件夹下的 东西
		location ^~ /static/ {
			expires 90d;#缓存有效时间90天
			alias /home/nginx/resources/; #这个地方必须用alias 不能root
		}
        location ~ .*\.(gif|jpg|jpeg|png)$ {
			expires 90d;
            root /home/nginx/resources/;#指定图片存放路径
            #access_log /home/nginx/resources/logs/images.log;#图片 日志路径
            proxy_store on;
            proxy_store_access user:rw group:rw all:rw;
            proxy_temp_path         /home/nginx/resources/;#代理临时路径
            proxy_redirect          off;
            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;
            client_max_body_size    10m;
            client_body_buffer_size 1280k;
            proxy_connect_timeout   900;
            proxy_send_timeout      900;
            proxy_read_timeout      900;
            proxy_buffer_size       40k;
            proxy_buffers           40 320k;
            proxy_busy_buffers_size 640k;
            proxy_temp_file_write_size 640k;
            if ( !-e $request_filename)
            {
                 #proxy_pass  http://127.0.0.1:80;#代理访问地址,和上面的端口一致
            }
        }
		location ~ .*\.(js|css)?$
        {
		  root /home/nginx/resources/;#指定图片存放路径
          expires 90d;
        }

        location / {
            root   html;
            index  index.html index.htm;
        }
        #其他非静态的可以通过前端配置代理dev-api 然后会到这，然后转发到后端接口地址
		location ^~ /dev-api/ {
			  proxy_pass http://110.40.139.31:8999/;#后端接口地址
			  proxy_set_header Host $host:$server_port;
			  proxy_set_header X-Real-IP $remote_addr;
			  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			  proxy_set_header X-Forwarded-Proto $scheme;
		}

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }


    }
}

基本上这样就完成了一个简单的nginx静态服务器了。可以满足缓存和压缩的功能，应为是内网环境嘛 所以没有考虑加密了。当然nginx这里也需要前端进行proxy代理 一个static 还有一个dev-api 才能正常nginx转发。后续其实也可以考虑ftp+nginx,nginx做ftp服务器上图片、文件等静态资源的代理，当请求ftp上的资源时，先被nginx截取请求，然后nginx会将请求转发到ftp服务器相应资源的目录

特别注意我们在location ^~ /static/ 这个的 时候 会进行正常转发 但是一旦这个资源部署访问resources里面资源并且后缀是gif|jpg|jpeg|png也就说底下配置的那个的时候 就会出现错误 他直接会访问resources里面了 而不是访问静态dist里面的文件 就会出现404的问题。这个地方特别注意 需要location ~ .*.(js|css)?$ 等等类似的 注释掉