如何使用Node.js實現(xiàn)一個靜態(tài)資源服務(wù)器

今天就跟大家聊聊有關(guān)如何使用Node.js實現(xiàn)一個靜態(tài)資源服務(wù)器，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

項目涉及到http、fs、url、path、zlib、process、child_process等模塊，涵蓋大量常用api；還包括了基于http協(xié)議的緩存策略選取、gzip壓縮優(yōu)化等；

可先行體驗項目效果：

安裝：npm i -g here11

任意文件夾地址輸入命令：here

step1 新建項目

因為我們要發(fā)布到npm上，所以我們先按照國際慣例，npm init，走你！在命令行可以一路回車，有些配置會在后面的發(fā)布步驟中細說。

目錄結(jié)構(gòu)如下：

bin文件夾存放我們的執(zhí)行代碼，web作為一個測試文件夾，里面放了些網(wǎng)頁。

step2 碼碼

step2.1 雛形

靜態(tài)資源服務(wù)器，通俗講就是我們在瀏覽器地址欄輸入形如“http://域名/test/index.html”的一個地址，服務(wù)器從根目錄下的對應(yīng)文件夾找到index.html，讀出文件內(nèi)容并返回給瀏覽器，瀏覽器渲染給用戶。

const http = require("http");  const url = require("url");  const fs = require("fs");  const path = require("path");  const item = (name, parentPath) => {      let path = parentPath = `${parentPath}/${name}`.slice(1);      return `<div><a href="${path}">${name}</a></div>`;  }  const list = (arr, parentPath) => {      return arr.map(name => item(name, parentPath)).join("");  }  const server = http.createServer((req, res) => {      let _path = url.parse(req.url).pathname;//去掉search      let parentPath = _path;      _path = path.join(__dirname, _path);      try {          //拿到路徑所對應(yīng)的文件描述對象          let stats = fs.statSync(_path);          if (stats.isFile()) {              //是文件，返回文件內(nèi)容              let file = fs.readFileSync(_path);              res.end(file);          } else if (stats.isDirectory()) {              //是目錄，返回目錄列表，讓用戶可以繼續(xù)點擊              let dirArray = fs.readdirSync(_path);              res.end(list(dirArray, parentPath));          } else {              res.end();          }      } catch (err) {          res.writeHead(404, "Not Found");          res.end();      }  });  const port = 2234;  const hostname = "127.0.0.1";  server.listen(port, hostname, () => {      console.log(`server is running on http://${hostname}:${port}`);  });

以上這段code就是我們的核心代碼了，已經(jīng)實現(xiàn)了核心功能，本地運行即可看到返回了文件目錄，點擊文件名便可瀏覽對應(yīng)的網(wǎng)頁、圖片、文本啦。

step2.2 優(yōu)化

功能實現(xiàn)了，但是我們可以在某些方面做做優(yōu)化，提升實用性，順便多學(xué)習(xí)幾個api。

1. stream

我們目前讀取文件返回給瀏覽器的操作是通過readFile一次性讀出來，一次性返回，這樣當(dāng)然可以實現(xiàn)功能，但我們有更好的方式——用stream（流）進行IO操作。stream并不是node.js獨有的概念，而是操作系統(tǒng)最基本的一種操作形式，所以理論上講，任何一門server端語言都實現(xiàn)了stream的API。

為什么講用stream是一種更好的方式？因為一次性讀取、操作大文件，內(nèi)存和網(wǎng)絡(luò)是吃不消的，尤其在用戶訪問量比較大的情況下更為明顯；而借助stream可以讓數(shù)據(jù)流動起來，一點一點操作，從而提升性能。代碼修改如下：

if (stats.isFile()) {      //是文件，返回文件內(nèi)容      //在createServer時傳入的回調(diào)函數(shù)被添加到了"request"事件上，回調(diào)函數(shù)的兩個形參req和res      //分別為http.IncomingMessage對象和http.ServerResponse對象      //并且它們都實現(xiàn)了流接口      let readStream = fs.createReadStream(_path);      readStream.pipe(res);  }

編碼實現(xiàn)非常簡單，在需要返回文件內(nèi)容時，我們創(chuàng)建了一個可讀流，并把它直接導(dǎo)向了res對象。

2. gzip壓縮

gzip壓縮帶來的性能（用戶訪問體驗）提升是非常明顯的，開啟gzip壓縮，可以大幅減小js、css等文件資源的體積，提升用戶訪問速度。作為一個靜態(tài)資源服務(wù)器，我們當(dāng)然要加上這個功能。

node中有一個zlib的模塊，提供了很多壓縮相關(guān)的api，我們就用它來實現(xiàn)：

const zlib = require("zlib");  if (stats.isFile()) {      //是文件，返回文件內(nèi)容      res.setHeader("content-encoding", "gzip");       const gzip = zlib.createGzip();      let readStream = fs.createReadStream(_path);      readStream.pipe(gzip).pipe(res);  }

有了stream的使用經(jīng)驗，我們再看這段代碼的時候就好理解多了。把文件流先導(dǎo)向gzip對象，再導(dǎo)向res對象。此外，使用gzip壓縮的時候還需要注意一點：需要把響應(yīng)頭里的content-encoding設(shè)置為gzip。否則瀏覽器會把一堆亂碼展示出來。

3. http緩存

緩存這個東西讓人又愛又恨，用得好，可以提升用戶體驗，減輕服務(wù)器壓力；用得不好，可能就會面臨各種各樣奇奇怪怪的問題。一般來講瀏覽器http緩存分為強緩存（非驗證性緩存）和協(xié)商緩存（驗證性緩存）。

什么叫強緩存呢？強緩存是由cache-control和expires兩個首部字段控制的，現(xiàn)在一般用cache-control。比如我們設(shè)置了cache-control: max-age=31536000的響應(yīng)頭，就是告訴瀏覽器這個資源有一年的緩存期，一年內(nèi)不用向服務(wù)端發(fā)送請求，直接從緩存中讀取資源。

而協(xié)商性緩存是使用if-modified-since/last-modified、if-none-match/etag等首部字段，配合強緩存，在強緩存沒有命中（或告知瀏覽器no-cache）的時候，向服務(wù)器發(fā)送請求，確認資源的有效性，決定從緩存中讀取或是返回新的資源。

有了以上概念，我們便可以制定我們的緩存策略：

if (stats.isFile()) {      //是文件，返回文件內(nèi)容        //增加判斷文件是否有改動，沒有改動返回304的邏輯         //從請求頭獲取modified時間      let IfModifiedSince = req.headers["if-modified-since"];      //獲取文件的修改日期&mdash;&mdash;時間戳格式      let mtime = stats.mtime;      //如果服務(wù)器上的文件修改時間小于等于請求頭攜帶的修改時間，則認定文件沒有變化      if (IfModifiedSince && mtime <= new Date(IfModifiedSince).getTime()) {          //返回304          res.writeHead(304, "not modify");          return res.end();      }      //第一次請求或文件被修改后，返回給客戶端新的修改時間      res.setHeader("last-modified", new Date(mtime).toString());      res.setHeader("content-encoding", "gzip");      let reg = /\.html$/;      //不同的文件類型設(shè)置不同的cache-control      if (reg.test(_path)) {          //我們對html文件執(zhí)行每次必須向服務(wù)器驗證資源有效性的策略          res.setHeader("cache-control", "no-cache");      } else {          //我們對其余的靜態(tài)資源文件采取強緩存策略，一個月內(nèi)無需向服務(wù)器索取          res.setHeader("cache-control", `max-age=${1 * 60 * 60 * 24 * 30}`);      }        //執(zhí)行g(shù)zip壓縮      const gzip = zlib.createGzip();      let readStream = fs.createReadStream(_path);      readStream.pipe(gzip).pipe(res);  }

這樣一套緩存策略在現(xiàn)代前端項目體系下還是比較合適的，尤其是對于spa應(yīng)用來講。我們希望index.html能夠保證每次向服務(wù)器驗證是否有更新，而其余的文件統(tǒng)一本地緩存一個月（自己定）；通過webpack打包或其他工程化方式構(gòu)建之后，js、css內(nèi)容如果發(fā)生變化，文件名相應(yīng)更新，index.html插入的manifest（或script鏈接、link鏈接等）清單會更新，保證用戶能夠?qū)崟r得到新的資源。

當(dāng)然，緩存之路千萬條，適合業(yè)務(wù)才重要，大家可以靈活制定。

4. 命令行參數(shù)

作為一個在命令行執(zhí)行的工具，怎么能不象征性的支持幾個參數(shù)呢？

const config = {      //從命令行中獲取端口號，如果未設(shè)置采用默認      port: process.argv[2] || 2234,      hostname: "127.0.0.1"  }  server.listen(config.port, config.hostname, () => {      console.log(`server is running on http://${config.hostname}:${config.port}`);  });

這里就簡單的舉個栗子啦，大家可以自由發(fā)揮！

5. 自動打開瀏覽器

雖然沒太大卵用，但還是要加。我就是要讓你們知道，我加完之后什么樣，你們就是什么樣 :-( duang~

const exec = require("child_process").exec;  server.listen(config.port, config.hostname, () => {      console.log(`server is running on http://${config.hostname}:${config.port}`);      exec(`open http://${config.hostname}:${config.port}`);  });

6. process.cwd()

用process.cwd()代替__dirname。

我們最終要做成一個全局并且可以在任意目錄下調(diào)用的命令，所以拼接path的代碼修改如下：

//__dirname是當(dāng)前文件的目錄地址，process.cwd()返回的是腳本執(zhí)行的路徑  _path = path.join(process.cwd(), _path);

step3 發(fā)布

基本上我們的代碼都寫完了，可以考慮發(fā)布了！

step3.1 package.json

得到一個配置類似下面所示的json文件：

{      "name": "here11",      "version": "0.0.13",      "private": false,      "description": "a node static assets server",      "bin": {          "here": "./bin/index.js"      },      "repository": {          "type": "git",          "url": "https://github.com/gww666/here.git"      },      "scripts": {          "test": "node bin/index.js"      },      "keywords": [          "node"      ],      "author": "gw666",      "license": "ISC"  }

其中bin和private較為重要，其余的按照自己的項目情況填寫。

bin這個配置代表的是npm i -g xxx之后，我們運行here命令所執(zhí)行的文件，“here”這個名字可以隨意起。

step3.2 聲明腳本執(zhí)行類型

在index.js文件的開頭加上：#!/usr/bin/env node

否則linux上運行會報錯。

step3.3 注冊npm賬號

勉強貼一手命令，還不清楚自行百度：

沒有賬號的先添加一個，執(zhí)行：

npm adduser

然后依次填入

Username: your name

Password: your password

Email: yourmail

npm會給你發(fā)一封驗證郵件，記得點一下，不然會發(fā)布失敗。

執(zhí)行登錄命令：

npm login

執(zhí)行發(fā)布命令：

npm publish

看完上述內(nèi)容，你們對如何使用Node.js實現(xiàn)一個靜態(tài)資源服務(wù)器有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。