nginx配置访问本地静态资源
  yUWY9PE8mPmq 2023年11月02日 34 0


下面说说如何在windows下使用​​nginx​​作为静态资源服务器,

1、修改config目录下,这个配置文件,基本上所有的配置都在这里面做,

nginx配置访问本地静态资源_nginx

 2、主要的配置参数如下,一些无关的参数我直接去掉了,注意,里面的location可以配置多个,这样可以根据业务的需要指定相关的路径方便后续的运维和管理,

server {
listen 80; #nginx监听的端口
server_name localhost; #拦截的用户访问路径
#charset koi8-r;
#access_log logs/host.access.log main;
# 访问本地绝对路径下的静态html
location / {
#root html;
root D:/tools/nginx/2/html1;
index index.html index.htm;
}
#访问路径拼接 upload 访问本地绝对路径下的某图片
location /upload/ {
alias D:/tools/nginx/2/image1/;
autoindex on;
}
#访问路径拼接 /pages 访问本地绝绝对路径下的静态html
location /pages/ {
alias D:/tools/nginx/2/html1/;
autoindex on;
}
# 精细化 配置相关静态资源参数,优化访问静态资源文件
location ~ .*\.(gif|jpg|jpeg|png)$ {
expires 24h;
root D:/tools/nginx/2/image1/;#指定图片存放路径
proxy_store on;
proxy_temp_path D:/tools/nginx/2/image1/;#图片访问路径
proxy_redirect off;
proxy_set_header Host 127.0.0.1;
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端口
}
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
3、正常情况下,双击exe启动文件后,访问localhost:80,nginx默认回去找到nginx的html下面的index.html,

第一种配置,使用本地绝对路径,将静态的html放到你的这个目录下,我这里的路径是:D:/tools/nginx/2/html1;
所以配置如下:
# 访问本地绝对路径下的静态html
location / {
#root html;
root D:/tools/nginx/2/html1;
index index.html index.htm;
}

然后,在黑窗口:nginx -s reload 一下:可以看到访问的是自己目录下的页面,

nginx配置访问本地静态资源_html_02

 4、当然,为了保证一定的安全性,也可以在访问的地址后拼接上一个字符串,比如我这里加了page,总体的配置如下,

#访问路径拼接 /pages 访问本地绝绝对路径下的静态html
location /pages/ {
alias D:/tools/nginx/2/html1/;
autoindex on;
}

再次访问,仍然可以访问到该目录下的html,

nginx配置访问本地静态资源_html_03

5、图片的访问,这里我使用了两种方式,第一种和配置访问静态html相似,使用绝对路径进行访问,

#访问路径拼接 upload 访问本地绝对路径下的某图片
location /upload/ {
alias D:/tools/nginx/2/image1/;
autoindex on;
}

浏览器访问一下,可以看到,能够成功访问到图片,

nginx配置访问本地静态资源_绝对路径_04

再看第二种方式,通常为了优化nginx的静态资源访问,我们需要做一下参数调优配置,例如对图片进行压缩,缓存,添加用户名和密码的安全校验等,都可以直接进行配置,如下,这个里面还可以继续添加其他的参数,大家可查阅相关资料进行学习研究,

# 精细化 配置相关静态资源参数,优化访问静态资源文件
location ~ .*\.(gif|jpg|jpeg|png)$ {
expires 24h;
root D:/tools/nginx/2/image1/;#指定图片存放路径
proxy_store on;
proxy_temp_path D:/tools/nginx/2/image1/;#图片访问路径
proxy_redirect off;
proxy_set_header Host 127.0.0.1;
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端口
}
}

然后我们访问一下试试,可以看到,通过这个方式仍然可以成功访问到图片,因为我们在配置参数里面做了路径代理的配置,

nginx配置访问本地静态资源_绝对路径_05

总结:这里说一个应用场景,在一些大型的电商网站中,有一些商品详情页面上,需要的聚合多种不同维度的数据,比如像下面一张图,

nginx配置访问本地静态资源_静态文件_06

大家试一下,初次进入某个商品详情页面,如果网速不是太好的话你会发现加载的速度是比较慢的,据说,为了解决这样的问题,后来许多架构师在这个问题上开始偏向于使用维度化数据聚合+缓存+页面静态化综合解决这个问题,其中静态化模板技术在这里得到了很好的应用,至于里面的详细内容大家可以找找资料学习一下,其主要的思想就是将包含了大量待渲染的数据根据相关的业务参数进行页面提前渲染成静态模板,通过nginx访问时可以大大提升访问的速度,当然,为了改善总体的页面渲染速度,页面静态化技术只是其中的一方面,背后的架构思想是很值得我们学习和探究的!


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

yUWY9PE8mPmq
作者其他文章 更多
最新推荐 更多