之前使用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时候是请求后端，我们是个文件服务器所以找不到对应文件。
网友评论