文章目录
- 修改历史
- 自己动手搭建一个简单的静态资源服务器
- 介绍
- 一、涉及到的模块
- 备注:
- 二、代码结构
- 三、具体代码(2023年8月23日更新版)
修改历史
修改日期 | 修改内容概述 |
2023-3-13 | 创建文章 |
2023-8-23 | 修改文章错别字、新增支持中文路径、弃用被官方标记为 |
自己动手搭建一个简单的静态资源服务器
介绍
通过此文章的学习,可以自己使用NodeJs搭建一个简单的静态资源服务器,部署在云端后实现远程访问静态资源的目的。来实现通过网络在别处引用资源的目的。
比如你服务器有一个 名称为 avata.png 的图片,当你部署成功之后,可以使用 http://host:port/public/imgs/avata.png 的网络路径来进行访问这个图片资源。
目录结构:将脚本放入你想访问的文件夹内以后,在文件资源管理器的地址栏输入cmd,启动控制台 ,然后执行 node run 命令来启动静态资源服务器
一、涉及到的模块
- http
- path
- fs
备注:
2023-3-31代码逻辑(
已完成支持中文,参见2023年8月23日更新):对中文支持不友好,访问中文路径由于浏览器会自动进行URL编码,会导致后台无法正确识别,从而导致访问不到中文路径。不想引入额外的第三方库,所以暂时只能访问中文路径,对中文请使用拼音代替。
——————
2023年8月23日更新:使用decodeURI
对请求的中文进行转码,使程序可以支持中文文件名
二、代码结构
三、具体代码(2023年8月23日更新版)
// 做一个静态资源服务器
const http = require('http');
const path = require('path');
const fs = require('fs');
const port = 8848; // 要监听的端口号,可以根据自己的需要进行修改
/**
* 获取文件的内容,文件不存在则返回 null
* @param {文件的地址栏路径} url
* @returns 文件的内容
*/
const getFileContent = async (filename) => {
// 1. 获取文件状态,文件不存在获取到的是 null
const stat = await getStat(filename);
if (!stat) {
// 文件不存在直接返回 `null`
return null;
} else if (stat.isDirectory()) {
// 如果文件是个目录,则默认定向到 目录下的 index.html 文件
filename = path.resolve(filename, "index.html");
// 拼接好完整路径后再次调用该方法来获取文件的内容,但应该设置好方法的出口,防止无限递归
return await getFileContent(filename);
}
else {
// Run here indicates that the file exists
return await fs.promises.readFile(filename);
}
}
/**
* 获取文件状态,不存在则返回 null
* @param {完整文件路径} filename
* @returns 文件的状态信息对象 Stat
*/
const getStat = async (filename) => {
try {
return await fs.promises.stat(filename);
}
catch {
return null;
}
}
const handler = async (req, res) => {
// 如果后面跟的路径是 / 开头的,则会定位到根目录下进行查找
// 2023-8-23 update begin
/* origin
const userPath = url.parse(req.url); url.parse 被标记为已弃用
let filename = path.resolve(__dirname, "public", userPath.substr(1)); substr 被标记为已弃用
*/
const userPath = decodeURI(new URL(req.url, `http://${req.headers.host}`).pathname);
let filename = path.resolve(__dirname, "public", userPath.substring(1));
// 2023-8-23 update end
const buffer = await getFileContent(filename);
if (buffer) {
res.write(buffer);
} else {
res.statusCode = 404;
res.write("Resource not found!!!");
}
res.end();
};
const server = http.createServer(handler);
server.on('listening', () => {
console.log('listen start', port);
})
server.listen(port);