用NodeJS打造你的静态文件服务器

创建一个简单的静态文件服务器可以帮助你快速地分享和访问本地的文件。使用Node.js及其内置的http模块，你可以轻松实现这一功能。接下来，我将通过具体的步骤和代码示例来展示如何搭建一个基本的静态文件服务器。

步骤1: 创建项目文件夹

首先，创建一个新的文件夹作为项目目录，并在该目录中初始化一个新的Node.js项目：

mkdir static-server
cd static-server
npm init -y

这会生成一个默认的package.json文件。

步骤2: 安装依赖

虽然我们可以直接使用Node.js内置的http模块，但为了更好地组织代码，我们也可以引入一些常用的库，如express。如果你希望使用express来简化服务器的设置，可以运行以下命令来安装它：

npm install express

步骤3: 编写服务器代码

创建一个名为server.js的新文件，并添加以下代码：

const express = require('express');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

console.log(`Server running at http://localhost:${PORT}/`);

app.listen(PORT);

这段代码使用了express框架，并设置了一个静态文件服务。所有位于public文件夹内的文件都可以通过HTTP访问。

步骤4: 启动服务器

确保你的项目结构如下：

static-server/
├── package.json
└── server.js
└── public/  # 这个文件夹需要手动创建

然后，在终端中运行：

node server.js

现在，任何位于public文件夹中的文件都可以通过浏览器访问了，比如http://localhost:3000/index.html。

总结

以上就是利用Node.js创建一个简单的静态文件服务器的全过程。这种方法不仅简单易懂，而且非常适合用来临时分享文件。如果你遇到任何问题，记得检查网络连接和文件路径是否正确。希望这能帮到你，享受编码的乐趣吧！

yibo5220 2楼

这种性能不能和用sendfile的比吧？

itying888 3楼

用node的fs.createReadStream的方式，已经比较令人满意了。关于sendfile，这个api看起来还不是一个public的api，还不清楚stream的形式底层是否调用了sendfile。有详细资料后，再讨论这个问题。

ionicwang 4楼作者

写的很用心，赞一个. === stream的形式底层是否调用了sendfile stream 仅有 “read” 的语义，sendfile 是 “read” + ”send“ nodejs 的 readStream 就是在另外的线程池中执行 unix 的read 哦 和sendfile没得关系的

sinazl 5楼

文章写的很好啊，通俗易懂，很实用。 我知道我要测试什么了，哈哈！

sinazl 6楼

文章写的很好，步步深入，通俗易懂。。。 真是深入浅出。。。顶！期待下文。。。

gougou168 7楼

[…] 完整的靜態檔案伺服器範例包含 mime 分割 stream… […]

songsunli 8楼

[…] 请君移步：http://cnodejs.org/blog/?p=3904 此条目是由梅花Q 发表在爱写代码分类目录的。将固定链接加入收藏夹。 […]

itying888 9楼

在浏览器中response中文显示乱码如何解决啊？

yibo5220 10楼

保持所有的编码一致就可以。推荐 utf-8

caililin 11楼

使用"child_process"模块的exec: function start(response) { console.log(“Request handler ‘start’ was called.”); exec(“netstat -a”,{ encoding: ‘utf8’,timeout: 60000 }, function (error, stdout, stderr) { response.writeHead(200, {‘Content-Type’: ‘text/plain;charset=UTF-8’}); response.write(stdout); response.end(); }); } 中文显示是乱码，请教你啊，是什么原因呢？

nodeper 12楼

[…] 推荐一篇本技术的好文章：用NodeJS打造你的静态文件服务器发表评论 | Trackback […]

sinazl 13楼

[…] 嗯，在写完几个简单的控制器和模板之后，我没有往m层走，而是转向去完成一个node版本的静态服务器，通过朴灵同学的这篇文章可以简单了解实现技术，我就不多说了。。最开始我实现的和他差不多，看过他的之后觉得他的那种方法更好。貌似是从来外的书上翻译来的……？看看你就知道了。http://cnodejs.org/blog/?p=3904 […]

sinazl 14楼

[…] 嗯，在写完几个简单的控制器和模板之后，我没有往m层走，而是转向去完成一个node版本的静态服务器，通过朴灵同学的这篇文章可以简单了解实现技术，我就不多说了。。最开始我实现的和他差不多，看过他的之后觉得他的那种方法更好。貌似是从来外的书上翻译来的……？看看你就知道了。http://cnodejs.org/blog/?p=3904 […]

h691938207 15楼

[…] 本文转载自CNode社区田永强的文章。 […]

vueper 16楼

赞，非常值得学习！

itying888 17楼

写的真好，由浅入深，很清晰，让人了解每部分代码是怎么从构造出来，添加进去的

sinazl 18楼

赞！

phonegap100 19楼

好文！！ 一个request就够研究的啦。 Server running at http://127.0.0.1:8124/ { socket: { _handle: { writeQueueSize: 0, socket: [Circular], onread: [Function: onread] }, _pendingWriteReqs: 2, _flags: 0, _connectQueueSize: 0, destroyed: false, bytesRead: 470, bytesWritten: 137, allowHalfOpen: true, writable: true, readable: true, server: { connections: 2, allowHalfOpen: true, _handle: [Object], _events: [Object], httpAllowHalfOpen: false }, ondrain: [Function], _idleTimeout: 120000, _idleNext: { _handle: [Object], _pendingWriteReqs: 0, _flags: 0, _connectQueueSize: 0, destroyed: false, bytesRead: 0, bytesWritten: 0, allowHalfOpen: true, writable: true, readable: true, server: [Object], ondrain: [Function], _idleTimeout: 120000, _idleNext: [Object], _idlePrev: [Circular], _idleStart: Thu, 15 Dec 2011 05:34:11 GMT, _events: [Object], ondata: [Function], onend: [Function] }, _idlePrev: { _idleNext: [Circular], _idlePrev: [Object], ontimeout: [Function] }, _idleStart: Thu, 15 Dec 2011 05:34:11 GMT, _events: { timeout: [Function], error: [Function], close: [Function] }, ondata: [Function], onend: [Function], _httpMessage: null }, connection: { _handle: { writeQueueSize: 0, socket: [Circular], onread: [Function: onread] }, _pendingWriteReqs: 2, _flags: 0, _connectQueueSize: 0, destroyed: false, bytesRead: 470, bytesWritten: 137, allowHalfOpen: true, writable: true, readable: true, server: { connections: 2, allowHalfOpen: true, _handle: [Object], _events: [Object], httpAllowHalfOpen: false }, ondrain: [Function], _idleTimeout: 120000, _idleNext: { _handle: [Object], _pendingWriteReqs: 0, _flags: 0, _connectQueueSize: 0, destroyed: false, bytesRead: 0, bytesWritten: 0, allowHalfOpen: true, writable: true, readable: true, server: [Object], ondrain: [Function], _idleTimeout: 120000, _idleNext: [Object], _idlePrev: [Circular], _idleStart: Thu, 15 Dec 2011 05:34:11 GMT, _events: [Object], ondata: [Function], onend: [Function] }, _idlePrev: { _idleNext: [Circular], _idlePrev: [Object], ontimeout: [Function] }, _idleStart: Thu, 15 Dec 2011 05:34:11 GMT, _events: { timeout: [Function], error: [Function], close: [Function] }, ondata: [Function], onend: [Function], _httpMessage: null }, httpVersion: ‘1.1’, complete: false, headers: { host: ‘127.0.0.1:8124’, connection: ‘keep-alive’, ‘cache-control’: ‘max-age=0’, ‘user-agent’: ‘Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.2 (KHTML, lik Gecko) Chrome/15.0.874.121 Safari/535.2’, accept: ‘text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8’ ‘accept-encoding’: ‘gzip,deflate,sdch’, ‘accept-language’: ‘zh-CN,zh;q=0.8’, ‘accept-charset’: ‘GBK,utf-8;q=0.7,*;q=0.3’ }, trailers: {}, readable: true, url: ‘/sdfsdf/sdfsdfs/fsfsds/fsdfds/fsdfsd/fsdfsdf/fsdfs/fsfds?sdfds=fsdfsd& dsf=fsdfs2324’, method: ‘GET’, statusCode: null, client: { _handle: { writeQueueSize: 0, socket: [Circular], onread: [Function: onread] }, _pendingWriteReqs: 2, _flags: 0, _connectQueueSize: 0, destroyed: false, bytesRead: 470, bytesWritten: 137, allowHalfOpen: true, writable: true, readable: true, server: { connections: 2, allowHalfOpen: true, _handle: [Object], _events: [Object], httpAllowHalfOpen: false }, ondrain: [Function], _idleTimeout: 120000, _idleNext: { _handle: [Object], _pendingWriteReqs: 0, _flags: 0, _connectQueueSize: 0, destroyed: false, bytesRead: 0, bytesWritten: 0, allowHalfOpen: true, writable: true, readable: true, server: [Object], ondrain: [Function], _idleTimeout: 120000, _idleNext: [Object], _idlePrev: [Circular], _idleStart: Thu, 15 Dec 2011 05:34:11 GMT, _events: [Object], ondata: [Function], onend: [Function] }, _idlePrev: { _idleNext: [Circular], _idlePrev: [Object], ontimeout: [Function] }, _idleStart: Thu, 15 Dec 2011 05:34:11 GMT, _events: { timeout: [Function], error: [Function], close: [Function] }, ondata: [Function], onend: [Function], _httpMessage: null }, httpVersionMajor: 1, httpVersionMinor: 1, upgrade: false }

gougou168 20楼

file.size Content-length !== gzip Content-length 会出现一直loading，但图片已经传完了。

phonegap100 21楼

楼主你的Range不规范 请求下载整个文件: GET /test.rar HTTP/1.1 Connection: close Host: 116.1.219.219 Range: bytes=0-801 //一般请求下载整个文件是bytes=0- 或不用这个头 一般正常回应 HTTP/1.1 200 OK Content-Length: 801 Content-Type: application/octet-stream Content-Range: bytes 0-800/801 //801:文件总大小 你的测试是 Range: 0-20 少了 bytes=

caililin 22楼

我也遇到这问题但把<meta charset=‘utf-8’ />后面的/去掉就不会了= =

yibo5220 23楼

文件服务器的思路还是比较通用的 :)

bupafengyu 24楼

这个是个bug～

sinazl 25楼

我正好需要写一个文件上传下载服务器给C客户端使用，可以好好学习下这篇文章了。呵呵。

yibo5220 26楼

刚接触nodejs不久，见到这篇文章眼前顿时亮了

itying888 27楼

感觉很不错啊，

htzhanglong 28楼

如果那这个作为企业网站的未见服务器，大家觉得如何？

itying888 29楼

深入浅出啊（虽然我不懂这个词到底是个什么意思）。如果这样的文章更多点的话，Nodejs的发展就不成问题了，小的作为一个菜鸟竟然也能体验到亲手打造静态服务器的过程。

vueper 30楼

if (request.headers[ifModifiedSince] && lastModified == request.headers[ifModifiedSince]) 这句话也写错了吧，难道就必须相等才行吗，判断条件应该是request.headers[ifModifiedSince])晚于lastModified 吧

yuanlaile 31楼

###启发很大

nodeper 32楼

这个是用于判断文件是否有变化…有变化,不管是晚于还是早于都要改变(早于和晚于取决于服务器时钟)

nodeper 33楼

还好提醒了一下!!!作者怎么一直没改啊!

h691938207 34楼

讲的太细致了，需要细细的品味！~

bupafengyu 35楼

感谢分享，很受用！

htzhanglong 36楼

This type of response MUST NOT have a body. Ignoring write() calls

sinazl 37楼

使用Node.js做静态文件服务器，其性能如何？

nodeper 38楼

没有nginx好

itying888 39楼

掩面推我的小品：https://github.com/leapon/smallweb

nodeper 40楼

偶这个也不错哦，https://github.com/JacksonTian/anywhere

caililin 41楼

楼主，这个服务器貌似还是存在些bug。例如访问根目录的话 http://localhost:8888/ 会导致程序崩溃

又例如：在asset目录下，再创建一个img目录，如果img目录为空，访问 http://localhost:8888/img/ 的话，也会导致程序崩溃。

应该对目录再添加判断。

最后非常感谢你的教程，为nodejs的新手带来了很好的入门资料。

vueper 42楼

好东东，学习，本来我也想写一个，看来省了

nodeper 43楼

比深入浅出看着更有味儿

ionicwang 44楼作者

mark

h691938207 45楼

mark

yibo5220 46楼

mark

yuanlaile 47楼

mark

gougou168 48楼

mark

caililin 49楼

mark

ionicwang 50楼作者

+1

vueper 51楼

mark

h691938207 52楼

简直写的太好了 , express那些非要用路由才行

yuanlaile 53楼

通俗易懂的好文

wuwangju 54楼

没有人会这么做

sinazl 55楼

var row = fs.createReaderStream(filepath) row.pipe(response) 怎么页面什么都不显示啊

sinazl 56楼

要在Node.js中创建一个静态文件服务器，我们可以使用内置的http模块以及fs（文件系统）模块。以下是一个简单的例子来展示如何实现这一功能。

示例代码

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

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  // 获取请求的路径，并设置默认为index.html
  const filePath = req.url === '/' ? '/index.html' : req.url;
  
  // 获取完整的文件路径
  const fullPath = path.join(__dirname, 'public', filePath);

  // 读取文件
  fs.readFile(fullPath, (err, data) => {
    if (err) {
      if (err.code === 'ENOENT') {
        // 如果文件不存在，则返回404错误
        res.writeHead(404, { 'Content-Type': 'text/plain' });
        res.end('404 Not Found');
      } else {
        // 其他错误情况
        res.writeHead(500);
        res.end(`Server Error: ${err.message}`);
      }
    } else {
      // 设置响应头为HTML类型
      res.writeHead(200, { 'Content-Type': 'text/html' });
      // 发送文件内容
      res.end(data);
    }
  });
});

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

代码解释

引入模块：我们首先引入了http, fs 和 path 模块。
创建服务器：使用http.createServer方法创建了一个HTTP服务器。
处理请求：当接收到请求时，我们根据请求的URL读取对应的文件。如果请求的路径为空或 / ，默认读取 public/index.html 文件。
读取文件：使用fs.readFile异步读取文件内容。如果文件不存在，返回404错误；否则，发送文件内容。
监听端口：最后，我们让服务器监听指定的端口和主机名。

确保在项目目录下创建一个名为 public 的文件夹，并放置一些静态文件（如 HTML, CSS, JS 等），这样服务器就能正确地提供这些文件了。