Node.js一行代码实现静态文件服务器的方法步骤


Posted in Javascript onMay 07, 2019

静态文件服务器实现

nodejs不仅仅可以用来写服务端接口,用来做静态文件服务器替代nginx的功能, 也是分分钟可以搞定的。 话不多说,先上代码:

var server=http.createServer(function (req,res){
 fs.createReadStream(Path.resolve(__dirname,"."+req.url)).pipe(res);
})

在项目根目录建一个hello.html文件测试一下 hello.html内容如下:

<h1>hello,world</h1>

node app.js运行,打开浏览器访问一下: http://localhost/hello.html

Node.js一行代码实现静态文件服务器的方法步骤

我们再回头审视一下代码,的确就只有这么简单,这要归功于node Stream类 pipe方法的强大,fs.createReadStream读取本地文件创建一个可读流(ReadStream类的实例),再使用pipe导流到res响应流,res是一个http.ServerResponse类的实例,是一个可写流,继承自 Stream类

http.ServerResponse类的继承关系如下:

Node.js一行代码实现静态文件服务器的方法步骤

安全性考虑

上述代码实现静态文件服务器后,意味着项目根目录下所有的文件(递归)都可以通过浏览器直接访问和下载了,这样会带来一些安全性的问题,想想看,你的服务器端代码和配置文件都能通过浏览器直接下载了,因此需要在代码里加一些限制,例如只能访问特定的目录下的文件和特定扩展名的文件,这样还不够,参考OWasp Top 10安全风险(第4条-不安全的对象直接引用),攻击者仍然可以通过../../目录回溯的方法访问到其它目录,对于访问路径中包含..的也要全部过滤掉。

实现mine type

mime type是指http 响应头中的content-type字段,它决定了浏览器如何解析文件,是直接当做纯文件显示(text/plain),还是做为html文件渲染(text/html),或者当做二进制文件下载,没有输出正确的mine type,可能导致图片文件无法显示,字体文件无效,视频文件无法播放的问题。要实现起来也十分简单,只需要做一个映射表,不同文件扩展名,在响应头的content-type字段中输出对应的mine type就行了。

完整代码如下:

const http=require("http");
const Path=require("path");
const fs=require("fs");

var server=http.createServer(function (req,res){
 const fileName=Path.resolve(__dirname,"."+req.url);
 const extName=Path.extname(fileName).substr(1);

 if (fs.existsSync(fileName)) { //判断本地文件是否存在
  var mineTypeMap={
   html:'text/html;charset=utf-8',
   htm:'text/html;charset=utf-8',
   xml:"text/xml;charset=utf-8",
   png:"image/png",
   jpg:"image/jpeg",
   jpeg:"image/jpeg",
   gif:"image/gif",
   css:"text/css;charset=utf-8",
   txt:"text/plain;charset=utf-8",
   mp3:"audio/mpeg",
   mp4:"video/mp4",
   ico:"image/x-icon",
   tif:"image/tiff",
   svg:"image/svg+xml",
   zip:"application/zip",
   ttf:"font/ttf",
   woff:"font/woff",
   woff2:"font/woff2",

  }
  if (mineTypeMap[extName]) {
   res.setHeader('Content-Type', mineTypeMap[extName]);
  }
  var stream=fs.createReadStream(fileName);
  stream.pipe(res);
 }

 
})
server.listen(80);

实现gzip

对于文本类型的文件,如html,js,css,采用gzip压缩可以大幅减少传输量,提升服务器传输性能,当然这会损耗一点服务器的cpu性能做为代价,如果客户端浏览器支持gzip压缩,则会在请求头的accept-encoding中携带gzip关键字,用node自带的zlib类就可以实现gzip压缩了,只要在stream.pip实多加一层,先导流到gzip流,再导出到res流,当然,还要在响应头中添加Content-Encoding为gzip,这样浏览器才能正确识别到http body是采用gzip算法压缩的,并进行自动解压缩。

代码如下:

const zlib = require('zlib');

if (req.headers["accept-encoding"].indexOf("gzip")>=0 && (extName=="js" || extName=="css" || extName=="html"))) {
  res.setHeader('Content-Encoding', "gzip");
  const gzip = zlib.createGzip();
  stream.pipe(gzip).pipe(res);
 }

客户端缓存

http协议的缓存协商流程比较长,最终在响应头中生成expire(绝对时间)和cache-control(相对时间)两个用于控制缓存过期时间的参数,浏览器下次请求该文件时,分为以下几种情况:

  • 如果没到过期时间,浏览器不会请求文件直接读缓存
  • 如果已到过期时间,则会在请求头中last-modified字段携带文件的最后修改日期,如果对比时间戳与服务器文件一致,则HTTP 返回 304: Not Modified
  • 如果按下f5刷新,会在请求头中if-modified-since字段中携带缓存的过期时间,如果对比时间戳与服务器文件一致,则HTTP 返回 304: Not Modified
  • ctrl+f5刷新,请求头中携带 cache-control: no-cache,强制禁用缓存。重新下载文件

逻辑分支较多,但都是日期比对,搞清楚缓存协商过程比较容易写出来,有兴趣的同学可以自行实现

高性能静态文件服务器优化

如果要做一个高性能的静态文件服务器仅实现gzip和缓存协商是不够的,涉及到本地文件的频繁读取,高并发下I/O必定成为瓶颈,考虑到服务器上的文件是很少更新的, 可以用Buffer把文件流缓存到内存中,每次请求时先在内存中查找匹配项,如果命中了直接从内存中返回,避免了读取磁盘,gzip也不用压缩了,直接用压缩好的文件流返回,可以成倍的大幅提升性能。当然如果文件太多了,内存也会飙升,需要考虑淘汰算法,只缓存访问次数高的文件,剔除低访问量的文件。

采用fs.watch监控目录文件的变化,如果文件有更新,则删掉缓存。

小结

Node.js 内置的pipe方法可以非常简便的实现将服务器本地文件输出到http 响应流中,gzip压缩也同样可以通过pipe实现,再配合输出mine type 实现的静态服务器已经可以满足一般业务的使用。如果要实现高性能的静态文件服务器,还需要实现客户端缓存、服务端缓存功能(本文提供了思路,按图索骥也非难事)。

最后,推荐一下个人的开源项目, node.js web开发框架,已包含本文静态文件服务器的功能 webcontext: https://github.com/windyfancy/webcontext

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
微信小程序扫描二维码获取信息实例详解
May 07 #Javascript
Vue数据绑定简析小结
May 07 #Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 #Javascript
详解Vue、element-ui、axios实现省市区三级联动
May 07 #Javascript
webpack结合express实现自动刷新的方法
May 07 #Javascript
记录一次开发微信网页分享的步骤
May 07 #Javascript
Vue 幸运大转盘实现思路详解
May 06 #Javascript
You might like
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
php中目录,文件操作详谈
2007/03/19 PHP
php生成短网址示例
2014/05/05 PHP
php生成rss类用法实例
2015/04/14 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
javascript事件模型介绍
2016/05/31 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
vue-cli3全面配置详解
2018/11/14 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
three.js 如何制作魔方
2020/07/31 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python中zip和unzip数据的方法
2015/05/27 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
python实现发送和获取手机短信验证码
2016/01/15 Python
python的Tqdm模块的使用
2018/01/10 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
Python正则表达式学习小例子
2020/03/03 Python
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
应届生体育教师自荐信
2013/10/03 职场文书
财务主管的岗位职责
2013/12/30 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
高考标语大全
2014/06/05 职场文书
学校周年庆活动方案
2014/08/22 职场文书
抗洪救灾标语
2014/10/08 职场文书
小学优秀班主任材料
2014/12/17 职场文书
初中运动会前导词
2015/07/20 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
JavaScript中isPrototypeOf函数
2021/11/07 Javascript