node搭建服务，部署react项目探究与心得

之前使用java写过后端，还没尝试使用node来写后端，这几天有时间做了下这部分的研究。
node http模块可以方便的实现一个http服务器：

var http = require("http");
http.createServer(function(request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("Hello World");
  response.end();
}).listen(8888);
console.log('Server is running at http://127.0.0.1:8080/');

使用react CLI可以轻松的起一个本地服务，打包后使用nginx可以轻松部署react项目。由于之前大部分时间从事iOS开发，对于这部分内部到底是怎么实现的我却知之甚少。心想那我为什么不能自己起一个服务来部署react项目，顺带可以理顺里面的逻辑。

思路一：实现http服务器直接返回打包后build文件中的index.html

实践：

'use strict';

var
    fs = require('fs'),
    path = require('path'),
    http = require('http');
// 创建服务器:
var server = http.createServer(function (request, response) {
    // 解析当前目录:
    var workDir = path.resolve('.'); // '/Users/michael'
    // 组合完整的文件路径:当前目录+'build'+'index.html':
    var filepath = path.join(workDir, 'build','index.html');
    console.log(filepath);
    // 获取文件状态:
    fs.stat(filepath, function (err, stats) {
        if (!err && stats.isFile()) {
            // 发送200响应:
            response.writeHead(200);
            // 将文件流导向response:
            fs.createReadStream(filepath).pipe(response);
        } else {
            // 发送404响应:
            response.writeHead(404);
            response.end('404 Not Found');
        }
    });
});

server.listen(8080);

console.log('Server is running at http://127.0.0.1:8080/');

遇到问题：
结果发现页面空白，加载js报错。
发现是路径有问题，直接把build里面的index.html拉倒浏览器页面不能正常显示就是index.html引入的js、css文件路径有问题。但是我这种直接部署http服务器走的是http协议而不是file协议。我发现index.html引用js的路径是http://127.0.0.1:8080/xxx.js，这样显然是访问不了js文件的。于是修改代码如下

思路二：实现个静态资源服务器应该可以解决这个问题

实践：

'use strict';

var
    fs = require('fs'),
    url = require('url'),
    path = require('path'),
    http = require('http');

// 从命令行参数获取root目录，默认是当前目录:
var root = path.resolve(process.argv[2] || '.');

console.log('Static root dir: ' + root);

// 创建服务器:
var server = http.createServer(function (request, response) {
    // 获得URL的path，类似 '/css/bootstrap.css':
    var pathname = url.parse(request.url).pathname;
    // 获得对应的本地文件路径，类似 '/srv/www/css/bootstrap.css':
    var filepath = path.join(root, pathname);
    // 获取文件状态:
    fs.stat(filepath, function (err, stats) {
        if (!err && stats.isFile()) {
            // 没有出错并且文件存在:
            console.log('200 ' + request.url);
            // 发送200响应:
            response.writeHead(200);
            // 将文件流导向response:
            fs.createReadStream(filepath).pipe(response);
        } else {
            // 出错了或者文件不存在:
            console.log('404 ' + request.url);
            // 发送404响应:
            response.writeHead(404);
            response.end('404 Not Found');
        }
    });
});

server.listen(8080);

console.log('Server is running at http://127.0.0.1:8080/');

使用node命令运行这个文件 node 文件名 build目录 例如

node src/fileServer.js /Users/xxxx/Desktop/nodeHttp/build

然后访问http://127.0.0.1:8080/index.html就可以了
遇到问题：
直接访问http://127.0.0.1:8080 报404 应该返回首页，
直接访问http://127.0.0.1:8080/login 报404 不能直接定位到对应的路由
思考：
单页面应用只有一个页面，所有路由请求应该都指向它即index.html。访问http://127.0.0.1:8080/index.html后项目内使用history跳转只改变路由，没有重新请求后端。所以项目可以正常使用。但是直接访问http://127.0.0.1:8080/login时候是请求后端，我们是个文件服务器所以找不到对应文件。

使用express写了一个单页面应用服务器

const express = require('express')
const history = require('connect-history-api-fallback')
var compress = require('compression')

const path = require('path')

const app = express()
app.use(compress())
app.use(express.static('./'))
app.use(history({
  verbose: true,
  index: '/'
}))

app.get("/", function(req, res) {
  res.sendFile(path.join(__dirname, "index.html"))
})

const port = process.env.PORT || 4000

module.exports = app.listen(port, function (err) {
  if (err) {
    console.log(err)
    return
  }
  console.log('Listening at http://localhost:' + port + '\n')
})