node静态服务器优缺点_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项目

npm i dva-cli -g

dva new user-dashboard

cd user-dashboard

npm run build

把编译好的dist文件夹下的东西全部拷贝到之前node项目的static文件夹下，重新访问http://localhost:3000，完成了。