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

* 博客文章部分截图及内容来自于学习的书本及相应培训课程以及网络其他博客，仅做学习讨论之用，不做商业用途。
* 如有侵权，马上联系我，我立马删除对应链接。
* @author Alan
* @Email no008@foxmail.com

搭建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)?$ 等等类似的 注释掉