2. 程式人生 > >node 搭建靜態服務

node 搭建靜態服務

阿新 • • 發佈：2019-03-03
定義 nginx 即使 bullet item read attr 檢測 export

對於Node.js新手，搭建一個靜態資源服務器是個不錯的鍛煉，從最簡單的返回文件或錯誤開始，漸進增強，還可以逐步加深對http的理解。

基本功能

不急著寫下第一行代碼，而是先梳理一下就基本功能而言有哪些步驟。

  1. 在本地根據指定端口啟動一個http server，等待著來自客戶端的請求
  2. 當請求抵達時，根據請求的url，以設置的靜態文件目錄為base，映射得到文件位置
  3. 檢查文件是否存在
  4. 如果文件不存在，返回404狀態碼，發送not found頁面到客戶端
  5. 如果文件存在：
    • 打開文件待讀取
    • 設置response header
    • 發送文件到客戶端
  6. 等待來自客戶端的下一個請求

實現基本功能

代碼結構

創建一個nodejs-static-webserver目錄，在目錄內運行npm init初始化一個package.json文件。

mkdir nodejs-static-webserver && cd "$_"
// initialize package.json
npm init

接著創建如下文件目錄：

-- config
---- default.json
-- static-server.js
-- app.js

default.json

{
    "port": 9527,
    "root": "/Users/sheila1227/Public",
    "indexPage": "index.html"
}

default.js存放一些默認配置，比如端口號、靜態文件目錄（root)、默認頁（indexPage）等。當這樣的一個請求http://localhost:9527/myfiles/抵達時. 如果根據root映射後得到的目錄內有index.html，根據我們的默認配置，就會給客戶端發回index.html的內容。

static-server.js

const http = require(‘http‘);
const path = require(‘path‘);
const config = require(‘./config/default‘);

class StaticServer {
    constructor() {
        this.port = config.port;
        this.root = config.root;
        this.indexPage = config.indexPage;
    }

    start() {
        http.createServer((req, res) => {
            const pathName = path.join(this.root, path.normalize(req.url));
            res.writeHead(200);
            res.end(`Requeste path: ${pathName}`);
        }).listen(this.port, err => {
            if (err) {
                console.error(err);
                console.info(‘Failed to start server‘);
            } else {
                console.info(`Server started on port ${this.port}`);
            }
        });
    }
}

module.exports = StaticServer;

在這個模塊文件內，我們聲明了一個StaticServer類，並給其定義了start方法，在該方法體內，創建了一個server對象，監聽rquest事件，並將服務器綁定到配置文件指定的端口。在這個階段，我們對於任何請求都暫時不作區分地簡單地返回請求的文件路徑。path模塊用來規範化連接和解析路徑，這樣我們就不用特意來處理操作系統間的差異。

app.js

const StaticServer = require(‘./static-server‘);

(new StaticServer()).start();

在這個文件內，調用上面的static-server模塊，並創建一個StaticServer實例，調用其start方法，啟動了一個靜態資源服務器。這個文件後面將不需要做其他修改，所有對靜態資源服務器的完善都發生在static-server.js內。

在目錄下啟動程序會看到成功啟動的log：

> node app.js

Server started on port 9527

在瀏覽器中訪問，可以看到服務器將請求路徑直接返回了。

技術分享圖片

路由處理

之前我們對任何請求都只是向客戶端返回文件位置而已，現在我們將其替換成返回真正的文件：

    routeHandler(pathName, req, res) {
        
    }

    start() {
        http.createServer((req, res) => {
            const pathName = path.join(this.root, path.normalize(req.url));
            this.routeHandler(pathName, req, res);
        }).listen(this.port, err => {
            ...
        });
    }

將由routeHandler來處理文件發送。

讀取靜態文件

讀取文件之前，用fs.stat檢測文件是否存在，如果文件不存在，回調函數會接收到錯誤，發送404響應。

    respondNotFound(req, res) {
        res.writeHead(404, {
            ‘Content-Type‘: ‘text/html‘
        });
        res.end(`<h1>Not Found</h1><p>The requested URL ${req.url} was not found on this server.</p>`);
    }

    respondFile(pathName, req, res) {
        const readStream = fs.createReadStream(pathName);
        readStream.pipe(res);
    }

    routeHandler(pathName, req, res) {
        fs.stat(pathName, (err, stat) => {
            if (!err) {
                this.respondFile(pathName, req, res);
            } else {
                this.respondNotFound(req, res);
            }
        });
    }

Note:

讀取文件，這裏用的是流的形式createReadStream而不是readFile，是因為後者會在得到完整文件內容之前將其先讀到內存裏。這樣萬一文件很大，再遇上多個請求同時訪問，readFile就承受不來了。使用文件可讀流，服務端不用等到數據完全加載到內存再發回給客戶端，而是一邊讀一邊發送分塊響應。這時響應裏會包含如下響應頭：

Transfer-Encoding:chunked

默認情況下，可讀流結束時，可寫流的end()方法會被調用。

MIME支持

現在給客戶端返回文件時，我們並沒有指定Content-Type頭，雖然你可能發現訪問文本或圖片瀏覽器都可以正確顯示出文字或圖片，但這並不符合規範。任何包含實體主體（entity body）的響應都應在頭部指明文件類型，否則瀏覽器無從得知類型時，就會自行猜測（從文件內容以及url中尋找可能的擴展名）。響應如指定了錯誤的類型也會導致內容的錯亂顯示，如明明返回的是一張jpeg圖片，卻錯誤指定了header：‘Content-Type‘: ‘text/html‘，會收到一堆亂碼。

技術分享圖片

雖然有現成的mime模塊可用，這裏還是自己來實現吧，試圖對這個過程有更清晰的理解。

在根目錄下創建mime.js文件：

const path = require(‘path‘);

const mimeTypes = {
    "css": "text/css",
    "gif": "image/gif",
    "html": "text/html",
    "ico": "image/x-icon",
    "jpeg": "image/jpeg",
     ...
};

const lookup = (pathName) => {
    let ext = path.extname(pathName);
    ext = ext.split(‘.‘).pop();
    return mimeTypes[ext] || mimeTypes[‘txt‘];
}

module.exports = {
    lookup
};

該模塊暴露出一個lookup方法，可以根據路徑名返回正確的類型，類型以‘type/subtype’表示。對於未知的類型，按普通文本處理。

接著在static-server.js中引入上面的mime模塊，給返回文件的響應都加上正確的頭部字段：

    respondFile(pathName, req, res) {
        const readStream = fs.createReadStream(pathName);
        res.setHeader(‘Content-Type‘, mime.lookup(pathName));
        readStream.pipe(res);
    }

重新運行程序，會看到圖片可以在瀏覽器中正常顯示了。

技術分享圖片

Note:

需要註意的是，Content-Type說明的應是原始實體主體的文件類型。即使實體經過內容編碼（如gzip，後面會提到)，該字段說明的仍應是編碼前的實體主體的類型。

添加其他功能

至此，已經完成了基本功能中列出的幾個步驟，但依然有很多需要改進的地方，比如如果用戶輸入的url對應的是磁盤上的一個目錄怎麽辦？還有，現在對於同一個文件（從未更改過）的多次請求，服務端都是勤勤懇懇地一遍遍地發送回同樣的文件，這些冗余的數據傳輸，既消耗了帶寬，也給服務器添加了負擔。另外，服務器如果在發送內容之前能對其進行壓縮，也有助於減少傳輸時間。

讀取文件目錄

現階段，用url: localhost:9527/testfolder去訪問一個指定root文件夾下真實存在的testfolder的文件夾，服務端會報錯：

Error: EISDIR: illegal operation on a directory, read

要增添對目錄訪問的支持，我們重新整理下響應的步驟：

  1. 請求抵達時，首先判斷url是否有尾部斜杠
  2. 如果有尾部斜杠，認為用戶請求的是目錄
    • 如果目錄存在
      • 如果目錄下存在默認頁（如index.html),發送默認頁
      • 如果不存在默認頁，發送目錄下內容列表
    • 如果目錄不存在，返回404
  3. 如果沒有尾部斜杠，認為用戶請求的是文件
    • 如果文件存在，發送文件
    • 如果文件不存在，判斷同名的目錄是否存在
      • 如果存在該目錄，返回301，並在原url上添加上/作為要轉到的location
      • 如果不存在該目錄，返回404

我們需要重寫一下routeHandler內的邏輯：

    routeHandler(pathName, req, res) {
        fs.stat(pathName, (err, stat) => {
            if (!err) {
                const requestedPath = url.parse(req.url).pathname;
                if (hasTrailingSlash(requestedPath) && stat.isDirectory()) {
                    this.respondDirectory(pathName, req, res);
                } else if (stat.isDirectory()) {
                    this.respondRedirect(req, res);
                } else {
                    this.respondFile(pathName, req, res);
                }
            } else {
                this.respondNotFound(req, res);
            }
        });
    }

繼續補充respondRedirect方法：

    respondRedirect(req, res) {
        const location = req.url + ‘/‘;
        res.writeHead(301, {
            ‘Location‘: location,
            ‘Content-Type‘: ‘text/html‘
        });
        res.end(`Redirecting to <a href=‘${location}‘>${location}</a>`);
    }

瀏覽器收到301響應時，會根據頭部指定的location字段值，向服務器發出一個新的請求。

繼續補充respondDirectory方法：

    respondDirectory(pathName, req, res) {
        const indexPagePath = path.join(pathName, this.indexPage);
        if (fs.existsSync(indexPagePath)) {
            this.respondFile(indexPagePath, req, res);
        } else {
            fs.readdir(pathName, (err, files) => {
                if (err) {
                    res.writeHead(500);
                    return res.end(err);
                }
                const requestPath = url.parse(req.url).pathname;
                let content = `<h1>Index of ${requestPath}</h1>`;
                files.forEach(file => {
                    let itemLink = path.join(requestPath,file);
                    const stat = fs.statSync(path.join(pathName, file));
                    if (stat && stat.isDirectory()) {
                        itemLink = path.join(itemLink, ‘/‘);
                    }                 
                    content += `<p><a href=‘${itemLink}‘>${file}</a></p>`;
                });
                res.writeHead(200, {
                    ‘Content-Type‘: ‘text/html‘
                });
                res.end(content);
            });
        }
    }

當需要返回目錄列表時，遍歷所有內容，並為每項創建一個link，作為返回文檔的一部分。需要註意的是，對於子目錄的href，額外添加一個尾部斜杠，這樣可以避免訪問子目錄時的又一次重定向。

在瀏覽器中測試一下，輸入localhost:9527/testfolder，指定的root目錄下並沒有名為testfolder的文件，卻存在同名目錄，因此第一次會收到重定向響應，並發起一個對目錄的新請求。

技術分享圖片

緩存支持

為了減少數據傳輸，減少請求數，繼續添加緩存支持。首先梳理一下緩存的處理流程：

  1. 如果是第一次訪問，請求報文首部不會包含相關字段，服務端在發送文件前做如下處理：
    • 如服務器支持ETag，設置ETag頭
    • 如服務器支持Last-Modified，設置Last-Modified頭
    • 設置Expires頭
    • 設置Cache-Control頭（設置其max-age值）

    瀏覽器收到響應後會存下這些標記，並在下次請求時帶上與ETag對應的請求首部If-None-Match或與Last-Modified對應的請求首部If-Modified-Since。

  2. 如果是重復的請求：
    • 瀏覽器判斷緩存是否過期（通過Cache-Control和Expires確定）
      • 如果未過期，直接使用緩存內容，也就是強緩存命中，並不會產生新的請求
      • 如果已過期，會發起新的請求，並且請求會帶上If-None-Match或If-Modified-Since，或者兼具兩者
      • 服務器收到請求，進行緩存的新鮮度再驗證：
        • 首先檢查請求是否有If-None-Match首部，沒有則繼續下一步，有則將其值與文檔的最新ETag匹配，失敗則認為緩存不新鮮，成功則繼續下一步
        • 接著檢查請求是否有If-Modified-Since首部，沒有則保留上一步驗證結果，有則將其值與文檔最新修改時間比較驗證，失敗則認為緩存不新鮮，成功則認為緩存新鮮

        當兩個首部皆不存在或者驗證結果是不新鮮時，發送200及最新文件，並在首部更新新鮮度。

        當驗證結果是緩存仍然新鮮時（也就是弱緩存命中），不需發送文件，僅發送304，並在首部更新新鮮度

為了能啟用或關閉某種驗證機制，我們在配置文件裏增添如下配置項：

default.json：

{
    ...
    "cacheControl": true,
    "expires": true,
    "etag": true,
    "lastModified": true,
    "maxAge": 5
}

這裏為了能測試到緩存過期，將過期時間設成了非常小的5秒。

在StaticServer類中接收這些配置：

class StaticServer {
    constructor() {
         ...
        this.enableCacheControl = config.cacheControl;
        this.enableExpires = config.expires;
        this.enableETag = config.etag;
        this.enableLastModified = config.lastModified;
        this.maxAge = config.maxAge;
    }

現在，我們要在原來的respondFile前橫加一杠，增加是要返回304還是200的邏輯。

    respond(pathName, req, res) {
        fs.stat(pathName, (err, stat) => {
            if (err) return respondError(err, res);
            this.setFreshHeaders(stat, res);
            if (this.isFresh(req.headers, res._headers)) {
                this.responseNotModified(res);
            } else {
                this.responseFile(pathName, res);
            }
        });

    }

準備返回文件前，根據配置，添加緩存相關的響應首部。

    generateETag(stat) {
        const mtime = stat.mtime.getTime().toString(16);
        const size = stat.size.toString(16);
        return `W/"${size}-${mtime}"`;
    }

    setFreshHeaders(stat, res) {
        const lastModified = stat.mtime.toUTCString();
        if (this.enableExpires) {
            const expireTime = (new Date(Date.now() + this.maxAge * 1000)).toUTCString();
            res.setHeader(‘Expires‘, expireTime);
        }
        if (this.enableCacheControl) {
            res.setHeader(‘Cache-Control‘, `public, max-age=${this.maxAge}`);
        }
        if (this.enableLastModified) {
            res.setHeader(‘Last-Modified‘, lastModified);
        }
        if (this.enableETag) {
            res.setHeader(‘ETag‘, this.generateETag(stat));
        }
    }

需要註意的是，上面使用了ETag弱驗證器，並不能保證緩存文件與服務器上的文件是完全一樣的。關於強驗證器如何實現，可以參考etag包的源碼。

下面是如何判斷緩存是否仍然新鮮：

    isFresh(reqHeaders, resHeaders) {
        const  noneMatch = reqHeaders[‘if-none-match‘];
        const  lastModified = reqHeaders[‘if-modified-since‘];
        if (!(noneMatch || lastModified)) return false;
        if(noneMatch && (noneMatch !== resHeaders[‘etag‘])) return false;
        if(lastModified && lastModified !== resHeaders[‘last-modified‘]) return false;
        return true;
    }

需要註意的是，http首部字段名是不區分大小寫的（但http method應該大寫），所以平常在瀏覽器中會看到大寫或小寫的首部字段。

技術分享圖片

技術分享圖片

但是node的http模塊將首部字段都轉成了小寫，這樣在代碼中使用起來更方便些。所以訪問header要用小寫，如reqHeaders[‘if-none-match‘]。不過，仍然可以用req.rawreq.rawHeaders來訪問原headers，它是一個[name1, value1, name2, value2, ...]形式的數組。

現在來測試一下，因為設置的緩存有效時間是極小的5s，所以強緩存幾乎不會命中，所以第二次訪問文件會發出新的請求，因為服務端文件並沒做什麽改變，所以會返回304。

技術分享圖片

現在來修改一下請求的這張圖片，比如修改一下size，目的是讓服務端的再驗證失敗，因而必須給客戶端發送200和最新的文件。

技術分享圖片

接下來把緩存有效時間改大一些，比如10分鐘，那麽在10分鐘之內的重復請求，都會命中強緩存，瀏覽器不會向服務端發起新的請求（但network依然能觀察到這條請求）。

技術分享圖片

內容編碼

服務器在發送很大的文檔之前，對其進行壓縮，可以節省傳輸用時。其過程是：

  1. 瀏覽器在訪問網站時，默認會攜帶Accept-Encoding頭
  2. 服務器在收到請求後，如果發現存在Accept-Encoding請求頭，並且支持該文件類型的壓縮，壓縮響應的實體主體（並不壓縮頭部），並附上Content-Encoding首部
  3. 瀏覽器收到響應，如果發現有Content-Encoding首部，按其值指定的格式解壓報文

對於圖片這類已經經過高度壓縮的文件，無需再額外壓縮。因此，我們需要配置一個字段，指明需要針對哪些類型的文件進行壓縮。

default.json

{
    ...
    "zipMatch": "^\\.(css|js|html)$"
}

static-server.js

    constructor() {
        ...
        this.zipMatch = new RegExp(config.zipMatch);
    }

用zlib模塊來實現流壓縮：

    compressHandler(readStream, req, res) {
       const acceptEncoding = req.headers[‘accept-encoding‘];
       if (!acceptEncoding || !acceptEncoding.match(/\b(gzip|deflate)\b/)) {
           return readStream;
       } else if (acceptEncoding.match(/\bgzip\b/)) {
           res.setHeader(‘Content-Encoding‘, ‘gzip‘);
           return readStream.pipe(zlib.createGzip());
       } else if (acceptEncoding.match(/\bdeflate\b/)) {
           res.setHeader(‘Content-Encoding‘, ‘deflate‘);
           return readStream.pipe(zlib.createDeflate());
       }
   }

因為配置了圖片不需壓縮，在瀏覽器中測試會發現圖片請求的響應中沒有Content-Encoding頭。

範圍請求

最後一步，使服務器支持範圍請求，允許客戶端只請求文檔的一部分。其流程是：

  1. 客戶端向服務端發起請求
  2. 服務端響應，附上Accept-Ranges頭（值表示表示範圍的單位，通常是“bytes”），告訴客戶端其接受範圍請求
  3. 客戶端發送新的請求，附上Ranges頭，告訴服務端請求的是一個範圍
  4. 服務端收到範圍請求，分情況響應：
    • 範圍有效，服務端返回206 Partial Content，發送指定範圍內內容，並在Content-Range頭中指定該範圍
    • 範圍無效，服務端返回416 Requested Range Not Satisfiable，並在Content-Range中指明可接受範圍

請求中的Ranges頭格式為（這裏不考慮多範圍請求了）：

Ranges: bytes=[start]-[end]

其中 start 和 end 並不是必須同時具有：

  1. 如果 end 省略，服務器應返回從 start 位置開始之後的所有字節
  2. 如果 start 省略，end 值指的就是服務器該返回最後多少個字節
  3. 如果均未省略，則服務器返回 start 和 end 之間的字節

響應中的Content-Range頭有兩種格式：

  1. 當範圍有效返回 206 時：

    Content-Range: bytes (start)-(end)/(total)

  2. 當範圍無效返回 416 時：

    Content-Range: bytes */(total)

添加函數處理範圍請求：

    rangeHandler(pathName, rangeText, totalSize, res) {
        const range = this.getRange(rangeText, totalSize);
        if (range.start > totalSize || range.end > totalSize || range.start > range.end) {
            res.statusCode = 416;
            res.setHeader(‘Content-Range‘, `bytes */${totalSize}`);
            res.end();
            return null;
        } else {
            res.statusCode = 206;
            res.setHeader(‘Content-Range‘, `bytes ${range.start}-${range.end}/${totalSize}`);
            return fs.createReadStream(pathName, { start: range.start, end: range.end });
        }
    }

用 Postman來測試一下。在指定的root文件夾下創建一個測試文件：

testfile.js

This is a test sentence.

請求返回前六個字節 ”This “ 返回 206：

技術分享圖片

請求一個無效範圍返回416：

技術分享圖片

讀取命令行參數

至此，已經完成了靜態服務器的基本功能。但是每一次需要修改配置，都必須修改default.json文件，非常不方便，如果能接受命令行參數就好了,可以借助 yargs 模塊來完成。

var options = require( "yargs" )
    .option( "p", { alias: "port",  describe: "Port number", type: "number" } )
    .option( "r", { alias: "root", describe: "Static resource directory", type: "string" } )
    .option( "i", { alias: "index", describe: "Default page", type: "string" } )
    .option( "c", { alias: "cachecontrol", default: true, describe: "Use Cache-Control", type: "boolean" } )
    .option( "e", { alias: "expires", default: true, describe: "Use Expires", type: "boolean" } )
    .option( "t", { alias: "etag", default: true, describe: "Use ETag", type: "boolean" } )
    .option( "l", { alias: "lastmodified", default: true, describe: "Use Last-Modified", type: "boolean" } )
    .option( "m", { alias: "maxage", describe: "Time a file should be cached for", type: "number" } )
    .help()
    .alias( "?", "help" )
    .argv;

瞅瞅 help 命令會輸出啥：

技術分享圖片

這樣就可以在命令行傳遞端口、默認頁等：

node app.js -p 8888 -i main.html


Note:

當然在項目中如果有使用express框架，用express.static一行代碼就可以達到目的了：

app.use(express.static(‘public‘))

這裏我們要實現的正是express.static背後所做工作的一部分，建議同步閱讀該模塊源碼。

node 搭建靜態服務

相關推薦

node 搭建靜態服務

定義 nginx 即使 bullet item read attr 檢測 export 對於Node.js新手，搭建一個靜態資源服務器是個不錯的鍛煉，從最簡單的返回文件或錯誤開始，漸進增強，還可以逐步加深對http的理解。 基本功能 不急著寫下第一行代碼，而是先梳理一下

node搭建本地服務器後端解決跨域問題

clas har request method con set hub utf xmlhttp 第一種方法： // 通過跨域裏面的cors跨域// 跨域中間件app.use(function (req, res, next) { // 設置cors跨域 res.

使用Node搭建reactSSR服務端渲染架構

狀態 nod reac ESS 初始化 ant log4 ack 文件 如題；本文所講架構主要用到技術棧有：Node, Express, React, Mobx, webpack4, ES6, ES7, axios, ejs, log4js, scss，echarts，a

vue專案或react專案用node搭建靜態檔案伺服器

//npm install express --save-dev 下載express包 //npm install http-proxy-middleware --save-dev 下載代理中介軟體 const fs = require('fs'); const pat

node 實現靜態服務server.js

node 實現靜態服務server.js 將下面程式碼儲存為server.js，然後放到再需要靜態訪問的目錄下，執行命令：node server.js， 即可通過url 地址訪問對應檔案。（預設埠：8888） // 引入相應模組 var http = require('http'),

騰訊雲，搭建Http靜態服務器環境

輸出 成功 靜態網站 hello push 正常 con clas target 任務時間：15min ~ 30min 搭建靜態網站，首先需要部署環境。下面的步驟，將告訴大家如何在服務器上通過 Nginx 部署 HTTP 靜態服務。 安裝 Nginx 在 CentOS

Nginx 在Windows下搭建靜態Web服務

ima serve TCP/UDP load lis 服務 mage tor ext 簡介 nginx [engine x] is an HTTP and reverse proxy server, a mail proxy server, and a generic T

Linux 搭建Apache服務個人靜態頁面

nag tex httpd water 密碼 使用 賬戶 技術 yum （1）把鏡像掛載到/media/cdrom（2）配置Yum源文件(3)安裝Apache服務程序httpd(4)開始httpd服務，並設置成開機自啟(5)在瀏覽器輸入?http://127.0.0.1?就

linux使用Nginx搭建靜態資源服務器

文件 dde 地址 需要 路徑 src linu use 一個 最近公司需要做一個宣傳片播放 視頻有點大 好幾百M 就想到使用Nginx來代理靜態資源，在過程中出現了一些問題，比如端口沒開、訪問是403等，沒有成功，後面慢慢查找問題，才發現大部分博客資料的都不全，所以在這

用node寫個簡單的靜態服務器

exist text 本地 控制 erro binary node quest png 直接上代碼吧，我把它命名為 app.js, 只要在該文件所在目錄下，控制臺運行 node app.js 即可啟動一個本地服務器了。 /** * 服務器 * Author je

node.js搭建web服務

1.確保已經安裝node.js和npm    注意：node.js不是JavaScript框架，而是js的執行環境 2.建立app.js,引入http模組，程式碼如下 var http=require('http'); var PORT=1234; var app=h

node搭建一個簡易的靜態資源伺服器

1.檔案結構 static(訪問的資源都在此目錄下) —-node_modules（通過npm社群下載的包） —-mime（獲取檔案的mime型別，在node中執行npm install mime可以下載） —-c

Node.js 靜態web服務

我們想要通過Node.js去訪問靜態的頁面，比如我們在瀏覽器輸入http://localhost:8001/index.html，然後就返回index.html的資訊。那麼如何用Node.js實現載入靜態的頁面呢？ 現在我們有一個static資料夾，裡面包含了

用nodeJS搭建簡單的靜態服務

靜態資源服務 1、可以指定多個目錄作為靜態資源的跟路徑 2、可以指定虛擬路徑 這裡用express框架去搭建 const express = require('express

Node 搭建簡易 HTTP 靜態資源伺服器

有時候前端開發需要用到伺服器，比如ajax請求之類的，會選擇apache或者nginx或者tomcat，Jboss之類的，現在伺服器太多，但是每次都需要配置環境下載之類的非常麻煩，也許我們只是想預覽一下靜態資源的效果，或者除錯一下簡單的邏輯程式碼而已。 相信現在前端大多數都

nginx搭建靜態資源服務器

htm dex roo rewrite user 頁面跳轉 index localhost 安裝 nginx配置訪問前端工程 1.前端工程目錄 crm-view |-- view |-- user.html 2.工程位置 C:\Users\Adminis

使用 Node.js 搭建微服務閘道器

目錄 Node.js 是什麼 安裝 node.js Node.js 入門 Node.js 應用場景 npm 映象 使用 Node.js 搭建微服務閘道器 什麼是微服務架構 使用 Node.js 實現反向代理 參考

HTTPS靜態服務搭建過程詳解

HTTPS服務對於一個前端開發者來說是一個天天打招呼的老夥計了，但是之前我跟HTTPS打交道的場景一直是抓包，自己沒有親自搭建過HTTPS服務，對HTTPS的底層知識也是一知半解。最近正好遇到一個使用者場景，頁面需要調起手機的攝像頭，這就要求頁面服務必須是HTTPS的，所以

[Nodejs] node實現靜態文件服務器

-m func quest === web 標準 svg isf 之前 node 靜態文件處理 一般後端進行靜態文件處理都是使用 Apache nginx 等靜態 web 服務器,但是既然使用 node 了,就用 node 實現以下靜態服務器吧. 之前弄了不少充滿藝術的數據

利用 MinIO 輕鬆搭建靜態資源服務

[toc] > 如果想搭建一個優雅、簡單、功能完備的靜態資源服務，那就用MinIO吧。 # 1 引言 開發 Web 專案過程中，經常需要處理靜態資源（如圖片、視訊、音訊，js庫 ，css 庫等），一般來說，若專案中需要用到這些資原始檔，我們常用的有以下幾種方法： - 本地儲存：即在專案工程中的 sta