當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

用node搭一个静态服务

發(fā)布時(shí)間：2025/3/21 编程问答 49 豆豆

生活随笔收集整理的這篇文章主要介紹了用node搭一个静态服务小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

如何搭一個(gè)靜態(tài)服務(wù)

新建一個(gè)文件夾

初始化 npm init -y

所用到的模塊

http-server 起服務(wù)
mime chalk debug ejs 所需模塊
http fs util path自帶模塊
yargs

目錄結(jié)構(gòu)

啟動(dòng)一個(gè)服務(wù)需要 src/congfig文件

運(yùn)行的條件指定主機(jī)名
指定啟動(dòng)的端口號(hào)
自定運(yùn)行的目錄

通過config配置 app起服務(wù) tepl編譯 bin和package.json鏈接命令行

配置

config.js

//將配置掛載在我們的實(shí)例上,方便后期手動(dòng)指定,直接get就可以 let path = require('path') let config = {hostname : '127.0.0.1', //主機(jī)port:3000, //端口號(hào)dir:path.join(__dirname, 'public') } module.exports = config; 復(fù)制代碼

tmpl

<body><%dirs.map(item=>{%><li><a href="<%=item.pathname%>"><%=item.filename%></a></li> <%})%> </body> 復(fù)制代碼

配置全局管理 （全局映射關(guān)系）

package.json

//添加bin配置 "bin": { "zdl": "bin/www.js" }, 復(fù)制代碼

執(zhí)行npm link

bin/www.js 用此文件作為入口，幫我們引用app.js

#! /usr/bin/env node //yargs用法在命令行輸入`zdl --help`測(cè)試是否生效 // 第一執(zhí)行了命令后會(huì)執(zhí)行 bin/www.js let yargs = require('yargs') let argv = yargs.option('port', {alias: 'p',default: 3000, //默認(rèn)demand: false, //是否必填description: 'this is port' }).option('hostname', {alias: 'host',default: 'localhost',type: String, //類型demand: false,description: 'this is hostname' }).option('dir', {alias: 'd',default: process.cwd(),type: String,demand: false,description: 'this is cwd' }).usage('zdl [options]').argv; //用法提示 //用此文件作為入口，幫我們引用app.js let Server = require('../src/app'); new Server(argv).start(); // 開啟服務(wù) //相當(dāng)于在app.js執(zhí)行 //let server = new Server(argv); //server.start(); 復(fù)制代碼

app.js

架子

// 實(shí)現(xiàn)一個(gè)靜態(tài)服務(wù) let http = require('http'); let fs = require('fs'); let url = require('url'); let util = require('util'); let path = require('path');let mime = require('mime'); let ejs = require('ejs'); // 渲染模板 let chalk = require('chalk'); // 粉筆 let debug = require('debug')('*');//所有的都輸出 // 第二個(gè)參數(shù)可以指定環(huán)境變量在為什么值時(shí)才打印 // window set DEBUG=XXX export DEBUG=XXXXclass Server {constructor(args) { //config在調(diào)用此文件時(shí)傳參argsconstructor(args) {this.config = {...config,...args},this.template = template;//渲染模版}async handleRequest(req, res) { // 這里的this都是實(shí)例let { pathname } = url.parse(req.url, true);let p = path.join(this.config.dir, pathname);try{let statObj = await stat(p);if (statObj.isDirectory()) {//若是文件夾直接渲染數(shù)據(jù)let dirs = await readdir(p);dirs = dirs.map(dir => { return {filename: dir, pathname: path.join(pathname, dir)}}); let str = ejs.render(this.template, { dirs, title: 'ejs' });//template渲染模板,數(shù)據(jù),渲染結(jié)果是字符串res.setHeader('Content-Type', 'text/html;charset=utf8');res.end(str);} else {// 文件發(fā)送文件this.sendFile(req, res, p, statObj);}} catch (e) {// 文件不存在的情況this.sendError(req, res, e);}}//創(chuàng)建服務(wù)start() {let server = http.createServer(this.handleRequest.bind(this));//this.handleRequest,this是回調(diào)函數(shù)的this,也可以在該函數(shù)return 箭頭函數(shù)let { hostname, port } = this.config;debug(`http://${hostname}:${chalk.green(port)} start`)server.listen(port, hostname);}//錯(cuò)誤處理sendError(){// 解析字符串打印對(duì)象//debug(util.inspect(e).toString());res.statusCode = 404;res.end(`Not Found`);}//發(fā)送文件sendFile(){...} }module.exports = Server; 復(fù)制代碼

添加功能

添加的三個(gè)功能都是http的應(yīng)用，想更具體請(qǐng)參考node~http緩存

class Server {// 添加緩存功能呢cache(req, res, p, stat) {}//添加壓縮功能gzip(req, res, p, stat) {}//添加范圍請(qǐng)求功能range(req, res, p, stat) {}//如果是文件sendFile(req, res, p, stat) {} } 復(fù)制代碼

如果是目錄就將目錄中的內(nèi)容展現(xiàn)出來. 如果是文件就將文件展示出來

cache

// 添加緩存功能呢cache(req, res, p, stat) { //Catch-Control Expries if-modified-since if-none-matchlet since = req.headers['if-modified-since'];let match = req.headers['if-none-match'];let ssince = stat.ctime.toUTCString();let smatch = stat.ctime.getTime() + stat.size;res.setHeader('Last-Modified', ssince);res.setHeader('ETag', smatch);res.setHeader('Cache-Control', 'max-age=6');if (since != ssince) {debug(since, ssince);return false;}if (match != smatch) {debug(match, smatch);return false}return true;}//如果是文件sendFile(req, res, p, stat) {if (this.cache(req, res, p, stat)) {// 檢測(cè)是否有緩存res.statusCode = 304;res.end();return;}res.setHeader('Content-Type', mime.getType(p) + ';charset=utf8');fs.createReadStream(p, { start, end }).pipe(res);} 復(fù)制代碼

gzip

//添加壓縮功能gzip(req, res, p, stat) {let header = req.headers['accept-encoding'];if (header) {if (header.match(/\bgzip\b/)) {res.setHeader('Content-Encoding', 'gzip')return zlib.createGzip();} else if (header.match(/\bdeflate\b/)) {res.setHeader('Content-Encoding', 'deflate')return zlib.createDeflate();}} else {return false;}}//如果是文件sendFile(req, res, p, stat) {...let compress = this.gzip(req, res, p, stat);if (compress) { // 返回的是一個(gè)壓縮流res.setHeader('Content-Type', mime.getType(p) + ';charset=utf8');fs.createReadStream(p).pipe(compress).pipe(res);} else {res.setHeader('Content-Type', mime.getType(p) + ';charset=utf8');fs.createReadStream(p).pipe(res);}} 復(fù)制代碼

range

//添加范圍請(qǐng)求功能range(req, res, p, stat) {let range = req.headers['range'];if(range){let [, start, end] = range.match(/(\d*)-(\d*)/) || [];start = start ? parseInt(start) : 0;end = end ? parseInt(end) : stat.size;res.statusCode = 206;res.setHeader('Accept-Ranges', 'bytes');res.setHeader('Content-Length', end - start + 1);res.setHeader('Content-Range', `bytes ${start}-${end}/${stat.size}`);return { start, end };}else{return {start:0,end:stat.size}}}//如果是文件sendFile(req, res, p, stat) {let { start, end } = this.range(req, res, p, stat);if (compress) { // 返回的是一個(gè)壓縮流res.setHeader('Content-Type', mime.getType(p) + ';charset=utf8');fs.createReadStream(p, { start, end }).pipe(compress).pipe(res);} else {res.setHeader('Content-Type', mime.getType(p) + ';charset=utf8');fs.createReadStream(p, { start, end }).pipe(res);}} 復(fù)制代碼

小結(jié)

以下是整個(gè)app.js的內(nèi)容

// 實(shí)現(xiàn)一個(gè)靜態(tài)服務(wù) // 如果是目錄就將目錄中的內(nèi)容展現(xiàn)出來 // 如果是文件就將文件展示出來 let http = require('http'); let fs = require('fs'); let url = require('url'); let zlib = require('zlib'); let util = require('util'); let path = require('path');let mime = require('mime'); let ejs = require('ejs'); // 渲染模板 let chalk = require('chalk'); // 粉筆 // 第二個(gè)參數(shù)可以指定環(huán)境變量在為什么值時(shí)才打印 // window set DEBUG=XXX export DEBUG=XXXX let debug = require('debug')('*'); // 運(yùn)行的條件指定主機(jī)名 // 指定啟動(dòng)的端口號(hào) // 自定運(yùn)行的目錄 let stat = util.promisify(fs.stat); let readdir = util.promisify(fs.readdir); let config = require('./config'); let template = fs.readFileSync(path.resolve(__dirname, 'tmpl.html'), 'utf8'); class Server {constructor(args) {this.config = { ...config, ...args };// 將配置掛載在我們的實(shí)例上this.template = template;}async handleRequest(req, res) { // 這里的this都是實(shí)例let { pathname } = url.parse(req.url, true);let p = path.join(this.config.dir, pathname);// 1.根據(jù)路徑如果是文件夾顯示文件夾里的內(nèi)容// 2.如果是文件顯示文件的內(nèi)容try { // 如果沒錯(cuò)誤說明文件存在let statObj = await stat(p);if (statObj.isDirectory()) {// 現(xiàn)在需要一個(gè)當(dāng)前目錄下的解析出的對(duì)象或者數(shù)組let dirs = await readdir(p);dirs = dirs.map(dir => { // dirs就是要渲染的數(shù)據(jù)return {filename: dir,pathname: path.join(pathname, dir)}});let str = ejs.render(this.template, { dirs, title: 'ejs' });res.setHeader('Content-Type', 'text/html;charset=utf8');res.end(str);} else {// 文件發(fā)送文件this.sendFile(req, res, p, statObj);}} catch (e) {// 文件不存在的情況this.sendError(req, res, e);}}// 實(shí)現(xiàn)其他功能// 實(shí)現(xiàn)范圍請(qǐng)求// 實(shí)現(xiàn)緩存// 服務(wù)器 Cache-Control Expires // Last-Modified ETag:ctime+size// 客戶端// if-modified-since if-none-matchcache(req, res, p, stat) {// 實(shí)現(xiàn)緩存 let since = req.headers['if-modified-since'];let match = req.headers['if-none-match'];let ssince = stat.ctime.toUTCString();let smatch = stat.ctime.getTime() + stat.size;res.setHeader('Last-Modified', ssince);res.setHeader('ETag', smatch);res.setHeader('Cache-Control', 'max-age=6');if (since != ssince) {debug(since, ssince);return false;}if (match != smatch) {debug(match, smatch);return false}return true;}// 實(shí)現(xiàn)服務(wù)端壓縮gzip(req, res, p, stat) {let header = req.headers['accept-encoding'];if (header) {if (header.match(/\bgzip\b/)) {res.setHeader('Content-Encoding', 'gzip')return zlib.createGzip();} else if (header.match(/\bdeflate\b/)) {res.setHeader('Content-Encoding', 'deflate')return zlib.createDeflate();}} else {return false;}}range(req, res, p, stat) {let range = req.headers['range'];if(range){let [, start, end] = range.match(/(\d*)-(\d*)/) || [];start = start ? parseInt(start) : 0;end = end ? parseInt(end) : stat.size;res.statusCode = 206;res.setHeader('Accept-Ranges', 'bytes');res.setHeader('Content-Length', end - start + 1);res.setHeader('Content-Range', `bytes ${start}-${end}/${stat.size}`);return { start, end };}else{return {start:0,end:stat.size}}}sendFile(req, res, p, stat) {if (this.cache(req, res, p, stat)) {// 檢測(cè)是否有緩存res.statusCode = 304;res.end();return};let compress = this.gzip(req, res, p, stat);let { start, end } = this.range(req, res, p, stat); //范圍請(qǐng)求，返回開始位置和結(jié)束位置if (compress) { // 返回的是一個(gè)壓縮流res.setHeader('Content-Type', mime.getType(p) + ';charset=utf8');fs.createReadStream(p, { start, end }).pipe(compress).pipe(res);} else {res.setHeader('Content-Type', mime.getType(p) + ';charset=utf8');fs.createReadStream(p, { start, end }).pipe(res);}}sendError(req, res, e) {// 解析字符串打印對(duì)象//debug(util.inspect(e).toString());res.statusCode = 404;res.end(`Not Found`);}start() {let server = http.createServer(this.handleRequest.bind(this));let { hostname, port } = this.config;debug(`http://${hostname}:${chalk.green(port)} start`)server.listen(port, hostname);} } // 開啟一個(gè)服務(wù) module.exports = Server 復(fù)制代碼

現(xiàn)在你只需要在cmd里面輸入zdl就可以啟動(dòng)一個(gè)靜態(tài)服務(wù)了

發(fā)布到npm

發(fā)包

在用的時(shí)候我們可以直接 npm install [name] 然后zdl運(yùn)行

總結(jié)

以上是生活随笔為你收集整理的用node搭一个静态服务的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

静态
node

上一篇：二、1、怎么做都好做，没flag就抓包
下一篇： html基础1-基本语法/段落标签/特殊