NodeServe:构建高效静态文件服务器的完美指南
![NodeServe:构建高效静态文件服务器的完美指南](https://static001.geekbang.org/infoq/7e/7ec8fcbaa206376bdb585d4173491ec8.jpeg)
读过这篇文章《用Node.js吭哧吭哧撸一个运动主页》的同学肯定知道,前段时间我搭了一个运动页面。现在我有个想法就是把它用 Docker 打包镜像推送到 Docker 官方仓库,像《前端切图仔入门Docker,三分钟上线自己的博客平台》文章中搭建博客系统一样,提供一个运动主页的 Docker 镜像,方便有想法的同学三分钟部署自己的运动主页。
什么是静态文件服务器
作为前端搬砖工,一定接触过静态文件服务器。静态文件服务器它的工作是将静态文件通过 http/https 传输给客户端。静态文件又是什么?静态文件是指内容不需要动态生成的文件,如:图片、CSS 文件、JS 文件等等文件。我们常用的静态文件服务器有webpack-dev-server
这也是为什么我们能在本地开发环境可以通过链接访问页面的原因,还有就是Nginx
,一般线上环境使用它,因为它性能更加高效、稳定。
运动主页简单,完全没必要在 Docker 打包时再下载 Nginx 镜像打包进去,直接用 Node.js 实现静态文件服务器的功能即可。
功能介绍
我需要的静态服务器只需要一个功能:
当用户请求的内容是文件时,返回文件内容
项目静态文件结构是这样的:
详细文件结构请访问仓库地址。
启动项目
拉取项目:
下载依赖:
创建.env
文件,写入 Keep 帐号、密码:
最后,执行npm run serve
,项目即可启动。当我们直接访问
http://localhost:3000就能访问index.html
文件,index.html
文件内容如下:
![](https://static001.geekbang.org/infoq/24/24fe1ad87977d4dc7a7ae8b0d6216755.png)
代码实现
根据上文的需求描述,我们先用流程图
来设计一下我们的逻辑如何实现:
![](https://static001.geekbang.org/infoq/1d/1db265da3eab1c66ce234c300e909524.png)
静态文件服务器的实现思路还是很简单的:先判断资源存不存在
,不存在就直接报错,资源存在的话根据资源的类型返回对应的结果给客户端
就可以了。
Express 实现
运动主页非常简单,很多静态 JS、图片文件已放置在云端,index.html
文件只引用了一份本地的 JS 文件。不论是什么请求方式,当有请求路径存在/src
时都会走app.all('/src/*',()⇒{...})
。
不同的静态文件对应不同的请求头Content-Type
值,如:JS 文件对应application/javascript
、CSS 文件对应text/css
等等,点Content-Type类型可以查看还有哪些值。
Content-Type
标头目的是为了告诉客户端实际返回的内容的内容类型,以便客户端依据文件类型进行解析。
写一个能用的静态文件服务器还是简单的,这里依赖 Express 框架方便得多。原生模块实现有兴趣的同学可以去写写。
最后
文章中介绍实现了一个最简单能用的静态文件服务器
,如果开发一个完善的静态文件服务器还有非常多的功能要考虑,如:静态文件缓存、压缩等等。
另外还有一个真实案例给大家实践,有兴趣的同学clone
下来自己玩玩。
如果我的文章对你有帮助,您的👍就是对我的最大支持^_^。
欢迎围观朋友圈、加我微信拉您加入人类高质量前端交流群
版权声明: 本文为 InfoQ 作者【凌览】的原创文章。
原文链接:【http://xie.infoq.cn/article/34d3d20df9a944502df7b62cc】。文章转载请联系作者。
评论