搭建簡單的Node.js本地伺服器

很久以前我還是前端小白，不懂怎麼搭建本地伺服器。每次遇到必須要託管才能用的資源，我只懂得把它放到雲上，特別浪費時間。然後我接觸到了Node，但瞭解很少，只知道它可以做很多事情。正好最近時間多，我嘗試一下用Node搭建本地伺服器。下面是我搭建本地伺服器過程中的一些經歷。

首先當然是四處找示例程式碼。很快就找到了：

var http = require('http');
http.createServer(function(req,res){
    res.writeHead(200,{'Content-Type':'text/html'});
    res.write('<h1>Node.js</h1>');
    res.write('<p>Hello World!</p>');
    res.end('');
}).listen(3000);
console.log('HTTP server is listening at port 3000.');

儲存為testnode.js檔案，用Node執行，結果如圖：

簡單吧？

樂了一陣，再仔細想想，伺服器是搭起來了，可是伺服器每次訪問的響應內容都寫死了，如果我想訪問特定的HTML頁面，怎麼辦？

一番搜尋後，找到了一篇博文中的程式碼（博文 連結地址 ，部落格 連結地址，作者shawn.xie），摘錄如下：

http.js

var PORT = 3000;

var http = require('http');
var url=require('url');
var fs=require('fs');
var mine=require('./mine').types;
var path=require('path');

var server = http.createServer(function (request, response) {
var pathname = url.parse(request.url).pathname;
var realPath = path.join("assets", pathname);
//console.log(realPath);
var ext = path.extname(realPath);
ext = ext ? ext.slice(1) : 'unknown';
fs.exists(realPath, function (exists) {
    if (!exists) {
        response.writeHead(404, {
            'Content-Type': 'text/plain'
        });

        response.write("This request URL " + pathname + " was not found on this server.");
        response.end();
    } else {
        fs.readFile(realPath, "binary", function (err, file) {
            if (err) {
                response.writeHead(500, {
                    'Content-Type': 'text/plain'
                });
                response.end(err);
            } else {
                var contentType = mine[ext] || "text/plain";
                response.writeHead(200, {
                    'Content-Type': contentType
                });
                response.write(file, "binary");
                response.end();
                }
            });
        }
    });
});
server.listen(PORT);
console.log("Server runing at port: " + PORT + ".");

mine.js

exports.types = {
  "css": "text/css",
  "gif": "image/gif",
  "html": "text/html",
  "ico": "image/x-icon",
  "jpeg": "image/jpeg",
  "jpg": "image/jpeg",
  "js": "text/javascript",
  "json": "application/json",
  "pdf": "application/pdf",
  "png": "image/png",
  "svg": "image/svg+xml",
  "swf": "application/x-shockwave-flash",
  "tiff": "image/tiff",
  "txt": "text/plain",
  "wav": "audio/x-wav",
  "wma": "audio/x-ms-wma",
  "wmv": "video/x-ms-wmv",
  "xml": "text/xml"
};

index.html

<!--這個頁面是我自己寫的-->
<h1>Node.js</h1>
<p>Hello World!</p>

目錄結構如下：

--http.js  
--mine.js  
--assets  
  |  
  --index.html

【注：程式碼和檔案裡的mine應為mime（多用途網際網路郵件擴充套件型別），此處應為作者筆誤，未改】

用Node執行http.js，然後在瀏覽器中開啟 localhost:3000/index.html ，效果如圖

【注：到這一步，這個本地伺服器還不穩定，容易崩潰，可能要多試幾次才能成功】

確實可以訪問特定的檔案了，大家可以來試一試。

但是，如果你細心的話，就會發現當我們訪問 localhost:3000 的時候，瀏覽器會顯示無法訪問網站：

如何把我們的本地伺服器設定為預設顯示主頁（index.html）呢？

這確實花了我一番功夫，四處上網找，可是找到的解決方法都不適用。

最後，我在上面提到的那篇博文下方的評論找到了答案：（真是被坑死了）

http.js

...
//console.log(realPath);

//在程式碼中新增這一段
if (pathname.charAt(pathname.length - 1) == "/") {
    //如果訪問目錄
    pathname += "index.html"; //指定為預設網頁
}

var ext = path.extname(realPath);
...

修改完成後，用Node執行http.js，開啟 localhost:3000 ，果然可以訪問了：

現在，這個伺服器對我來說算得上是暫時可以滿足開發需求了。

---

當然這個本地伺服器還有一些不完善的地方，比如MIME型別資料不全，沒有和前端頁面通訊的資料介面，啟動步驟麻煩，這些就留著慢慢改進了。