靜態服務器
使用node搭建一個可在任何目錄下通過命令啟動的一個簡單http靜態服務器
安裝：npm install yg-server -g
啟動：yg-server
可通過以上命令安裝，啟動，來看一下最終的效果
TODO
初始化
初始化靜態服務器
const http = require('http'); // http模塊const url = require('url'); // 解析路徑const path = require('path'); // path模塊const fs = require('fs'); // 文件處理模塊const mime = require('mime'); // 解析文件類型const crypto = require('crypto'); // 加密模塊const zlib = require('zlib'); // 壓縮const openbrowser = require('open'); //自動啟動瀏覽器 const handlebars = require('handlebars'); // 模版const templates = require('./templates'); // 用來渲染的模版文件class StaticServer { constructor(options) { this.host = options.host; this.port = options.port; this.rootPath = process.cwd(); this.cors = options.cors; this.openbrowser = options.openbrowser; }}處理錯誤響應
在寫具體業務前，先封裝幾個處理響應的函數，分別是錯誤的響應處理，沒有找到資源的響應處理，在后面會調用這么幾個函數來做響應
responseError(req, res, err) { res.writeHead(500); res.end(`there is something wrong in th server! please try later!`); } responseNotFound(req, res) { // 這里是用handlerbar處理了一個模版并返回，這個模版只是單純的一個寫著404html const html = handlebars.compile(templates.notFound)(); res.writeHead(404, { 'Content-Type': 'text/html' }); res.end(html); }處理緩存
在前面的一篇文章里我介紹過node處理緩存的幾種方式，這里為了方便我只使用的協商緩存，通過ETag來做驗證
cacheHandler(req, res, filepath) { return new Promise((resolve, reject) => { const readStream = fs.createReadStream(filepath); const md5 = crypto.createHash('md5'); const ifNoneMatch = req.headers['if-none-match']; readStream.on('data', data => { md5.update(data); }); readStream.on('end', () => { let etag = md5.digest('hex'); if (ifNoneMatch === etag) { resolve(true); } resolve(etag); }); readStream.on('error', err => { reject(err); }); }); }處理壓縮
compressHandler(req, res) { const acceptEncoding = req.headers['accept-encoding']; if (//bgzip/b/.test(acceptEncoding)) { res.setHeader('Content-Encoding', 'gzip'); return zlib.createGzip(); } else if (//bdeflate/b/.test(acceptEncoding)) { res.setHeader('Content-Encoding', 'deflate'); return zlib.createDeflate(); } else { return false; } }啟動靜態服務器
start() { const server = http.createSercer((req, res) => this.requestHandler(req, res)); server.listen(this.port, () => { if (this.openbrowser) { openbrowser(`http://${this.host}:${this.port}`); } console.log(`server started in http://${this.host}:${this.port}`); }); }請求處理
requestHandler(req, res) { // 通過url模塊解析請求路徑，獲取請求文件 const { pathname } = url.parse(req.url); // 獲取請求的文件路徑 const filepath = path.join(this.rootPath, pathname); // 判斷文件是否存在 fs.stat(filepath, (err, stat) => { if (!err) { if (stat.isDirectory()) { this.responseDirectory(req, res, filepath, pathname); } else { this.responseFile(req, res, filepath, stat); } } else { this.responseNotFound(req, res); } }); }處理請求的文件
responseFile(req, res, filepath, stat) { this.cacheHandler(req, res, filepath).then( data => { if (data === true) { res.writeHead(304); res.end(); } else { res.setHeader('Content-Type', mime.getType(filepath) + ';charset=utf-8'); res.setHeader('Etag', data); this.cors && res.setHeader('Access-Control-Allow-Origin', '*'); const compress = this.compressHandler(req, res); if (compress) { fs.createReadStream(filepath) .pipe(compress) .pipe(res); } else { fs.createReadStream(filepath).pipe(res); } } }, error => { this.responseError(req, res, error); } ); }處理請求的文件夾
responseDirectory(req, res, filepath, pathname) { fs.readdir(filepath, (err, files) => { if (!err) { const fileList = files.map(file => { const isDirectory = fs.statSync(filepath + '/' + file).isDirectory(); return { filename: file, url: path.join(pathname, file), isDirectory }; }); const html = handlebars.compile(templates.fileList)({ title: pathname, fileList }); res.setHeader('Content-Type', 'text/html'); res.end(html); } });app.js完整代碼
const http = require('http');const url = require('url');const path = require('path');const fs = require('fs');const mime = require('mime');const crypto = require('crypto');const zlib = require('zlib');const openbrowser = require('open');const handlebars = require('handlebars');const templates = require('./templates');class StaticServer { constructor(options) { this.host = options.host; this.port = options.port; this.rootPath = process.cwd(); this.cors = options.cors; this.openbrowser = options.openbrowser; } /** * handler request * @param {*} req * @param {*} res */ requestHandler(req, res) { const { pathname } = url.parse(req.url); const filepath = path.join(this.rootPath, pathname); // To check if a file exists fs.stat(filepath, (err, stat) => { if (!err) { if (stat.isDirectory()) { this.responseDirectory(req, res, filepath, pathname); } else { this.responseFile(req, res, filepath, stat); } } else { this.responseNotFound(req, res); } }); } /** * Reads the contents of a directory , response files list to client * @param {*} req * @param {*} res * @param {*} filepath */ responseDirectory(req, res, filepath, pathname) { fs.readdir(filepath, (err, files) => { if (!err) { const fileList = files.map(file => { const isDirectory = fs.statSync(filepath + '/' + file).isDirectory(); return { filename: file, url: path.join(pathname, file), isDirectory }; }); const html = handlebars.compile(templates.fileList)({ title: pathname, fileList }); res.setHeader('Content-Type', 'text/html'); res.end(html); } }); } /** * response resource * @param {*} req * @param {*} res * @param {*} filepath */ async responseFile(req, res, filepath, stat) { this.cacheHandler(req, res, filepath).then( data => { if (data === true) { res.writeHead(304); res.end(); } else { res.setHeader('Content-Type', mime.getType(filepath) + ';charset=utf-8'); res.setHeader('Etag', data); this.cors && res.setHeader('Access-Control-Allow-Origin', '*'); const compress = this.compressHandler(req, res); if (compress) { fs.createReadStream(filepath) .pipe(compress) .pipe(res); } else { fs.createReadStream(filepath).pipe(res); } } }, error => { this.responseError(req, res, error); } ); } /** * not found request file * @param {*} req * @param {*} res */ responseNotFound(req, res) { const html = handlebars.compile(templates.notFound)(); res.writeHead(404, { 'Content-Type': 'text/html' }); res.end(html); } /** * server error * @param {*} req * @param {*} res * @param {*} err */ responseError(req, res, err) { res.writeHead(500); res.end(`there is something wrong in th server! please try later!`); } /** * To check if a file have cache * @param {*} req * @param {*} res * @param {*} filepath */ cacheHandler(req, res, filepath) { return new Promise((resolve, reject) => { const readStream = fs.createReadStream(filepath); const md5 = crypto.createHash('md5'); const ifNoneMatch = req.headers['if-none-match']; readStream.on('data', data => { md5.update(data); }); readStream.on('end', () => { let etag = md5.digest('hex'); if (ifNoneMatch === etag) { resolve(true); } resolve(etag); }); readStream.on('error', err => { reject(err); }); }); } /** * compress file * @param {*} req * @param {*} res */ compressHandler(req, res) { const acceptEncoding = req.headers['accept-encoding']; if (//bgzip/b/.test(acceptEncoding)) { res.setHeader('Content-Encoding', 'gzip'); return zlib.createGzip(); } else if (//bdeflate/b/.test(acceptEncoding)) { res.setHeader('Content-Encoding', 'deflate'); return zlib.createDeflate(); } else { return false; } } /** * server start */ start() { const server = http.createServer((req, res) => this.requestHandler(req, res)); server.listen(this.port, () => { if (this.openbrowser) { openbrowser(`http://${this.host}:${this.port}`); } console.log(`server started in http://${this.host}:${this.port}`); }); }}module.exports = StaticServer;創建命令行工具
module.exports = { host: 'localhost', port: 3000, cors: true, openbrowser: true, index: 'index.html', charset: 'utf8'};#! /usr/bin/env nodeconst yargs = require('yargs');const path = require('path');const config = require('./config');const StaticServer = require('../src/app');const pkg = require(path.join(__dirname, '..', 'package.json'));const options = yargs .version(pkg.name + '@' + pkg.version) .usage('yg-server [options]') .option('p', { alias: 'port', describe: '設置服務器端口號', type: 'number', default: config.port }) .option('o', { alias: 'openbrowser', describe: '是否打開瀏覽器', type: 'boolean', default: config.openbrowser }) .option('n', { alias: 'host', describe: '設置主機名', type: 'string', default: config.host }) .option('c', { alias: 'cors', describe: '是否允許跨域', type: 'string', default: config.cors }) .option('v', { alias: 'version', type: 'string' }) .example('yg-server -p 8000 -o localhost', '在根目錄開啟監聽8000端口的靜態服務器') .help('h').argv;const server = new StaticServer(options);server.start();入口文件
最后回到根目錄下的index.js，將我們的模塊導出，這樣可以在根目錄下通過node index來調試
module.exports = require('./bin/static-server');配置命令
配置命令非常簡單，進入到package.json文件里
加入一句話
"bin": { "yg-server": "bin/static-server.js" },總結
寫到這里基本上就寫完了，另外還有幾個模版文件，是用來在客戶端展示的，可以看我的github，我就不貼了，只是一些html而已，你也可以自己設置，這個博客寫多了是在是太卡了，字都打不動了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
