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)?$ 等等类似的 注释掉
为人:谦逊、激情、博学、审问、慎思、明辨、 笃行
学问:纸上得来终觉浅,绝知此事要躬行
为事:工欲善其事,必先利其器。
态度:道阻且长,行则将至;行而不辍,未来可期
.....................................................................
------- 桃之夭夭,灼灼其华。之子于归,宜其室家。 ---------------
------- 桃之夭夭,有蕡其实。之子于归,宜其家室。 ---------------
------- 桃之夭夭,其叶蓁蓁。之子于归,宜其家人。 ---------------
=====================================================================
* 博客文章部分截图及内容来自于学习的书本及相应培训课程以及网络其他博客,仅做学习讨论之用,不做商业用途。
* 如有侵权,马上联系我,我立马删除对应链接。 * @author Alan -liu * @Email no008@foxmail.com
转载请标注出处! ✧*꧁一品堂.技术学习笔记꧂*✧. ---> https://www.cnblogs.com/ios9/
学问:纸上得来终觉浅,绝知此事要躬行
为事:工欲善其事,必先利其器。
态度:道阻且长,行则将至;行而不辍,未来可期
.....................................................................
------- 桃之夭夭,灼灼其华。之子于归,宜其室家。 ---------------
------- 桃之夭夭,有蕡其实。之子于归,宜其家室。 ---------------
------- 桃之夭夭,其叶蓁蓁。之子于归,宜其家人。 ---------------
=====================================================================
* 博客文章部分截图及内容来自于学习的书本及相应培训课程以及网络其他博客,仅做学习讨论之用,不做商业用途。
* 如有侵权,马上联系我,我立马删除对应链接。 * @author Alan -liu * @Email no008@foxmail.com
转载请标注出处! ✧*꧁一品堂.技术学习笔记꧂*✧. ---> https://www.cnblogs.com/ios9/