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