问题:
线上部署使用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/” 两个/都别忘因为我少加了一个就访问不到了
然后你就体验到我搞了六七个小时到成果了,突然有点小难受
最后求关注,点赞吧