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

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

概述

在前端开发中，经常需要搭建静态服务器用来测试和调试前端代码，但是市面上的一些静态服务器并不能完全满足我们的需要，因此自己搭建一个静态服务器还是有必要的。本文将介绍如何搭建一个简单的静态服务器，并且通过命令行的方式进行操作。

前置知识

在阅读本文之前，需要掌握 Node.js 基础知识。

创建项目

首先我们需要先创建一个文件夹，然后在命令行中进入这个文件夹：

mkdir static-server
cd static-server

接下来，我们需要在该文件夹下创建一个 package.json 文件，这个文件可以使用 npm init 命令来创建：

npm init -y

安装依赖

这个项目需要依赖一些第三方的包，我们可以通过 npm install 命令来安装这些依赖：

npm install minimist mime fs url -S

以上命令会安装 minimist、mime、fs 和 url 四个依赖包。

编写代码

解析命令行参数

我们可以使用 minimist 这个包来解析命令行中传入的参数，包括下面三个参数：

• -p 指定使用的端口号，默认为 8080
• -d 指定静态服务器的根目录，默认为当前目录
• -h 显示帮助信息

const minimist = require('minimist');

const DEFAULT_OPTIONS = {
  port: 8080,
  directory: process.cwd()
};

function parseOptions(argv) {
  const options = minimist(argv, {
    string: ['port', 'directory'],
    alias: {
      p: 'port',
      d: 'directory',
      h: 'help'
    },
    default: DEFAULT_OPTIONS
  });
  if (options.help) {
    console.info('Usage: node static-server [-p port] [-d directory]');
    process.exit(0);
  }
  return options;
}

module.exports = parseOptions;

获取 MIME Type

当客户端请求某个静态文件时（如 HTML、CSS、JS 等），我们需要返回正确的 MIME Type，这样浏览器才能正确地解析并显示这个文件。我们可以使用 mime 这个包来获取 MIME Type。

const mime = require('mime');

module.exports = (filename) => {
  return mime.getType(filename);
};

响应请求

当客户端请求某个静态文件时，我们需要读取对应的文件内容，然后将内容返回给客户端。在这个过程中，需要注意一些问题：

• 我们需要判断文件是否存在，如果文件不存在则返回 404 错误。
• 我们需要判断文件类型，并设置正确的 MIME Type。
• 对于图片等二进制文件，我们需要设置 response 的 content-type 为 image/*，然后使用 response 的 end 方法来返回文件内容。
• 对于文本文件，我们需要使用 response 的 setHeader 方法来设置 content-type，并使用 response 的 write 和 end 方法来逐个输出文件内容。

const fs = require('fs');
const url = require('url');
const path = require('path');

const getMimeType = require('./mime');

module.exports = (request, response, options) => {
  const pathname = url.parse(request.url).pathname;
  const filename = path.join(options.directory, pathname);
  if (fs.existsSync(filename)) {
    const stat = fs.statSync(filename);
    if (stat.isDirectory()) {
      const dirList = fs.readdirSync(filename);
      response.setHeader('Content-Type', 'text/html;charset=utf-8');
      response.write('<ul>');
      if (pathname !== '/') {
        response.write(`<li><a href="${path.dirname(pathname)}">..</a></li>`);
      }
      for (const file of dirList) {
        response.write(`<li><a href="${pathname}${path.sep}${file}">${file}</a></li>`);
      }
      response.write('</ul>');
      response.end();
    } else {
      const mimeType = getMimeType(filename);
      if (mimeType.startsWith('image/')) {
        const fileContent = fs.readFileSync(filename);
        response.setHeader('Content-Type', mimeType);
        response.end(fileContent, 'binary');
      } else {
        response.setHeader('Content-Type', mimeType);
        const stream = fs.createReadStream(filename);
        stream.pipe(response);
      }
    }
  } else {
    response.statusCode = 404;
    response.end('File Not Found');
  }
};

启动服务

我们可以使用 Node.js 自带的 HTTP 模块来启动一个 HTTP 服务器，然后在回调函数中处理客户端的请求。

const http = require('http');
const processOptions = require('./options');
const handleRequest = require('./request-handler');

const DEFAULT_PORT = 8080;

const server = http.createServer((request, response) => {
  const options = processOptions(process.argv.slice(2));
  handleRequest(request, response, options);
});

server.listen(DEFAULT_PORT, () => {
  console.log(`Static server running on port ${DEFAULT_PORT}`);
});

使用示例

我们可以经过上面的步骤来创建一个简单的静态服务器。现在我们可以通过命令行来启动这个服务器，并根据需要指定端口号和静态文件目录。以下是一些使用示例：

• 在默认的端口号（8080）上启动服务器，根目录为当前目录：node server
• 在 8888 端口上启动服务器，以 /Users/zhangsan 为根目录：node server -p 8888 -d /Users/zhangsan
• 显示帮助信息：node server -h

总结

本文介绍了如何使用 Node.js 来搭建一个简单的静态服务器，并且通过命令行的方式进行操作。搭建静态服务器是前端开发必备的技能之一，相信经过这篇文章的介绍，大家都能够轻松搭建一个自己的静态服务器。