Node.js动手撸一个静态资源服务器的方法

以下是Node.js动手撸一个静态资源服务器的完整攻略：

什么是静态资源服务器

静态资源服务器是一个可以将静态文件（如 HTML，CSS，JavaScript，图片等）通过 HTTP 服务器向客户端提供这些文件的服务器。这种服务器通常是非常简单的，只是通过 HTTP 将文件发送给客户端，而不做任何处理。

构建静态资源服务器

要构建一个静态资源服务器，需要完成以下步骤：

1. 初始化 Node.js 项目
2. 安装并使用 http 和 fs 模块读取文件
3. 处理 HTTP 请求，处理404错误

初始化 Node.js 项目

首先，需要创建一个新的 Node.js 项目。打开终端并输入以下命令：

mkdir static-server
cd static-server
npm init

按照提示回答 npm init 的问题，生成 package.json 文件。

安装并使用 http 和 fs 模块读取文件

要处理 HTTP 请求并向客户端发送静态文件，我们需要使用 http 模块和 fs 模块。这些模块都是 Node.js 自带的，无需安装。

使用以下代码来启动 http 服务器：

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

const port = 3000; // 服务器端口
const filePath = './'; // 服务器静态文件存放路径

const server = http.createServer((req, res) => {
  const url = req.url;
  let filename = '';

  if (url === '/') {
    filename = 'index.html'; // 如果请求的是根路径，则默认返回 index.html
  } else {
    filename = url.slice(1); // 否则获取请求的路径，并去掉前面的斜杠
  }

  const fileUrl = path.join(filePath, filename); // 将静态文件存放路径和请求的路径拼接起来

  fs.readFile(fileUrl, (err, data) => {
    if (err) {
      res.statusCode = 404; // 如果找不到文件，返回 404 状态码
      res.end('404 Not Found');
    } else {
      const ext = path.parse(filename).ext; // 获取文件扩展名
      const contentType = getContentType(ext); // 获取文件内容类型

      res.setHeader('Content-Type', contentType); // 设置响应头
      res.statusCode = 200; // 设置状态码
      res.end(data); // 返回文件内容
    }
  });
});

server.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

function getContentType(ext) { // 根据文件扩展名返回相应的 MIME 类型
  const mimeTypes = {
    '.html': 'text/html',
    '.css': 'text/css',
    '.js': 'text/javascript',
    '.json': 'application/json',
    '.png': 'image/png',
    '.jpg': 'image/jpeg',
    '.gif': 'image/gif',
    '.svg': 'image/svg+xml',
    '.wav': 'audio/wav',
    '.mp3': 'audio/mpeg',
    '.pdf': 'application/pdf',
    '.doc': 'application/msword',
    '.eot': 'application/vnd.ms-fontobject',
    '.ttf': 'application/font-sfnt'
  };

  return mimeTypes[ext] || 'application/octet-stream';
}

这段代码创建了一个基本的 http 服务器，监听在 3000 端口，当服务器收到请求时，它将返回客户端请求的静态文件。其中，http.createServer 接受一个回调函数，当请求到达时，将发送到此回调函数中。

在回调函数中，我们首先根据客户端请求的 URL 来确定要获取的文件。如果没有特定的文件名，则默认返回 index.html。然后，我们将获取的文件名称拼接到文件路径中，使用 fs 模块读取文件内容。

如果文件不存在，则返回 404 状态码。否则，我们确定返回的文件类型，并设置响应头，最后向客户端发送文件内容。在这里，我们通过 getContentType 函数确定文件类型，并在响应头中设置相应的 MIME 类型。

处理 HTTP 请求，处理404错误

在上一步的代码中，如果客户端请求了不存在的文件，则会默认返回 404 Not Found 错误。然而，如果我们向客户端发送的信息只是纯文本，那么无法正确地表达错误状态。我们应该让我们自己的服务器可以显示错误页面。

我们可以提供一个错误页面来代替纯文本错误信息。我们只需在文件末尾添加以下代码：

// 处理其他所有文件请求
server.on('request', (req, res) => {
  console.log(`URL: ${req.url}`);
});

// 返回 404 页面
function handle404(req, res) {
  const notFoundPath = path.join(filePath, '/404.html');

  fs.readFile(notFoundPath, (err, data) => {
    if (err) {
      res.statusCode = 404;
      res.setHeader('Content-Type', 'text/plain');
      res.end('404 Not Found');
    } else {
      res.statusCode = 404;
      res.setHeader('Content-Type', 'text/html');
      res.end(data);
    }
  });
}

// 如果请求的是不存在的文件，返回 404 页面
server.on('request', (req, res) => {
  const url = req.url;
  let filename = '';

  if (url === '/') {
    filename = 'index.html';
  } else {
    filename = url.slice(1);
  }

  const fileUrl = path.join(filePath, filename);

  if (!fs.existsSync(fileUrl)) {
    handle404(req, res);
    return;
  }

  fs.readFile(fileUrl, (err, data) => {
    if (err) {
      handle404(req, res);
    } else {
      const ext = path.parse(filename).ext;
      const contentType = getContentType(ext);

      res.setHeader('Content-Type', contentType);
      res.statusCode = 200;
      res.end(data);
    }
  });
});

这段代码使用了 Node.js 的 EventEmitter 模块中的 on 方法。当用户请求 /404 时，我们会返回一个错误页面。如果用户请求了一个不存在的页面，则返回错误页面。

我们处理 404 页面的方式是读取 404.html 文件，并将其作为 HTML 发送到浏览器。如果读取文件过程中出现错误，则我们将服务停止。

示例说明

这里提供两个示例

示例一：显示 HTML 文件

假设服务器上有一个名为 index.html 的 HTML 文件。当您启动 Node.js 服务器时，您应该能够通过在任何与 index.html 位于同一目录中的浏览器上打开相应的服务 URL，来查看此文件。例如，我们可以使用浏览器访问 http://localhost:3000，就会自动跳转到 index.html 页面。

示例二：提供静态资源

假设服务器上有一个图片文件 test.jpg，该文件在 ./image 目录中。当您启动服务器时，访问 http://localhost:3000/image/test.jpg，就会自动显示该图片。

以上就是使用 Node.js 构建一个静态资源服务器的完整攻略，希望对您有所帮助。