写点什么

NodeServe:构建高效静态文件服务器的完美指南

作者:凌览
  • 2023-09-07
    浙江
  • 本文字数:1756 字

    阅读完需:约 6 分钟

NodeServe:构建高效静态文件服务器的完美指南

读过这篇文章《用Node.js吭哧吭哧撸一个运动主页》的同学肯定知道,前段时间我搭了一个运动页面。现在我有个想法就是把它用 Docker 打包镜像推送到 Docker 官方仓库,像《前端切图仔入门Docker,三分钟上线自己的博客平台》文章中搭建博客系统一样,提供一个运动主页的 Docker 镜像,方便有想法的同学三分钟部署自己的运动主页。

什么是静态文件服务器

作为前端搬砖工,一定接触过静态文件服务器。静态文件服务器它的工作是将静态文件通过 http/https 传输给客户端。静态文件又是什么?静态文件是指内容不需要动态生成的文件,如:图片、CSS 文件、JS 文件等等文件。我们常用的静态文件服务器有webpack-dev-server这也是为什么我们能在本地开发环境可以通过链接访问页面的原因,还有就是Nginx,一般线上环境使用它,因为它性能更加高效、稳定。


运动主页简单,完全没必要在 Docker 打包时再下载 Nginx 镜像打包进去,直接用 Node.js 实现静态文件服务器的功能即可。

功能介绍

我需要的静态服务器只需要一个功能:


  • 当用户请求的内容是文件时,返回文件内容


项目静态文件结构是这样的:


client├─src│  └─js文件└─index.html
复制代码


详细文件结构请访问仓库地址

启动项目

拉取项目:


git clone https://github.com/CatsAndMice/keep
复制代码


下载依赖:


npm i 
复制代码


创建.env文件,写入 Keep 帐号、密码:


MOBILE="Keep帐号"PASSWORD="Keep密码"
复制代码


最后,执行npm run serve,项目即可启动。当我们直接访问


http://localhost:3000就能访问index.html文件,index.html文件内容如下:


代码实现

根据上文的需求描述,我们先用流程图来设计一下我们的逻辑如何实现:



静态文件服务器的实现思路还是很简单的:先判断资源存不存在,不存在就直接报错,资源存在的话根据资源的类型返回对应的结果给客户端就可以了。

Express 实现

运动主页非常简单,很多静态 JS、图片文件已放置在云端,index.html文件只引用了一份本地的 JS 文件。不论是什么请求方式,当有请求路径存在/src时都会走app.all('/src/*',()⇒{...})


不同的静态文件对应不同的请求头Content-Type值,如:JS 文件对应application/javascript 、CSS 文件对应text/css等等,点Content-Type类型可以查看还有哪些值。


Content-Type 标头目的是为了告诉客户端实际返回的内容的内容类型,以便客户端依据文件类型进行解析。


const express = require('express');const { getTotal, getFirstPageRecentUpdates } = require("./src")const { to } = require('await-to-js');const path = require('path');const fs = require('node:fs')const app = express();const port = 3000;//获取client文件夹的绝对路径const htmlPath = path.join(__dirname, './client');//请求头Content-Type值const contentType = {    '.js': 'application/javascript;charset=utf8'}
//省略其他逻辑
//路径存在"/src",执行下列代码块逻辑app.all('/src/*', (req, res) => { const { url } = req; const filePath = htmlPath + url; //判断文件是否存在 if (fs.existsSync(filePath)) { const extname = path.extname(filePath); res.setHeader('Content-Type', contentType[extname]); const content = fs.readFileSync(filePath); res.send(content); return } //不存在,浏览器状态码返回404 res.sendStatus('404')})
//访问http://localhost:3000时,执行这部分逻辑返回index.html内容app.get('/', async (req, res) => { res.setHeader('Content-Type', 'text/html;charset=utf8'); const readHtmlPath = htmlPath + '/index.html' const html = fs.readFileSync(readHtmlPath) res.send(html)})
app.listen(port, () => { console.log('服务已开启');})
复制代码


写一个能用的静态文件服务器还是简单的,这里依赖 Express 框架方便得多。原生模块实现有兴趣的同学可以去写写。

最后

文章中介绍实现了一个最简单能用的静态文件服务器,如果开发一个完善的静态文件服务器还有非常多的功能要考虑,如:静态文件缓存、压缩等等。


另外还有一个真实案例给大家实践,有兴趣的同学clone下来自己玩玩。


如果我的文章对你有帮助,您的👍就是对我的最大支持^_^。


欢迎围观朋友圈、加我微信拉您加入人类高质量前端交流群

发布于: 刚刚阅读数: 4
用户头像

凌览

关注

还未添加个人签名 2023-09-06 加入

还未添加个人简介

评论

发布
暂无评论
NodeServe:构建高效静态文件服务器的完美指南_node.js_凌览_InfoQ写作社区