nodejs實現靜態伺服器與react前端搭配

長空發表於2019-02-16
NodeJS伺服器React前端

基於v6.10.3版本

1. 實現靜態伺服器

const http = require(`http`);
const url = require(`url`);
const path = require(`path`);
const fs = require(`fs`);
/**
1. 拼靜態檔案路徑
2. 根據具體的mimeType返回相應資料
3. 靜態伺服器，無非就是html,css,js,png等。
**/
http.createServer((req, res) => {
    let pathname = url.parse(req.url).pathname;
    // 資料夾路徑特殊處理
    if (pathname.indexOf(`.`) == -1) {
        pathname += `./index.html`;
    }
    // 把url路徑變成 ./static路徑
    let realUrl = `./` + path.normalize(`./static/` + pathname);
    const extname = path.extname(pathname);
    // 讀檔案
    fs.readFile(realUrl, (err, data) => {
        // 取mimetype
        getMimeType(extname, mime => {
            res.writeHead(200, {
                `content-type`: mime + `;charset=utf-8`
            });
            res.end(data);
        });
    });
}).listen(3000);

function getMimeType(extname, callback) {
   // 取mime.json檔案，key是extname,value是mimeType
    fs.readFile(`./mime.json`, (err, data) => {
        const mimes = JSON.parse(data);
        callback(mimes[extname]);
    });
}

2. 簡單react專案

基於dva建立簡單react專案（https://github.com/dvajs/dva/…）

npm i dva-cli -g
dva new user-dashboard
cd user-dashboard 
npm run build

把編譯好的dist資料夾下的東西全部拷貝到之前node專案的static資料夾下，重新訪問http://localhost:3000，完成了。

相關文章