静态资源服务器

时间 2019-11-25

原文原文链接

node 静态资源服务器

用node实现一个静态资源服务器，读取一个目录下的文件，若是是目录，显示该目录下的文件名。支持命令设置端口和静态目录，支持防盗链、缓存等功能。javascript

建立目录 staticServer

npm init 在package.json里加入以下代码。bin里面是相应的命令，执行 static-server，即执行bin下面的www.js文件

"bin": {
    "static-server": "./bin/www.js"
  }
复制代码

config

在config目录下建立index.js，配置文件，root是静态目录，port是端口号。

module.exports = {
    root:'public',
    port:8080
};
复制代码

bin目录

在bin目录下建立www.js
yargs是一个获取命令行参数的库

#! /usr/bin/env node
const argv = require('yargs')
    .usage('static-server')
    .options('port', {
        alias: 'p',
        describe: '设置端口号',
        default: 8080
    })
    .options('root', {
        alias: 'r',
        describe: '设置静态目录',
        default: process.cwd()
    })
    .help()
    .argv;
const config = Object.assign(require('../config'),argv);
let StaticServer =  require('../src');
let server = new StaticServer(config);
复制代码

src

src是源代码，template里是模板文件，用来展现读取的目录信息，index是node服务的文件
要用到获取文件信息、读取文件和目录，把异步的方便变成同步的写法，用到了util.promisify

const fsStat = util.promisify(fs.stat);
const fsReadFile = util.promisify(fs.readFile);
const fsReaddir = util.promisify(fs.readdir);
复制代码

目录模版

读取模版文件，用Handlebars作模版引擎

let template;
function getTemplate() {
    fs.readFile(path.join(__dirname, 'template', 'template.html'), 'utf8', (err, html) => {
        if (err) {
            console.log(err);
        } else {
            template = Handlebars.compile(html);
        }
    });
}
复制代码

StaticServer类

建立staticServer类，cacheType是缓存的类型，cwd是工做目录

class StaticServer {
    constructor(config) {
        this.cacheType = ['CacheControl', 'Expires', 'LastModified', 'ETag'];
        this.port = config.port;
        this.root = config.root;
        this.cwd = process.cwd();
        this.createServer();
    }
}
复制代码

createServer启动服务

createServer() {
    try {
        const server = http.createServer(this.requestListener.bind(this));
        server.listen(this.port, () => {
            console.log(`server is ok;http://localhost:${this.port}`);
        });
    } catch (e) {
        this.errorListener(e);
    }
}
复制代码

errorListener

errorListener容错处理函数

errorListener(err) {
   console.log(err);
}
复制代码

requestListener

createServer监听函数，req是请求、res是相应、dir是文件目录。
用mime模块得到mimetype，设置相应头 Content-Type，若是是文字，设置charset是utf-8。
fsStat获取文件的信息。若是是目录，获取目录；若是是文件，返回文件。
若是是图片，先设置防盗链，返回文件。

async requestListener(req, res) {
    const pathname = url.parse(req.url).pathname;
    const dir = path.join(this.root, pathname);
    try {
        let contentType = mime.getType(dir);
        if (contentType&&contentType.match('text')) {
            contentType += ';charset=utf-8';
        }
        res.setHeader('Content-Type', contentType);
        const stat = await fsStat(dir);
        if (stat.isDirectory()) {
            this.getDir(req,res,pathname,dir);
        } else {
            this.proxyGetFile(req,res,pathname,dir,stat);
        }
    } catch (e) {
        res.statusCode = 404;
        res.end(e.toString());
        this.errorListener(e);
    }
}
复制代码

读取目录

循环目录下的文件名，获得一个数组，每一个元素是一个对象，名字和url。
返回模板

async getDir(req,res,pathname,dir) {
    const dirs = await fsReaddir(dir);
    const list = dirs.map(dir => ({name: dir, url: path.join(pathname, dir)}));
    const html = template({
        title: dir,
        list
    });
    res.end(html);
}
复制代码

防盗链

若是是当前服务器访问的就返回该图片，若是是其余服务器访问，返回空白图片

sendForbidden(req,res,pathname,dir,stat) {
    const referer = req.headers['referer'] || req.headers['refer'];
    if (referer && url.parse(referer).host !== req.headers['host']) {
        console.log('防盗链');
        res.statusCode = 403;
        fs.createReadStream(path.join(__dirname, 'forbidden.png')).pipe(res);
        return false;
    }
    return true;
}
复制代码

读取文件

设置缓存，该类有getFileCacheControl、getFileExpires、getFileLastModified、getFileETag方法

proxyGetFile(req,res,pathname,dir,stat) {
    if (mime.getType(dir).match('image')) {
        //图片
        if (!this.sendForbidden(req,res,pathname,dir,stat)) {
            return;
        }
    }
    for (let i = 0; i < this.cacheType.length; i++) {
        if (this[`getFile${this.cacheType[i]}`](req,res,pathname,dir,stat)) {
            console.log(this.cacheType[i]);
            return;
        }
    }
    this.getFile(req,res,pathname,dir,stat);
}
复制代码

强制缓存

经过设置响应头Expires和Cache-Control来实现强制缓存

getFileExpires(req,res,pathname,dir,stat) {
    res.setHeader('Expires', new Date(Date.now() + 60 * 1000));
}

getFileCacheControl(req,res,pathname,dir,stat) {
    res.setHeader('Cache-Control', 'max-age=60');
}  
复制代码

协商缓存

设置响应头的Last-Modified为文件修改时间，若是请求头的If-Modified-Since和文件修改时间同样，设置Status Code为304，让客户端从缓存里获取数据。
设置响应头的ETag为文件修改时间的md5值，若是请求头的If-None-Match和md5值同样，设置Status Code为304，让客户端从缓存里获取数据。

getFileLastModified(req,res,pathname,dir,stat) {
    const lastModified = stat.ctime.toGMTString();
    res.setHeader('Last-Modified', lastModified);
    if (req.headers['if-modified-since'] === lastModified) {
        res.statusCode = 304;
        res.end();
        return true;
    }
}

getFileETag(req,res,pathname,dir,stat) {
    let ifNoneMatch = req.headers['if-none-match'];
    let etag = crypto.createHash('md5').update(stat.ctime.toGMTString(), 'utf8').digest('hex');
    res.setHeader('ETag', etag);
    if (ifNoneMatch == etag) {
        res.statusCode = 304;
        res.end();
        return true;
    }
}
复制代码

压缩

根据请求头Accept-Encoding，返回不一样的压缩格式

compressFile(req,res,inp) {
    const acceptEncodings = req.headers['accept-encoding'];
    if(/\bgzip\b/.test(acceptEncodings)){
        this.gzipFile(req,res,inp);
        return true;
    }else if(/\bdeflate\b/.test(acceptEncodings)){
        this.deflateFile(req,res,inp);
        return true;
    }
    return false;
}

gzipFile(req,res,inp) {
    const gzip = zlib.createGzip();
    res.setHeader('Content-Encoding','gzip');
    inp.pipe(gzip).pipe(res);
}

deflateFile(req,res,inp) {
    const deflate = zlib.createDeflate();
    res.setHeader('Content-Encoding','deflate');
    inp.pipe(deflate).pipe(res);
}
复制代码

读取文件

先进行压缩

getFile(req,res,pathname,dir,stat) {
    const fsReadStream = fs.createReadStream(dir);
    if(!this.compressFile(req,res,fsReadStream))
        fsReadStream.pipe(res);
}
复制代码

总结

根据近段时间学习，作了静态资源服务器，根据请求头作一些操做，返回响应的响应头。功能有待改善，后续会继续更新，并发不到npm上。html

源码

static-server