读过这篇文章《用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下来本人玩玩。

如果我的文章对你有帮忙，您的就是对我的最大反对^_^。

欢送围观朋友圈、加我微信拉您退出人类高质量前端交换群