使用Node.js搭建静态资源服务器

app.use(express.static('public'))

express.static

基本功能

实现基本功能

代码结构

nodejs-static-webserver

npm init

mkdir nodejs-static-webserver && cd "$_"
// initialize package.json
npm init

-- config
---- default.json
-- static-server.js
-- app.js

{
"port": 9527,
"root": "/Users/sheila1227/Public",
"indexPage": "index.html"
}

default.js

http://localhost:9527/myfiles/

root

const http = require('http');
const path = require('path');
const config = require('./config/default');

class StaticServer {
constructor() {
this.port = config.port;
this.root = config.root;
this.indexPage = config.indexPage;
}

start() {
http.createServer((req, res) => {
const pathName = path.join(this.root, path.normalize(req.url));
res.writeHead(200);
res.end(`Requeste path: ${pathName}`);
}).listen(this.port, err => {
if (err) {
console.error(err);
console.info('Failed to start server');
} else {
console.info(`Server started on port ${this.port}`);
}
});
}
}

module.exports = StaticServer;

StaticServer

start

server

rquest

path

const StaticServer = require('./static-server');

(new StaticServer()).start();

static-server

start

static-server.js

> node app.js

Server started on port 9527

路由处理

routeHandler(pathName, req, res) {

}

start() {
http.createServer((req, res) => {
const pathName = path.join(this.root, path.normalize(req.url));
this.routeHandler(pathName, req, res);
}).listen(this.port, err => {
...
});
}

routeHandler

读取静态文件

fs.stat

respondNotFound(req, res) {
res.writeHead(404, {
'Content-Type': 'text/html'
});
res.end(`<h1>Not Found</h1><p>The requested URL ${req.url} was not found on this server.</p>`);
}

respondFile(pathName, req, res) {
const readStream = fs.createReadStream(pathName);
readStream.pipe(res);
}

routeHandler(pathName, req, res) {
fs.stat(pathName, (err, stat) => {
if (!err) {
this.respondFile(pathName, req, res);
} else {
this.respondNotFound(req, res);
}
});
}

createReadStream

readFile

readFile

Transfer-Encoding:chunked

end()

MIME支持

Content-Type

jpeg

'Content-Type': 'text/html'

mime.js

const path = require('path');

const mimeTypes = {
"css": "text/css",
"gif": "image/gif",
"html": "text/html",
"ico": "image/x-icon",
"jpeg": "image/jpeg",
...
};

const lookup = (pathName) => {
let ext = path.extname(pathName);
ext = ext.split('.').pop();
return mimeTypes[ext] || mimeTypes['txt'];
}

module.exports = {
lookup
};

lookup

‘type/subtype’

static-server.js

mime

respondFile(pathName, req, res) {
const readStream = fs.createReadStream(pathName);
res.setHeader('Content-Type', mime.lookup(pathName));
readStream.pipe(res);
}

Content-Type

gzip

添加其他功能

读取文件目录

localhost:9527/testfolder

testfolder

Error: EISDIR: illegal operation on a directory, read

/

routeHandler(pathName, req, res) {
fs.stat(pathName, (err, stat) => {
if (!err) {
const requestedPath = url.parse(req.url).pathname;
if (hasTrailingSlash(requestedPath) && stat.isDirectory()) {
this.respondDirectory(pathName, req, res);
} else if (stat.isDirectory()) {
this.respondRedirect(req, res);
} else {
this.respondFile(pathName, req, res);
}
} else {
this.respondNotFound(req, res);
}
});
}

respondRedirect

respondRedirect(req, res) {
const location = req.url + '/';
res.writeHead(301, {
'Location': location,
'Content-Type': 'text/html'
});
res.end(`Redirecting to <a href='${location}'>${location}</a>`);
}

location

respondDirectory

respondDirectory(pathName, req, res) {
const indexPagePath = path.join(pathName, this.indexPage);
if (fs.existsSync(indexPagePath)) {
this.respondFile(indexPagePath, req, res);
} else {
fs.readdir(pathName, (err, files) => {
if (err) {
res.writeHead(500);
return res.end(err);
}
const requestPath = url.parse(req.url).pathname;
let content = `<h1>Index of ${requestPath}</h1>`;
files.forEach(file => {
let itemLink = path.join(requestPath,file);
const stat = fs.statSync(path.join(pathName, file));
if (stat && stat.isDirectory()) {
itemLink = path.join(itemLink, '/');
}
content += `<p><a href='${itemLink}'>${file}</a></p>`;
});
res.writeHead(200, {
'Content-Type': 'text/html'
});
res.end(content);
});
}
}

href

localhost:9527/testfolder

root

testfolder

缓存支持

ETag

ETag

Last-Modified

Last-Modified

Expires

Cache-Control

max-age

ETag

If-None-Match

Last-Modified

If-Modified-Since

Cache-Control

Expires

If-None-Match

If-Modified-Since

If-None-Match

If-Modified-Since

{
...
"cacheControl": true,
"expires": true,
"etag": true,
"lastModified": true,
"maxAge": 5
}

StaticServer

class StaticServer {
constructor() {
...
this.enableCacheControl = config.cacheControl;
this.enableExpires = config.expires;
this.enableETag = config.etag;
this.enableLastModified = config.lastModified;
this.maxAge = config.maxAge;
}

respondFile

respond(pathName, req, res) {
fs.stat(pathName, (err, stat) => {
if (err) return respondError(err, res);
this.setFreshHeaders(stat, res);
if (this.isFresh(req.headers, res._headers)) {
this.responseNotModified(res);
} else {
this.responseFile(pathName, res);
}
});

}

generateETag(stat) {
const mtime = stat.mtime.getTime().toString(16);
const size = stat.size.toString(16);
return `W/"${size}-${mtime}"`;
}

setFreshHeaders(stat, res) {
const lastModified = stat.mtime.toUTCString();
if (this.enableExpires) {
const expireTime = (new Date(Date.now() + this.maxAge * 1000)).toUTCString();
res.setHeader('Expires', expireTime);
}
if (this.enableCacheControl) {
res.setHeader('Cache-Control', `public, max-age=${this.maxAge}`);
}
if (this.enableLastModified) {
res.setHeader('Last-Modified', lastModified);
}
if (this.enableETag) {
res.setHeader('ETag', this.generateETag(stat));
}
}

ETag

isFresh(reqHeaders, resHeaders) {
const  noneMatch = reqHeaders['if-none-match'];
const  lastModified = reqHeaders['if-modified-since'];
if (!(noneMatch || lastModified)) return false;
if(noneMatch && (noneMatch !== resHeaders['etag'])) return false;
if(lastModified && lastModified !== resHeaders['last-modified']) return false;
return true;
}

node

http

reqHeaders['if-none-match']

req.rawreq.rawHeaders

[name1, value1, name2, value2, ...]

内容编码

Accept-Encoding

Accept-Encoding

Content-Encoding

Content-Encoding

{
...
"zipMatch": "^\\.(css|js|html)$"
}

constructor() {
...
this.zipMatch = new RegExp(config.zipMatch);
}

zlib

compressHandler(readStream, req, res) {         const acceptEncoding = req.headers['accept-encoding'];         if (!acceptEncoding || !acceptEncoding.match(/\b(gzip|deflate)\b/)) {             return readStream;         } else if (acceptEncoding.match(/\bgzip\b/)) {             res.setHeader('Content-Encoding', 'gzip');             return readStream.pipe(zlib.createGzip());         } else if (acceptEncoding.match(/\bdeflate\b/)) {             res.setHeader('Content-Encoding', 'deflate');             return readStream.pipe(zlib.createDeflate());         }     }

Content-Encoding

范围请求

Accept-Ranges

Ranges

206 Partial Content

Content-Range

416 Requested Range Not Satisfiable

Content-Range

Ranges

Ranges: bytes=[start]-[end]

Content-Range

Content-Range: bytes (start)-(end)/(total)

Content-Range: bytes */(total)

rangeHandler(pathName, rangeText, totalSize, res) {
const range = this.getRange(rangeText, totalSize);
if (range.start > totalSize || range.end > totalSize || range.start > range.end) {
res.statusCode = 416;
res.setHeader('Content-Range', `bytes */${totalSize}`);
res.end();
return null;
} else {
res.statusCode = 206;
res.setHeader('Content-Range', `bytes ${range.start}-${range.end}/${totalSize}`);
return fs.createReadStream(pathName, { start: range.start, end: range.end });
}
}

root

This is a test sentence.

读取命令行参数

default.json

var options = require( "yargs" )
.option( "p", { alias: "port",  describe: "Port number", type: "number" } )
.option( "r", { alias: "root", describe: "Static resource directory", type: "string" } )
.option( "i", { alias: "index", describe: "Default page", type: "string" } )
.option( "c", { alias: "cachecontrol", default: true, describe: "Use Cache-Control", type: "boolean" } )
.option( "e", { alias: "expires", default: true, describe: "Use Expires", type: "boolean" } )
.option( "t", { alias: "etag", default: true, describe: "Use ETag", type: "boolean" } )
.option( "l", { alias: "lastmodified", default: true, describe: "Use Last-Modified", type: "boolean" } )
.option( "m", { alias: "maxage", describe: "Time a file should be cached for", type: "number" } )
.help()
.alias( "?", "help" )
.argv;

node app.js -p 8888 -i main.html

参考

源码