最近在看Mobx和Koa相关的内容,实践初出真知,我们来做一个小项目实践一下。最容易想到的就是Todolist了,这次我们做得稍微实用一点,放到自己的vps上日常用用也是不错的~
用到的装备:
- React
- Mobx
- Koa2
- LeanCloud
- pm2
因为项目比较简单,bundler我用的是parcel,一行配置都不用写确实很爽,编译速度也非常快。数据存储我用的是LeanCloud,有开发版可以免费试用,就是请求数量会有一定的限制。当然你也可以使用MongoDB,这边用云存储主要是为了方便。
最终效果图如下:
前端项目
https://github.com/zebrallel/Todolist
src/app.js
1
|
// 和Redux一样,mobx也给我们提供了一个Provider,注入所有的应用数据
|
src/store/TodoStore
1
|
import { observable, action } from 'mobx'
|
接下来是action
src/actions/TodoAction
1
|
import todoStore from '../../store/TodoStore'
|
store, action都有了,最后就是我们的component了
src/components/Todo
1
|
import { todoActions as actions } from '../../actions'
|
Koa项目
https://github.com/zebrallel/Minos
入口
src/app.js
1
|
const Koa = require('koa')
|
CURD
src/routes/todos
这边的CURD操作都是用了LeanCloud提供的Api,使用起来非常简单,具体大家可以去看官方文档
1
|
const Router = require('koa-router')
|
好了,代码都有了,最后一步就是将我们的代码部署到vps上了
如果大家有国内的云主机是最好的,响应速度最快,我的vps本来是用来搭ssFQ的,机房在美国,所以使用起来响应会很慢。
部署项目主要做这么几件事情:
- 安装nginx
- 上传前端静态资源,交给nginx托管
- 配置nginx反向代理,将前端发出的异步请求代理到node service端口
- 安装Node
- 安装pm2
- 运行node service
下面以安装Node过程举例说明一下,nginx同理,具体可以看这里
- 登陆你的云主机
下载Node最新版,这里提醒一下,先用uname看一下机器的架构,是x86还是x64的,下载对应的32位或者64位binary包,不然是运行不起来的。如果还是不放心,你也可以下载源码包,手动编译
1
|
cd ~
|
- 把bin目录添加到PATH
修改~/.bashrc, 添加以下内容:
1
|
export PATH=~/packages/node-v9.5.0-linux-x64/bin:$PATH
|
保存并退出,执行 source ~/.bashrc 让配置生效,然后试一下npm -v,成功说明配置生效了
- 安装pm2
1
|
npm install -g pm2
|
- 把代码从github down下来,然后运行 pm2 start app.js
最后,用ip访问试一下,能看到页面的话就大功告成~