记一次简单的部署项目过程

因为有段时间打包部署一直出问题, 到后面也算是一步一步自己查阅才部署成功.

记录的话因为Vue, React的项目打包相差无几, 这里简单用一下React打包的项目吧

首先讲重点

改API中的诸如localhost的URL, 切记修改一致修改成你所部署到的服务器的外网IP地址.

因为这里React是单页面应用, 因此对node代码与多项目应用会有所不同

server.get('/index', (req, res) => {
	res.sendFile(__dirname + '/dist/index.html');
	// 这里用的是 express 服务器
	// dist为create-react-app 直接打包出来的目录, 未做修改文件夹名.
})

下面是处理静态文件, 这里打包自然就会生成这样的目录, 所以node代码会很简单

server.use('/static', express.static('./dist/static'));
// 看你使用情况, 也可以统一放在static下

// server.use('/js', express.static('./dist/js'));
// server.use('/css', express.static('./dist/css'));
// server.use('/img', express.static('./dist/img'));
// server.use('/fonts', express.static('./dist/fonts'));

处理请求, 切记, 在打包之前将前端网页的请求url统统修改为部署服务器的ip地址

server.use('/api/user', require('./routers/userRouter'));
server.use('/api/movie', require('./routers/movieRouter'));

这里要解释的点有点多, 基于express以及mongoDB+mongoose的数据库

• 你的服务器上要安装mongoDB, 所以这里mongoose链接的数据库就是你的服务器, 对服务器来说就是localhost => 本地, 所以这里不需要改, 直接用localhost就行
• 下面的express => server.listen, 则是你开启该express服务器的地址, 这里就需要使用你的服务器外网IP地址了, 端口记得开放.
• 如果未使用数据库, 只是简单的项目 直接使用server.listen()即可.

mongoose.connect('mongodb://localhost:27017/db', {useNewUrlParser: true}, error => {
	if (error) {
		console.log('连接数据库失败：');
		console.log(error);
	} else {
		console.log('连接数据库成功');
		// 启动成功
		server.listen({
			hostname:'你的服务器地址',
			// hostname:'localhost',
			port:1124,
		}, error => {
			if (!error) {
				console.log('服务器启动成功: localhost:1124');
			} else {
				console.log('服务器启动失败：');
				console.log(error);
			}
		});
	}
});

重点, 外部引用文件.

// 这里卡了我很长时间, 可能是因为配置的问题, 部署后项目迟迟找不到文件.
// 比如如果你使用了 iscroll-probe.js等, 这时候你也可以将其直接放入static/js下
// 也可以单独放置在外面, 这里请参考copy-webpack-plugin的使用

// 我的解决方案比较笨, 先打包react项目后找到dist/index.html(主页面html)
// 直接修改其src, 
<script src="./static/iscroll-probe.js"></script>

即可.

简单的预览, http://123.57.146.121:1123/home
*还有注意的一点, 这里的路径得是/home才返回页面, 也可以简单的对express进行修改, *

// 这里将 '/home' 改成 '/' 即可, 看你自己
server.get('/home', (req, res) => {
	res.sendFile(__dirname + '/dist/index.html');
	// 这里用的是 express 服务器
	// dist为create-react-app 直接打包出来的目录, 未做修改文件夹名.
})

完.