自己动手搭建一个简单的静态资源服务器

修改历史

修改日期	修改内容概述
2023-3-13	创建文章
2023-8-23	修改文章错别字、新增支持中文路径、弃用被官方标记为已过时的API，使用新API代替

自己动手搭建一个简单的静态资源服务器

介绍

​ 通过此文章的学习，可以自己使用NodeJs搭建一个简单的静态资源服务器，部署在云端后实现远程访问静态资源的目的。来实现通过网络在别处引用资源的目的。

比如你服务器有一个 名称为 avata.png 的图片，当你部署成功之后，可以使用 http://host:port/public/imgs/avata.png 的网络路径来进行访问这个图片资源。

目录结构：将脚本放入你想访问的文件夹内以后，在文件资源管理器的地址栏输入cmd，启动控制台 ，然后执行 node run 命令来启动静态资源服务器

一、涉及到的模块

1. http
2. path
3. 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);