首頁 >web前端 >js教程 >用Node提供靜態文件服務

用Node提供靜態文件服務

不言原創: 2018-07-07 17:18:211206瀏覽

這篇文章主要介紹了關於用Node提供靜態檔案服務，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

前言

#對於一個web應用，提供靜態檔案（CSS、JavaScript、圖片）服務常常是必須的。本文將介紹如何做一個自己的靜態檔案伺服器。

建立一個靜態檔案伺服器

每個靜態檔案伺服器都有一個根目錄，也就是提供檔案服務的基礎目錄。所以我們要在即將建立的伺服器上定義一個root變量，它將作為我們這個靜態檔案伺服器的根目錄：

var http = require('http')
var join = require('path').join
var fs = require('fs')

var root = __dirname

__dirname 在Node中是一個神奇的變量，它的值是該檔案所在目錄的路徑。在本例中，伺服器會將這個腳本所在的目錄當作靜態檔案的根目錄。

有了檔案的路徑，還需要傳輸檔案的內容。
這可以用fs.ReadStream完成，它是Node中Stream類別之一。成功呼叫 fs.createReadStream() 會傳回一個新的 fs.ReadStream 物件。
下面的程式碼實作了一個簡單但功能完整的檔案伺服器。

var server = http.createServer(function(req, res){
  let path = join(root, req.url)
  let stream = fs.createReadStream(path)
  stream.on('data', function(chunk){
    res.write(chunk)
  })
  stream.on('end', function(){
    res.end()
  })
})

server.listen(3000)

這個檔案伺服器大體能用，但還有很多細節要考慮。接下來我們要優化資料的傳輸，同時也精簡一下伺服器的程式碼。

用STREAM.PIPE()優化資料傳輸

雖然上面的程式碼看起來還不錯，但Node也提供了更進階的實作機制：Stream.pipe()。用這個方法可以極大簡化伺服器的程式碼。優化後程式碼如下：

var server = http.createServer(function(req, res){
  let path = join(root, req.url)
  let stream = fs.createReadStream(path)
  stream.pipe(res)
})

server.listen(3000)

這種寫法，是不是更簡單，更清晰了呢？

理解流和管道

流是Node中很重要的一個概念，你可以把Node中的管道想像成水管，如果你想讓某個源頭（例如熱水器）流出來的水流到一個目的地（例如廚房的水龍頭），可以在中間加一個管道把它們連起來，這樣水就會順著管道從源頭流到目的地。
Node中的管道也是這樣，但其中流動的不是水，而是來自源頭（即ReadableStream）的數據，管道可以讓它們「流動」到某個目的地（即WritableStream）。你可以用pipe方法把管道連起來：

ReadableStream.pipe(WritableStream)

讀取一個檔案（ReadableStream）並把其中的內容寫到另一個檔案中（WritableStream）用的就是管道：

let readStream = fs.createReadStream('./original.txt') 
let writeStream = fs.createWriteStream('./copy.txt') 
readStream.pipe(writeStream)

所有ReadableStream都能接入任何一個WritableStream。例如HTTP請求（req）對
象就是ReadableStream，你可以讓其中的內容流動到檔案中：

req.pipe(fs.createWriteStream('./req-body.txt'))

運行

現在我們來執行上面的程式碼，我們在根目錄下放一張圖片，例如peiqi.jpg。
在瀏覽器中輸入http://127.0.0.1:3000/peiqi.jpg，發現可愛的peiqi已經出現在你的面前了。 peiqi.jpg被當作回應主體從http伺服器送到了客戶端（瀏覽器）。
用Node提供靜態文件服務

雖然已經品嚐到了成功的滋味，但這個靜態檔案伺服器還不夠完整，因為它很容易出錯。想像一下，如果使用者不小心輸入了一個不存在的資源，例如abc.html，伺服器就會馬上崩掉。所以我們也得給這個檔案伺服器加上錯誤處理機制，讓它夠健壯#。

處理伺服器錯誤

在Node中，所有繼承了EventEmitter的類別都可能會發出error事件。為了監聽錯誤，在fs.ReadStream上註冊一個error事件處理器（例如下面這段程式碼），回傳回應狀態碼500表示有伺服器內部錯誤：

  stream.on('error', function(err){
    res.statusCode = 500
    res.end('服务器内部错误')
  })

用fs.stat()實作錯誤處理

我們可以用fs.stat()來取得檔案的相關信息，如果檔案不存在，fs.stat()會在err.code中放入ENOENT作為回應，然後你可以回傳錯誤碼404，向客戶端表明檔案未找到。如果fs.stat()回傳了其他錯誤碼，你可以回傳通用的錯誤碼500。
重構後的程式碼如下：

var server = http.createServer(function(req, res){
  let path = join(root, req.url)

  fs.stat(path, function(err, stat) {
    if (err) {
      if ('ENOENT' == err.code) {
        res.statusCode = 404
        res.end('Not Found')
      } else {
        res.statusCode = 500
        res.end('服务器内部错误')
      }
    } else { // 有该文件
      res.setHeader('Content-Length', stat.size)
      var stream = fs.createReadStream(path)
      stream.pipe(res)

      stream.on('error', function(err) { // 如果读取文件出错
        res.statusCode = 500
        res.end('服务器内部错误')
      })
    }
  })
})

server.listen(3000)

注意

本節建構的檔案伺服器是個簡化版。如果你想把它放到生產環境中，應該更全面地檢查輸入的有效性，以防用戶透過目錄遍歷攻擊訪問你本來不想開放給他們的那部分內容。

小結

讀到這裡，相信聰明的你已經掌握瞭如何用Node創建一個靜態伺服器，下一篇文章我會給大家介紹如何用Node處理用戶上傳的文件並存放到伺服器中。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！