正在用NodeJs实现一个静态文件服务器

正在用NodeJs实现一个静态文件服务器

之前公司的静态页面全部放在主工程下面，导致和代码的时候老是看到一堆没用的文件等问题，现在要把静态项目工程化，做到跟文件结构跟主工程里面基本一致，访问路由跟主工程基本一致，页面包含关系跟主工程基本一致，并把sass、compass通通搞进来，有木有有类似经历的同学？

9 回复

当然可以！以下是一个关于如何使用 Node.js 实现一个静态文件服务器的详细解答。我们将使用 http 和 fs 模块来创建一个简单的静态文件服务器。

标题

正在用NodeJs实现一个静态文件服务器

内容

之前公司的静态页面全部放在主工程下面，导致开发时经常会看到一些不必要的文件，这不仅影响了开发效率，还容易引发混淆。现在，我希望能够将静态文件工程化管理，使其与主工程的目录结构和路由保持一致，同时引入Sass和Compass等工具，以便更好地管理和维护静态资源。

为了实现这一目标，我们可以使用 Node.js 来搭建一个简单的静态文件服务器。下面是一个基本的示例代码，展示如何使用 Node.js 创建一个静态文件服务器。

示例代码

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) => {
    const filePath = path.join(__dirname, req.url === '/' ? '/index.html' : req.url);
    
    // 检查文件是否存在
    fs.access(filePath, fs.constants.F_OK, (err) => {
        if (err) {
            // 文件不存在，返回404错误
            res.statusCode = 404;
            res.setHeader('Content-Type', 'text/plain');
            res.end('Not Found');
            return;
        }

        // 文件存在，读取文件并发送给客户端
        fs.readFile(filePath, (err, data) => {
            if (err) {
                res.statusCode = 500;
                res.setHeader('Content-Type', 'text/plain');
                res.end('Internal Server Error');
                return;
            }

            // 设置响应头
            res.setHeader('Content-Type', getContentType(filePath));
            res.end(data);
        });
    });
});

function getContentType(filePath) {
    const extname = path.extname(filePath);
    switch (extname.toLowerCase()) {
        case '.html':
            return 'text/html';
        case '.css':
            return 'text/css';
        case '.js':
            return 'application/javascript';
        case '.png':
            return 'image/png';
        case '.jpg':
        case '.jpeg':
            return 'image/jpeg';
        default:
            return 'application/octet-stream';
    }
}

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

解释

  1. 引入模块：我们首先引入了 http、fs 和 path 模块。
  2. 创建服务器：使用 http.createServer 方法创建一个 HTTP 服务器。
  3. 处理请求：当接收到请求时，根据请求路径（req.url）拼接出文件路径，并检查该文件是否存在。
  4. 读取文件：如果文件存在，则读取文件内容并将其发送回客户端；如果文件不存在，则返回 404 错误。
  5. 设置响应头：根据文件扩展名设置合适的 Content-Type 响应头。
  6. 启动服务器：最后，启动服务器并监听指定端口。

通过这种方式，我们可以轻松地为静态文件创建一个简单的服务器，并且可以根据需要进行扩展，例如添加对 Sass 和 Compass 的支持。


静态资源单独放在一个服务器里，引用由本地路径改为http路径，是这个意思？项目打包用grunt实现

不仅仅是静态资源，包括静态页面。

https://github.com/AdoHe/ImageServer 可以看看这个，或许有点用处。。。

嗯 谢谢

看着楼主应该没有用过grunt这些之类的？

snopy貌似有相关一篇文章写的很好

不是有各种服务器，如httpd，为何要用node造轮子呢？

对于你的需求，可以使用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 rootDir = './static'; // 静态文件存放目录

const server = http.createServer((req, res) => {
    const filePath = path.join(rootDir, req.url === '/' ? 'index.html' : req.url);
    
    fs.access(filePath, fs.constants.F_OK, (err) => {
        if (err) {
            res.statusCode = 404;
            res.end('Not Found');
        } else {
            fs.readFile(filePath, (err, data) => {
                if (err) {
                    res.statusCode = 500;
                    res.end('Internal Server Error');
                } else {
                    res.setHeader('Content-Type', getContentType(filePath));
                    res.end(data);
                }
            });
        }
    });
});

function getContentType(filePath) {
    const extname = path.extname(filePath);
    switch (extname.toLowerCase()) {
        case '.html':
            return 'text/html';
        case '.css':
            return 'text/css';
        case '.js':
            return 'application/javascript';
        default:
            return 'application/octet-stream';
    }
}

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

解释

  1. 引入模块：

    • http 模块用于创建HTTP服务器。
    • fs 模块用于读取文件系统。
    • path 模块用于处理和转换文件路径。

  2. 配置：

    • rootDir 是静态文件的根目录。你可以根据实际项目结构调整这个路径。

  3. 创建HTTP服务器：

    • 使用 http.createServer 创建一个服务器。
    • 对于每个请求，首先检查文件是否存在。
    • 如果文件存在，则读取文件并发送给客户端。
    • 如果文件不存在或读取失败，则返回相应的错误状态码。

  4. 获取文件类型：

    • 根据文件扩展名设置响应头中的 Content-Type。

  5. 启动服务器：

    • 使用 server.listen 启动服务器，并监听指定的端口和地址。

通过这种方式，你可以创建一个简单的静态文件服务器，并将其与主工程分离，方便管理和维护。

回到顶部