Node手把手構建靜態檔案伺服器

嘿_那個誰發表於2018-03-03

伺服器

Node手把手構建一個靜態檔案伺服器

這篇文章主要將會通過node手把手的構建一個靜態檔案伺服器，那麼廢話不多說，開發流程走起來，我們先看一下將要做的這個靜態檔案伺服器將會有哪些功能？

這個靜態檔案伺服器有哪些功能？

讀取靜態檔案
MIME型別支援
支援壓縮
支援斷點續傳
支援快取與快取控制
實現命令列呼叫
最後將程式碼釋出到npm，可通過npm install -g全域性安裝

好了，通過以上的功能梳理，那麼我們需要實現的功能就很明確了，也就相當於我們專案開發過程中的需求現在已經確定了（原諒我這些天被公司專案別急了），接下來就一步步開始實現功能吧。

功能實現——讀取靜態檔案+MIME型別支援

project
 |---bin 命令列實現放置指令碼
 |
 |---public 靜態檔案伺服器預設靜態資料夾
 |
 |---src 實現功能的相關程式碼
 |   |
 |   |__template 模板資料夾
 |   |
 |   |__app.js 主要功能檔案
 |   |__config.js 配置檔案
 |
 |---package.josn （這個不用多說了吧）

複製程式碼

然後開始實現功能，我們將會通過node的http模組來啟動一個服務，這裡我先將功能（讀取靜態檔案、MIME型別支援）的實現整體程式碼貼出來，再慢慢道來：

const http = require('http')
const path = require('path')
const url = require('url')
const fs = require('fs')
let chalk = require('chalk');
process.env.DEBUG = 'static:*';
let debug = require('debug')('static:app');//每個debug例項都有一個名字，是否在控制檯列印取決於環境變數中DEBUG的值是否等於static:app
const mime = require('mime');
const {promisify} = require('util')
let handlebars = require('handlebars');

const config = require('./config')
const stat = promisify(fs.stat)
const readDir = promisify(fs.readdir)
//獲取編譯模板
function getTemplet() {
    let tmpl = fs.readFileSync(path.resolve(__dirname, 'template', 'list.html'), 'utf8');
    return handlebars.compile(tmpl);
}
class Server {
    constructor(argv) {
        this.config = Object.assign({}, config, argv);
        this.list = getTemplet();
    }
    //啟動服務
    start() {
        let server = http.createServer();
        server.on('request', this.request.bind(this))
        server.listen(this.config.port);
        let url=`http://${this.config.host}:${this.config.port}`;
        debug(`靜態服務啟動成功${chalk.green(url)}`);
    }
    async request(req, res) {//服務監聽函式
        let pathName = url.parse(req.url).path;
        let filePath = path.join(this.config.root, pathName);
        if (filePath.indexOf('favicon.ico') > 0) {
            this.sendError(req, res, 'not found');
            return
        }
        try {//在靜態服務資料夾存在訪問的路徑內容
            let statObj = await stat(filePath);
            if (statObj.isDirectory()) {//是資料夾
                let directories = await readDir(filePath);
                let files = directories.map(file => {
                    return {
                        filename: file,
                        url: path.join(pathName, file)
                    }
                });
                let htmls = this.list({
                    title: pathName,
                    files
                });
                res.setHeader('Content-Type', 'text/html');
                res.end(htmls);
            } else {//是檔案
                this.sendContent(req, res, filePath, statObj);
            }
        } catch (err) {//靜態伺服器內容不存在訪問內容
            this.sendError(req, res, err);
        }
    }
    sendContent(req, res, filePath, statObj) {//向客戶端響應內容
        let fileType = mime.getType(filePath);
        res.setHeader('Content-Type', `${fileType};charset=UTF-8`);
        let rs = this.getStream(filePath);//獲取檔案的可讀流
        rs.pipe(res);
    }
    getStream(filePath) {//返回一個可讀流
        return fs.createReadStream(filePath);
    }
    sendError(req, res, err) {//傳送錯誤
        res.statusCode = 500;
        res.end(`${err.toString()}`)
    }
}
module.exports = Server;
複製程式碼

通過以上的程式碼，我們可以看出，我這裡是建立了一個Server類，然後通過在呼叫Server類的start()方法來啟動這樣一個服務，在Server類當中有以下方法：

start 用來啟動服務的——這個方法裡面主要是通過node的http模組來啟動一個服務，並監聽對應的埠
request 服務監聽函式——這個方法主要是對啟動服務的監聽，具體邏輯這裡還是在程式碼中通過註釋來說明吧：

 async request(req, res) {//服務監聽函式
         let pathName = url.parse(req.url).path;//獲取到客戶端要訪問的伺服器路徑
         let filePath = path.join(this.config.root, pathName);//客戶端要訪問的路徑得到該路徑在伺服器上的對應伺服器物理路徑
         if (filePath.indexOf('favicon.ico') > 0) {//這個判斷主要是為了去掉網站預設favicon.ico的請求報錯
             this.sendError(req, res, 'not found');
             return
         }
         try {//在靜態伺服器存在訪問路徑內容
             let statObj = await stat(filePath);//通過node來獲取該路徑下的檔案資訊
             if (statObj.isDirectory()) {//如果該路徑是對應的資料夾
                 let directories = await readDir(filePath);//讀取該資料夾裡面的檔案內容，readDir其實是我定義的const readDir = promisify(fs.readdir)

                 let files = directories.map(file => {//這裡主要是為了生成返回html模板內容的對應資料結構如： {title:'顯示的頁面標題',files:[{filename:'1',url:'/1'}]};

                     return {
                         filename: file,
                         url: path.join(pathName, file)
                     }
                 });
                 let htmls = this.list({//呼叫模板引擎的渲染方法，這就不對模板引擎做過多說明了，會在最後附上模板引擎的相關連線，這裡用的handlebars
                     title: pathName,
                     files
                 });
                 res.setHeader('Content-Type', 'text/html');//因為返回的是html頁面，所以需要設定請求頭，告訴客戶端如何來解析
                 res.end(htmls);//將讀取到的html傳送給客戶端
             } else {
                 this.sendContent(req, res, filePath, statObj);//呼叫Server類的sendContent方法,向客戶端傳送內容
             }
         } catch (err) {//靜態伺服器不存在訪問內容
             this.sendError(req, res, err);//呼叫Server類的sendError方法，向客戶端傳送錯誤資訊
         }
     }
複製程式碼

程式碼的解讀我會根據上一個方法的呼叫來一個個的逐行解讀，那麼接下來時sendContent

sendContent 向客戶端傳送內容，程式碼段如下：

 sendContent(req, res, filePath, statObj) {//向客戶端響應內容
         let fileType = mime.getType(filePath);//這裡是為了實現對MIME型別的支援，所以這裡需要判斷訪問路徑的檔案的MIME型別，主要是通過npm上的mime包來獲取
         res.setHeader('Content-Type', `${fileType};charset=UTF-8`);//設定對應MIME的http響應頭，這樣客戶端才能對應的解析
         let rs = this.getStream(filePath);//獲取對應路徑檔案的可讀流
         rs.pipe(res);//向客戶端傳送內容，這主要是因為res本身就是一個流
     }
複製程式碼

那麼同樣逐行解讀Server類的getStream方法

getStream 獲取一個流物件，程式碼如下：

 getStream(filePath) {
         return fs.createReadStream(filePath);//返回一個可讀流，供sendContent方法使用
     }
複製程式碼

那麼以上就已經完成了向客戶端返回對應的訪問路徑資訊了，最後還剩一個Server類的sendError方法，這個方法主要是向客戶端傳送一個錯誤資訊。

sendError 傳送錯誤資訊，程式碼段如下：

 sendError(req, res, err) {//傳送錯誤
        res.statusCode = 500;//設定錯誤碼
        res.end(`${err.toString()}`)//向客戶端傳送對應的錯誤資訊字串
    }
複製程式碼

那麼以上的程式碼就實現了一個這個靜態伺服器的——1.讀取靜態檔案。2.MIME型別支援。這樣兩個功能點，對應的程式碼檔案app.js github地址

功能實現——支援壓縮

因為這個功能點的實現都是基於前面已實現的功能（讀取靜態檔案、MIME型別支援）的基礎上來做的，所以前面那些基礎的就不再做說明，同樣的是先貼上完整程式碼，然後再講壓縮的實現思路、以及壓縮的功能實現的核心程式碼。整體程式碼如下:
```javascript
//新增上檔案壓縮，實現功能有——讀取靜態檔案、MIME型別支援，支援壓縮
const http = require('http')
const path = require('path')
const url = require('url')
const fs = require('fs')
const mime = require('mime')
var zlib = require('zlib');
let chalk = require('chalk');
process.env.DEBUG = 'static:app';
let debug = require('debug')('static:app');//每個debug例項都有一個名字，是否在控制檯列印取決於環境變數中DEBUG的值是否等於static:app
const {promisify} = require('util')
let handlebars = require('handlebars');

const config = require('./config')
const stat = promisify(fs.stat)
const readDir = promisify(fs.readdir)

//獲取編譯模板
function getTemplet() {
    let tmpl = fs.readFileSync(path.resolve(__dirname, 'template', 'list.html'), 'utf8');
    return handlebars.compile(tmpl);
}
class Server {
    constructor(argv) {
        this.config = Object.assign({}, config, argv);
        this.list = getTemplet()
    }
    //啟動服務
    start() {
        let server = http.createServer();
        server.on('request', this.request.bind(this))
        server.listen(this.config.port);
        let url=`http://${this.config.host}:${this.config.port}`;
        debug(`靜態服務啟動成功${chalk.green(url)}`);
    }
    async request(req, res) {//服務監聽函式
        let pathName = url.parse(req.url).path;
        let filePath = path.join(this.config.root, pathName);
        if (filePath.indexOf('favicon.ico') > 0) {
            this.sendError(req, res, 'not found',404);
            return
        }
        try {//在靜態服務資料夾存在訪問的路徑內容
            let statObj = await stat(filePath);
            if (statObj.isDirectory()) {//是資料夾
                let directories = await readDir(filePath);
                let files = directories.map(file => {
                    return {
                        filename: file,
                        url: path.join(pathName, file)
                    }
                });
                let htmls = this.list({
                    title: pathName,
                    files
                });
                res.setHeader('Content-Type', 'text/html');
                res.end(htmls);
            } else {//是檔案
                this.sendContent(req, res, filePath, statObj);
            }
        } catch (err) {//靜態伺服器不存在訪問內容
            this.sendError(req, res, err);
        }
    }
    sendContent(req, res, filePath, statObj) {//向客戶端響應內容
        let fileType = mime.getType(filePath);
        res.setHeader('Content-Type', `${fileType};charset=UTF-8`);
        let enCoding=this.sourceGzip(req,res);
        let rs = this.getStream(filePath);//獲取檔案的可讀流
        if(enCoding){//開啟壓縮傳輸模式
            rs.pipe(enCoding).pipe(res);
        }else{
            rs.pipe(res);
        }

    }
    sourceGzip(req,res){//資源開啟壓縮傳輸
    //    Accept-Encoding:gzip, deflate, sdch, br
        let encoding=req.headers['accept-encoding'];
        if(/\bgzip\b/.test(encoding)){//gzip壓縮格式
            res.setHeader('Content-Encoding','gzip');
            return zlib.createGzip();
        }else if(/\bdeflate\b/.test(encoding)){//deflate壓縮格式
            res.setHeader('Content-Encoding','deflate');
            return zlib.createDeflate();
        }else{
            return null;
        }
    }
    getStream(filePath) {//返回一個可讀流
        return fs.createReadStream(filePath);
    }
    sendError(req, res, err,errCode) {//傳送錯誤
        if(errCode){
            res.statusCode=errCode;
        }else{
            res.statusCode = 500;
        }
        res.end(`${err.toString()}`)
    }
}
module.exports = Server;
```
通過以上程式碼我們會發現，這裡程式碼只是對像客戶端傳送內容做的sendContent方法做了修改，所以，這裡將會只講sendContent以及sendContent裡面與壓縮相關的sourceGzip方法：
那麼我們一起來看看sendContent和sourceGzip方法吧，程式碼如下：
```javascript
    sendContent(req, res, filePath, statObj) {//向客戶端響應內容
            let fileType = mime.getType(filePath);
            res.setHeader('Content-Type', `${fileType};charset=UTF-8`);
            let enCoding=this.sourceGzip(req,res);//呼叫sourceGzip，來實現資源壓縮傳輸
            let rs = this.getStream(filePath);//獲取檔案的可讀流
            if(enCoding){////如果客戶端支援壓縮格式傳輸，那麼就以壓縮方式傳輸資料
                rs.pipe(enCoding).pipe(res);//向客戶端傳送壓縮格式資料
            }else{
                rs.pipe(res);
            }

        }
     sourceGzip(req,res){//資源開啟壓縮傳輸
         //    Accept-Encoding:gzip, deflate, sdch, br，客戶端會傳送這樣的請求頭，給伺服器判斷
             let encoding=req.headers['accept-encoding'];//獲取客戶端傳送的壓縮相關的請求頭資訊，
             if(/\bgzip\b/.test(encoding)){//客戶端支援gzip壓縮格式
                 res.setHeader('Content-Encoding','gzip');//設定請求頭
                 return zlib.createGzip();//建立並返回一個Gzip流物件
             }else if(/\bdeflate\b/.test(encoding)){//客戶端支援deflate壓縮格式
                 res.setHeader('Content-Encoding','deflate');//設定請求頭
                 return zlib.createDeflate();//建立並返回一個Deflate流物件
             }else{//代表客戶端不支援壓縮格式資料傳輸，
                 return null;
             }
         }

```
複製程式碼

以上就是對實現資料壓縮傳輸的程式碼實現說明，那麼到這裡，總共就已經實現了三個功能（讀取靜態檔案、MIME型別的支援，支援壓縮），對應的程式碼檔案appGzip.js github地址;

功能實現——斷點續傳（同樣是在appGzip.js的基礎上繼續開發）

因為現在的完整程式碼越來越多了，所以我這裡就不再貼完整的程式碼了，就貼對應功能的核心程式碼吧，最後再附上完整的檔案連結地址。這個功能主要是在獲取檔案流的方法getStream裡面去擴充套件的，斷點續傳的個核心功能如下：

  getStream(req,res,filePath,statObj) {//返回一個可讀流
          let start = 0;//可讀流的起司位置
          let end = statObj.size - 1;//可讀流的結束位置
          let range = req.headers['range'];//獲取客戶端的range請求頭資訊，Server通過請求頭中的Range: bytes=0-xxx來判斷是否是做Range請求
          if (range) {//斷點續傳
              res.setHeader('Accept-Range', 'bytes');
              res.statusCode = 206;//返回指定內容的狀態碼
              let result = range.match(/bytes=(\d*)-(\d*)/);//斷點續傳的分段內容
              if (result) {
                  start = isNaN(result[1]) ? start : parseInt(result[1]);
                  end = isNaN(result[2]) ? end : parseInt(result[2]) - 1;
              }
          }
          return fs.createReadStream(filePath, {//返回一個指定起始位置和結束位置的可讀流
              start, end
          });
      }
複製程式碼

那麼上面的程式碼就已經實現了檔案的斷點續傳了，對應完整程式碼檔案github地址;接下來，將繼續實現【支援快取與快取控制】這樣一個功能點；

功能實現——斷點續傳（同樣是在前面所有已完成功能基礎上繼續開發）

之所以要實現快取的支援與控制，主要是為了讓客戶端在訪問服務端時以最小的資料傳輸量得到服務端最新的資源。其實現程式碼如下：

sendContent(req, res, filePath, statObj) {//向客戶端響應內容
        if (this.checkCache(req, res, filePath, statObj)) return; //通過sendContent方法實現快取校驗
        let fileType = mime.getType(filePath);
        res.setHeader('Content-Type', `${fileType};charset=UTF-8`);
        let enCoding=this.sourceGzip(req,res);
        let rs = this.getStream(req,res,filePath,statObj);//獲取檔案的可讀流
        if(enCoding){//開啟壓縮傳輸模式
            rs.pipe(enCoding).pipe(res);
        }else{
            rs.pipe(res);
        }

    }
    checkCache(req,res,filePath,statObj){//校驗快取
        let ifModifiedSince = req.headers['if-modified-since'];//當資源過期時（使用Cache-Control標識的max-age），發現資源具有Last-Modified宣告，則再次向伺服器請求時帶上頭If-Modified-Since。
        let isNoneMatch = req.headers['is-none-match'];//客戶端想判斷快取是否可用可以先獲取快取中文件的ETag，然後通過If-None-Match傳送請求給Web伺服器詢問此快取是否可用。
        res.setHeader('Cache-Control', 'private,max-age=10');//Cache-Control private 客戶端可以快取,max-age=10 快取內容將在10秒後失效
        res.setHeader('Expires', new Date(Date.now() + 10 * 1000).toGMTString());//伺服器響應訊息頭欄位，在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器快取取資料
        let etag = statObj.size;
        let lastModified = statObj.ctime.toGMTString();
        res.setHeader('ETag', etag);//ETag是實體標籤的縮寫，根據實體內容生成的一段hash字串,可以標識資源的狀態。當資源發生改變時，ETag也隨之發生變化。 ETag是Web服務端產生的，然後發給瀏覽器客戶端。
        res.setHeader('Last-Modified', lastModified);//伺服器檔案的最後修改時間
        if (isNoneMatch && isNoneMatch != etag) {//快取過期
            return false;
        }
        if (ifModifiedSince && ifModifiedSince != lastModified) {//換存過期
            return false;
        }
        if (isNoneMatch || ifModifiedSince) {//快取有效
            res.writeHead(304);
            res.end();
            return true;
        } else {//快取無效
            return false;
        }

    }
複製程式碼

那麼以上程式碼就已經把靜態伺服器的【讀取靜態檔案、MIME型別支援、支援壓縮、支援斷點續傳、支援快取與快取控制】這些功能都已經實現了，完整的程式碼檔案GitHub地址,接下來將要實現命令列呼叫我們的靜態檔案伺服器啟用；

功能實現——命令列呼叫

命令列呼叫的功能主要是什麼？如果沒有命令列呼叫，如果我們想要執行我們這個app.js，那麼就只能是先cmd進入命令列皮膚，然後在裡面輸入node app.js才能執行app.js。如果我們做了命令列呼叫，那麼我們只需要自定義一個命令假如叫Myserver，這個命令主要功能主要就是執行app.js,那麼我們在cmd命令列裡面就只要輸入Myserver就能實現了，而且還可以通過命令列來實現傳參。例如：我們平時看電腦的ip地址時，我們可以在命令列中輸入ipconfig，就會顯示資訊，也可以通過ipconfig /all 這樣一個命令來顯示完整資訊，那麼後面的這個/all就相當於一個篩選引數了，這樣子就想Linux裡面的命令一樣了，這裡就不再做太多說明了，這裡主要講一下如何將我們的靜態伺服器通過命令列來呼叫；首先在package.json中提供一個bin欄位，主要是將包裡包含可執行檔案，通過設定這個欄位可以將它們包含到系統的PATH中，這樣直接就可以執行。我這裡新增的bin欄位如下： javascript "bin": { "rcw-staticserver": "bin/app" } 這裡是主要是將rcw-staticserver這個欄位設定到系統PATH當中去，然後記得一定要執行一次npm link，從而將命令執行內容路徑改到，bin/app檔案來。那麼我這裡就能通過在命令列輸入rcw-staticserver來啟動我的靜態檔案伺服器了。那麼bin資料夾下的app檔案程式碼內容如下：

```javascript

    #! /usr/bin/env node     //這段程式碼一定要寫在開頭，為了相容各個電腦平臺的差異性
    const yargs = require('yargs');//yargs模組，主要是用它提供的argv物件，用來讀取命令列引數
    let Server = require('../src/appCache.js');
    const child = require('child_process');
    const path=require('path')
    const os = require('os');
    let argv = yargs.option('d', {//通過-d別名或者--root 資料夾名稱來指定對應的靜態檔案伺服器的資料夾目錄
        alias: 'root',//指令變數名稱
        demand: 'false',//是否必傳欄位
        type: 'string',//輸入值型別
        default: path.resolve(process.cwd(),'public'),//預設值
        description: '靜態檔案根目錄'//欄位描述
    }).option('o', {
        alias: 'host',
        demand: 'false',
        default: 'localhost',
        type: 'string',
        description: '請配置監聽的主機'
    }).option('p', {
        alias: 'port',
        demand: 'false',
        type: 'number',
        default: 9898,
        description: '請配置埠號'
    })
        .usage('rcw-staticserver [options]')//使用示例
        .example(
            'rcw-staticserver -d / -p 9898 -o localhost', '在本機的9898埠上監聽客戶端的請求'
        ).help('h').argv;

    let server = new Server(argv).start();//啟動我的靜態檔案伺服器
```
這樣子的話我就能在命令列當中通過輸入rcw-staticserver來直接啟動靜態檔案伺服器了，那麼命令列呼叫的功能也就實現了。
複製程式碼

功能實現——程式碼釋出到npm，可通過npm install -g全域性安裝。

這個功能其實相對來說就很簡單了，首先要有個npm官網的賬號，沒有的請自覺註冊吧。命令列裡通過npm login先登入自己的npm賬號，然後再執行npm publish，這個包就很輕鬆的釋出到npm上面去了，也就可以通過npm install -g來進行全域性安裝了。

通過以上的操作我們一個靜態檔案伺服器就已經實現了哦！有不好和錯誤的地方，請大家多多指教。

完整程式碼GitHub地址

參考文獻：

Node構建一個靜態檔案伺服器
2018-03-20
伺服器
node: anywhere隨啟隨用的靜態檔案伺服器
2019-02-16
伺服器
Node.js一行程式碼實現靜態檔案伺服器
2019-05-06
Node.js行程伺服器
Node.js 靜態伺服器新知
2018-03-02
Node.js伺服器
搭建Node.js靜態伺服器
2018-03-17
Node.js伺服器
Sanic 靜態檔案
2019-04-01
手寫Node靜態資源伺服器
2019-02-16
伺服器
nginx偽靜態檔案
2020-12-22
Nginx
使用nginx快取伺服器上的靜態檔案
2018-05-10
Nginx快取伺服器
使用node構建檔案重新命名指令碼工具
2018-09-13
指令碼
構建靜態頁面之 [ 列表 ]
2018-08-28
構建靜態頁面之 [ 表格 ]
2018-08-28
Nginx 靜態檔案伺服器搭建及autoindex模組解析
2020-08-03
Nginx伺服器Index
Node.js 系列 - 搭建靜態資源伺服器
2018-10-29
Node.js伺服器
Node.js 系列 – 搭建靜態資源伺服器
2019-03-04
Node.js伺服器
node靜態伺服器斷點續傳實現
2018-03-04
伺服器斷點
構建靜態頁面之 [ 表單 ]
2019-02-16
c# .Net Core靜態檔案伺服器學習總結
2018-06-28
C#伺服器
使用 Azure Blob Stoage 實現一個靜態檔案伺服器
2020-07-27
伺服器
7、靜態檔案的載入
2024-03-21
手把手編寫檔案伺服器
2022-03-14
伺服器
Django 靜態檔案管理與部署指南
2024-05-10
Django
asp .net core 靜態檔案資源
2020-08-30
03 #### 讀取靜態檔案-圖片
2024-09-28
啟動靜態檔案中介軟體
2024-08-04
go編譯靜態檔案到exe
2022-08-01
Go編譯
關於Play框架的靜態檔案
2021-09-09
框架
url_for函式與靜態檔案
2024-12-10
函式
ASP .Net Core 中介軟體的使用（一）：搭建靜態檔案伺服器/訪問指定檔案
2020-12-16
伺服器
Node讀取靜態資源
2020-12-21
幽默：如何在靜態檔案託管伺服器上使用資料庫？
2021-05-07
伺服器資料庫
vue中靜態檔案引用注意事項
2018-09-12
Vue
vue 靜態檔案上傳到七牛
2019-10-08
Vue
asp.net core 系列之靜態檔案
2019-07-25
ASP.NET
Django基礎二靜態檔案和ORM
2022-03-17
DjangoORM
Django 教程之media和static靜態檔案
2020-12-09
Django
如何構建「大型 Node.js 專案」的專案結構？
2018-05-15
Node.js
nginx 配置單IP無域名多埠實現靜態檔案和node服務並存
2018-06-03
Nginx