当前位置: 开发笔记 > 前端 > 正文

深入理解nodejs搭建静态服务器(实现命令行)

作者：林老悲-- | 来源：互联网 | 2022-03-23 00:54

这篇文章主要介绍了深入理解nodejs搭建静态服务器(实现命令行)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

静态服务器

使用node搭建一个可在任何目录下通过命令启动的一个简单http静态服务器

完整代码链接

安装：npm install yg-server -g

启动：yg-server

可通过以上命令安装，启动，来看一下最终的效果

TODO

创建一个静态服务器
通过yargs来创建命令行工具
处理缓存
处理压缩

初始化

创建目录：mkdir static-server
进入到该目录：cd static-server
初始化项目：npm init
构建文件夹目录结构:

初始化静态服务器

首先在src目录下创建一个app.js
引入所有需要的包，非node自带的需要npm安装一下
初始化构造函数，options参数由命令行传入，后续会讲到
- this.host 主机名
- this.port 端口号
- this.rootPath 根目录
- this.cors 是否开启跨域
- this.openbrowser 是否自动打开浏览器

const http = require('http'); // http模块
const url = require('url');  // 解析路径
const path = require('path'); // path模块
const fs = require('fs');   // 文件处理模块
const mime = require('mime'); // 解析文件类型
const crypto = require('crypto'); // 加密模块
const zlib = require('zlib');   // 压缩
const openbrowser = require('open'); //自动启动浏览器 
const handlebars = require('handlebars'); // 模版
const templates = require('./templates'); // 用来渲染的模版文件

class StaticServer {
 constructor(options) {
  this.host = options.host;
  this.port = options.port;
  this.rootPath = process.cwd();
  this.cors = options.cors;
  this.openbrowser = options.openbrowser;
 }
}

处理错误响应

在写具体业务前，先封装几个处理响应的函数，分别是错误的响应处理，没有找到资源的响应处理，在后面会调用这么几个函数来做响应

处理错误
返回状态码500
返回错误信息

 responseError(req, res, err) {
  res.writeHead(500);
  res.end(`there is something wrong in th server! please try later!`);
 }

处理资源未找到的响应
返回状态码404
返回一个404html

 responseNotFound(req, res) {
  // 这里是用handlerbar处理了一个模版并返回，这个模版只是单纯的一个写着404html
  const html = handlebars.compile(templates.notFound)();
  res.writeHead(404, {
   'Content-Type': 'text/html'
  });
  res.end(html);
 }

处理缓存

在前面的一篇文章里我介绍过node处理缓存的几种方式，这里为了方便我只使用的协商缓存，通过ETag来做验证

 cacheHandler(req, res, filepath) {
  return new Promise((resolve, reject) => {
   const readStream = fs.createReadStream(filepath);
   const md5 = crypto.createHash('md5');
   const ifNOneMatch= req.headers['if-none-match'];
   readStream.on('data', data => {
    md5.update(data);
   });

   readStream.on('end', () => {
    let etag = md5.digest('hex');
    if (ifNOneMatch=== etag) {
     resolve(true);
    }
    resolve(etag);
   });

   readStream.on('error', err => {
    reject(err);
   });
  });
 }

处理压缩

通过请求头accept-encoding来判断浏览器支持的压缩方式
设置压缩响应头，并创建对文件的压缩方式

 compressHandler(req, res) {
  const acceptEncoding = req.headers['accept-encoding'];
  if (/\bgzip\b/.test(acceptEncoding)) {
   res.setHeader('Content-Encoding', 'gzip');
   return zlib.createGzip();
  } else if (/\bdeflate\b/.test(acceptEncoding)) {
   res.setHeader('Content-Encoding', 'deflate');
   return zlib.createDeflate();
  } else {
   return false;
  }
 }

启动静态服务器

添加一个启动服务器的方法
所有请求都交给this.requestHandler这个函数来处理
监听端口号

 start() {
  const server = http.createSercer((req, res) => this.requestHandler(req, res));
  server.listen(this.port, () => {
   if (this.openbrowser) {
    openbrowser(`http://${this.host}:${this.port}`);
   }
   console.log(`server started in http://${this.host}:${this.port}`);
  });
 }

请求处理

通过url模块解析请求路径，获取请求资源名
获取请求的文件路径
通过fs模块判断文件是否存在，这里分三种情况
- 请求路径是一个文件夹，则调用responseDirectory处理
- 请求路径是一个文件，则调用responseFile处理
- 如果请求的文件不存在，则调用responseNotFound处理

 requestHandler(req, res) {
  // 通过url模块解析请求路径，获取请求文件
  const { pathname } = url.parse(req.url);
  // 获取请求的文件路径
  const filepath = path.join(this.rootPath, pathname);

  // 判断文件是否存在
  fs.stat(filepath, (err, stat) => {
   if (!err) {
    if (stat.isDirectory()) {
     this.responseDirectory(req, res, filepath, pathname);
    } else {
     this.responseFile(req, res, filepath, stat);
    }
   } else {
    this.responseNotFound(req, res);
   }
  });
 }

处理请求的文件

每次返回文件前，先调用前面我们写的cacheHandler模块来处理缓存
如果有缓存则返回304
如果不存在缓存，则设置文件类型，etag，跨域响应头
调用compressHandler对返回的文件进行压缩处理
返回资源

 responseFile(req, res, filepath, stat) {
  this.cacheHandler(req, res, filepath).then(
   data => {
    if (data === true) {
     res.writeHead(304);
     res.end();
    } else {
     res.setHeader('Content-Type', mime.getType(filepath) + ';charset=utf-8');
     res.setHeader('Etag', data);

     this.cors && res.setHeader('Access-Control-Allow-Origin', '*');

     const compress = this.compressHandler(req, res);

     if (compress) {
      fs.createReadStream(filepath)
       .pipe(compress)
       .pipe(res);
     } else {
      fs.createReadStream(filepath).pipe(res);
     }
    }
   },
   error => {
    this.responseError(req, res, error);
   }
  );
 }

处理请求的文件夹

如果客户端请求的是一个文件夹，则返回的应该是该目录下的所有资源列表，而非一个具体的文件
通过fs.readdir可以获取到该文件夹下面所有的文件或文件夹
通过map来获取一个数组对象，是为了把该目录下的所有资源通过模版去渲染返回给客户端

 responseDirectory(req, res, filepath, pathname) {
  fs.readdir(filepath, (err, files) => {
   if (!err) {
    const fileList = files.map(file => {
     const isDirectory = fs.statSync(filepath + '/' + file).isDirectory();
     return {
      filename: file,
      url: path.join(pathname, file),
      isDirectory
     };
    });
    const html = handlebars.compile(templates.fileList)({ title: pathname, fileList });
    res.setHeader('Content-Type', 'text/html');
    res.end(html);
   }
  });

app.js完整代码

const http = require('http');
const url = require('url');
const path = require('path');
const fs = require('fs');
const mime = require('mime');
const crypto = require('crypto');
const zlib = require('zlib');
const openbrowser = require('open');
const handlebars = require('handlebars');
const templates = require('./templates');

class StaticServer {
 constructor(options) {
  this.host = options.host;
  this.port = options.port;
  this.rootPath = process.cwd();
  this.cors = options.cors;
  this.openbrowser = options.openbrowser;
 }

 /**
  * handler request
  * @param {*} req
  * @param {*} res
  */
 requestHandler(req, res) {
  const { pathname } = url.parse(req.url);
  const filepath = path.join(this.rootPath, pathname);

  // To check if a file exists
  fs.stat(filepath, (err, stat) => {
   if (!err) {
    if (stat.isDirectory()) {
     this.responseDirectory(req, res, filepath, pathname);
    } else {
     this.responseFile(req, res, filepath, stat);
    }
   } else {
    this.responseNotFound(req, res);
   }
  });
 }

 /**
  * Reads the contents of a directory , response files list to client
  * @param {*} req
  * @param {*} res
  * @param {*} filepath
  */
 responseDirectory(req, res, filepath, pathname) {
  fs.readdir(filepath, (err, files) => {
   if (!err) {
    const fileList = files.map(file => {
     const isDirectory = fs.statSync(filepath + '/' + file).isDirectory();
     return {
      filename: file,
      url: path.join(pathname, file),
      isDirectory
     };
    });
    const html = handlebars.compile(templates.fileList)({ title: pathname, fileList });
    res.setHeader('Content-Type', 'text/html');
    res.end(html);
   }
  });
 }

 /**
  * response resource
  * @param {*} req
  * @param {*} res
  * @param {*} filepath
  */
 async responseFile(req, res, filepath, stat) {
  this.cacheHandler(req, res, filepath).then(
   data => {
    if (data === true) {
     res.writeHead(304);
     res.end();
    } else {
     res.setHeader('Content-Type', mime.getType(filepath) + ';charset=utf-8');
     res.setHeader('Etag', data);

     this.cors && res.setHeader('Access-Control-Allow-Origin', '*');

     const compress = this.compressHandler(req, res);

     if (compress) {
      fs.createReadStream(filepath)
       .pipe(compress)
       .pipe(res);
     } else {
      fs.createReadStream(filepath).pipe(res);
     }
    }
   },
   error => {
    this.responseError(req, res, error);
   }
  );
 }

 /**
  * not found request file
  * @param {*} req
  * @param {*} res
  */
 responseNotFound(req, res) {
  const html = handlebars.compile(templates.notFound)();
  res.writeHead(404, {
   'Content-Type': 'text/html'
  });
  res.end(html);
 }

 /**
  * server error
  * @param {*} req
  * @param {*} res
  * @param {*} err
  */
 responseError(req, res, err) {
  res.writeHead(500);
  res.end(`there is something wrong in th server! please try later!`);
 }

 /**
  * To check if a file have cache
  * @param {*} req
  * @param {*} res
  * @param {*} filepath
  */
 cacheHandler(req, res, filepath) {
  return new Promise((resolve, reject) => {
   const readStream = fs.createReadStream(filepath);
   const md5 = crypto.createHash('md5');
   const ifNOneMatch= req.headers['if-none-match'];
   readStream.on('data', data => {
    md5.update(data);
   });

   readStream.on('end', () => {
    let etag = md5.digest('hex');
    if (ifNOneMatch=== etag) {
     resolve(true);
    }
    resolve(etag);
   });

   readStream.on('error', err => {
    reject(err);
   });
  });
 }

 /**
  * compress file
  * @param {*} req
  * @param {*} res
  */
 compressHandler(req, res) {
  const acceptEncoding = req.headers['accept-encoding'];
  if (/\bgzip\b/.test(acceptEncoding)) {
   res.setHeader('Content-Encoding', 'gzip');
   return zlib.createGzip();
  } else if (/\bdeflate\b/.test(acceptEncoding)) {
   res.setHeader('Content-Encoding', 'deflate');
   return zlib.createDeflate();
  } else {
   return false;
  }
 }

 /**
  * server start
  */
 start() {
  const server = http.createServer((req, res) => this.requestHandler(req, res));
  server.listen(this.port, () => {
   if (this.openbrowser) {
    openbrowser(`http://${this.host}:${this.port}`);
   }
   console.log(`server started in http://${this.host}:${this.port}`);
  });
 }
}

module.exports = StaticServer;

创建命令行工具

首先在bin目录下创建一个config.js
导出一些默认的配置

module.exports = {
 host: 'localhost',
 port: 3000,
 cors: true,
 openbrowser: true,
 index: 'index.html',
 charset: 'utf8'
};

然后创建一个static-server.js
这里设置的是一些可执行的命令
并实例化了我们最初在app.js里写的server类，将options作为参数传入
最后调用server.start()来启动我们的服务器
注意 #! /usr/bin/env node这一行不能省略哦

#! /usr/bin/env node

const yargs = require('yargs');
const path = require('path');
const cOnfig= require('./config');
const StaticServer = require('../src/app');
const pkg = require(path.join(__dirname, '..', 'package.json'));

const optiOns= yargs
 .version(pkg.name + '@' + pkg.version)
 .usage('yg-server [options]')
 .option('p', { alias: 'port', describe: '设置服务器端口号', type: 'number', default: config.port })
 .option('o', { alias: 'openbrowser', describe: '是否打开浏览器', type: 'boolean', default: config.openbrowser })
 .option('n', { alias: 'host', describe: '设置主机名', type: 'string', default: config.host })
 .option('c', { alias: 'cors', describe: '是否允许跨域', type: 'string', default: config.cors })
 .option('v', { alias: 'version', type: 'string' })
 .example('yg-server -p 8000 -o localhost', '在根目录开启监听8000端口的静态服务器')
 .help('h').argv;

const server = new StaticServer(options);

server.start();

入口文件

最后回到根目录下的index.js，将我们的模块导出，这样可以在根目录下通过node index来调试

module.exports = require('./bin/static-server');

配置命令

配置命令非常简单，进入到package.json文件里

加入一句话

 "bin": {
  "yg-server": "bin/static-server.js"
 },

yg-server是启动该服务器的命令，可以自己定义
然后执行npm link生成一个符号链接文件
这样你就可以通过命令来执行自己的服务器了
或者将包托管到npm上，然后全局安装，在任何目录下你都可以通过你设置的命令来开启一个静态服务器，在我们平时总会需要这样一个静态服务器

总结

写到这里基本上就写完了，另外还有几个模版文件，是用来在客户端展示的，可以看我的github，我就不贴了，只是一些html而已，你也可以自己设置，这个博客写多了是在是太卡了，字都打不动了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

推荐阅读

上传
全能终端工具推荐：高效、免费、易用

介绍一款备受好评的全能型终端工具——MobaXterm，它不仅功能强大，而且完全免费，适合各类用户使用。 ... [详细]

蜡笔小新 2024-12-16 21:02:15
npm
从零开始构建完整手机站：Vue CLI 3 实战指南（第一部分）

本系列教程将引导您使用 Vue CLI 3 构建一个功能齐全的移动应用。我们将深入探讨项目中涉及的每一个知识点，并确保这些内容与实际工作中的需求紧密结合。 ... [详细]

蜡笔小新 2024-12-26 13:30:37
npm
告别传统文件传输，迎接新一代高效工具Croc

在现代网络环境中，两台计算机之间的文件传输需求日益增长。传统的FTP和SSH方式虽然有效，但其配置复杂、步骤繁琐，难以满足快速且安全的传输需求。本文将介绍一种基于Go语言开发的新一代文件传输工具——Croc，它不仅简化了操作流程，还提供了强大的加密和跨平台支持。 ... [详细]

蜡笔小新 2024-12-26 16:16:06
上传
网络运维工程师的前景与薪酬分析

网络运维工程师负责确保企业IT基础设施的稳定运行，保障业务连续性和数据安全。他们需要具备多种技能，包括搭建和维护网络环境、监控系统性能、处理突发事件等。本文将探讨网络运维工程师的职业前景及其平均薪酬水平。 ... [详细]

蜡笔小新 2024-12-26 14:35:04
css
使用Xshell通过SSH协议远程连接Ubuntu系统

本文介绍如何通过SSH协议使用Xshell远程连接到Ubuntu系统。为了实现这一目标，需要确保Ubuntu系统已安装并配置好SSH服务器，并保证网络连通性。 ... [详细]

蜡笔小新 2024-12-25 16:29:11
css
优化局域网SSH连接延迟问题的解决方案

本文介绍了解决局域网内SSH连接到服务器时出现长时间等待问题的方法。通过调整配置和优化网络设置，可以显著缩短SSH连接的时间。 ... [详细]

蜡笔小新 2024-12-25 11:31:48
css
Git管理工具SourceTree安装与使用指南

本文详细介绍了Git管理工具SourceTree的安装、配置及团队协作方案，旨在帮助开发者更高效地进行版本控制和项目管理。 ... [详细]

蜡笔小新 2024-12-23 18:58:52
npm
Symfony框架的安装与使用指南

Symfony是一个功能强大的PHP框架，以其依赖注入（DI）特性著称。许多流行的PHP框架如Drupal和Laravel的核心组件都基于Symfony构建。本文将详细介绍Symfony的安装方法及其基本使用。 ... [详细]

蜡笔小新 2024-12-21 14:17:36
npm
配置Git SSH密钥以访问远程仓库

本文详细介绍如何通过设置SSH密钥来获取连接GitHub远程仓库的权限，包括生成密钥、添加到GitHub账户以及验证连接等步骤。 ... [详细]

蜡笔小新 2024-12-19 19:02:13
ajax
2019年前端技术趋势及职业发展路径

本文探讨了2019年前端技术的发展趋势，包括工具化、配置化和泛前端化等方面，并提供了详细的学习路线和职业规划建议。 ... [详细]

蜡笔小新 2024-12-19 10:19:35
ajax
Git多账号多SSH密钥配置指南

本指南详细介绍了如何在同一台计算机上配置多个GitHub账户，并使用不同的SSH密钥进行身份验证，确保每个账户的安全性和独立性。 ... [详细]

蜡笔小新 2024-12-18 10:54:08
ajax
在Linux系统上构建Web服务器的详细步骤

本文详细介绍了如何在Linux系统上搭建Web服务器的过程，包括安装Apache、PHP和MySQL等关键组件，以及遇到的一些常见问题及其解决方案。 ... [详细]

蜡笔小新 2024-12-17 19:02:43
ajax
Windows 环境下安装 Git 并连接 GitHub 的详细步骤

本文详细介绍了如何在 Windows 系统中安装 Git 工具，并通过配置 SSH 密钥实现与 GitHub 的安全连接。包括下载、安装、环境配置及验证连接等关键步骤。 ... [详细]

蜡笔小新 2024-12-17 16:22:46
ajax
Django xAdmin 使用指南（第一部分）

本文介绍如何在Django项目中集成和使用xAdmin，这是一个增强版的管理界面，提供了比Django默认admin更多的功能。文中详细描述了集成步骤及配置方法。 ... [详细]

蜡笔小新 2024-12-17 10:14:08
ajax
Python 工具推荐 | PyHubWeekly 第二十一期：提升命令行体验的五大工具

本期 PyHubWeekly 为大家精选了 GitHub 上五个优秀的 Python 工具，涵盖金融数据可视化、终端美化、国际化支持、图像增强和远程 Shell 环境配置。欢迎关注并参与项目。 ... [详细]

蜡笔小新 2024-12-21 14:45:11

林老悲--

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章