antDesignPro线上刷新404 和 liunx部署使用mock数据 umi-serve + pm2

 

 

问题：       

        线上部署使用mock数据

寻找解决方法：

        因为mock的初衷就是为了针对前端单独开发使用的，但是umi官方考虑到有需要mock单独启动到服务所以出现了 umi-serve 但是umi-serve的文档少的可怜，antDesignPro 官网上也不是很详细（吐槽一下确实很多东西都不是很详细，但是不排除自己没看清楚）

官方介绍：

文档地址

所以大概有了思路安装umi-serve然后build项目直接搞定（我以为这样就可以了），没想到build后umi-serve和mock 跟项目完全没关系依旧无效，但是在本地使用 npm run start:no-mock 配合 umi-serve确实可以实现mock数据的使用，在多个群里来回反复横跳，终于在一位大佬的建议下找到了方案（由于隐私关系不透露大佬是谁）：

1.build打包发布到服务器

2.在服务器安装pm2 + nodejs

3.安装git

4.在liunx中将代码拉下来并使用pm2启动umi-serve

虽然经历了一些曲折但是还是完美的解决了问题。

下面就开始我的踩坑之路：

1.404问题和路由问题

第一件事就是先build项目发布到服务器，我的方案是liunx中安装nginx代理 + docker部署

所以简单配置了nginx和docker中的tomcat就直接部署上去了，然后就踩坑了 刷新页面404，我当时很懵逼啊，进页面好好的我就出去再回来就404了，这就让我很难受有四方寻找最后在官方文档找到了：

不愧是官方，早就知道你会出现这个错误提前告诉你解决方案 其他方案不用试了我已经踩过坑了直接用这个就好了

然后部署上去就好了，如果你的项目是 ${host}/demo 这种的格式的你就会发现哎呀图片404了不要怕官方大大早就想好了：

如果404 和 这两个你都用 我建议base:'/admin/'就不要加了 不然会出现这种完美的www.*.com/admin/#/admin/user/account

丑到极致

好了等你弄完了就发现图片好了 就剩mock接口了，

2.安装umi-serve

这个umi-serve真的世间罕有我百度找了好久，谷歌找了好久哎就是牛逼找到到的东西只有这些：

不用找其他的了翻了一堆 就是把这段话复制过去了，太坑了

安装很简单 确实 就这个

yarn add umi-serve

或者

npm install umi-serve

端口默认8001，然后你可以用npm run start:no-mock启动项目然后把proxy.ts修改一下：

这样你就可以在本地体验mock数据和前端分离了

3.服务器安装git（如果想上传可以跳过但是要看下注意事项）：

安装git我就不用交了吧直接安装 然后把代码下在liunx中

注意事项：上传一定记得把node_modules删掉不然上传到你下班都上传不完，进去可以install的（我用macbook Pro m1没有shell 只能用finalShell有好用的可以推荐给我哈）

4.安装nodejs 和 pm2

先安装nodejs （这里我又要吐槽一下，一百度一堆啥去官网下载包然后解压再安装不能直接安装吗？？？）

安装命令：yum install nodejs （你说这不香吗）

然后安装pm2：

安装命令：npm install -g pm2（复制就好了直接用，不要问为啥全局安装，防止你出现问题）

pm2我之前也没了解过，那位大佬一说我就明白了，可以理解为守护进程后台运行的工具，简单明了

等你都安装完了，就先把项目启动起来玩玩然后你就会发现 umi-serve这个命令怎么启动呢，哎巧了我前面忘写了，你要是边看边操作会想骂我哈哈：

需要在你的项目中package.json里添加一句话：

你看看 这不就完事了吗，多简单 你就只需要改一下再上传git再在服务器上pull一下 多好哈哈

好了可以步入正轨了Nginx配置如下：

我这里demo是前端 api是mock 一定要记得api把index去掉还有加“/api/” 两个/都别忘因为我少加了一个就访问不到了

然后你就体验到我搞了六七个小时到成果了，突然有点小难受

最后求关注，点赞吧