读过这篇文章《用 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
下来本人玩玩。
如果我的文章对你有帮忙,您的👍就是对我的最大反对 ^_^。
欢送围观朋友圈、加我微信拉您退出 人类高质量前端交换群