搭建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)?$ 等等类似的 注释掉
为人：谦逊、激情、博学、审问、慎思、明辨、 笃行
学问：纸上得来终觉浅，绝知此事要躬行
为事：工欲善其事，必先利其器。
态度：道阻且长，行则将至；行而不辍，未来可期
.....................................................................
------- 换了个头像，静静的想，默默的思恋，一丝淡淡的忧伤 ----------
------- 桃之夭夭，灼灼其华。之子于归，宜其室家。 ---------------
------- 桃之夭夭，有蕡其实。之子于归，宜其家室。 ---------------
------- 桃之夭夭，其叶蓁蓁。之子于归，宜其家人。 ---------------
=====================================================================
转载请标注出处！
