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，完成了。