RN+dva+node+mongo +nginx+docker 从开发到部署，全栈入坑指引！

项目地址

前言

做为一个优秀前端er，除了要精通前端基础外，其余的如后台，运维，linux等都要有所了解。这样你才能对本身所负责的项目有一个总体的把握，不一样端开发思惟的碰撞，有助于你造成良好的代码习惯，写出高效优质的代码。话很少说，咱们开始吧！

背景

这是个学习型的项目，还有些须要优化的地方，项目是参考 https://github.com/dlyt/YCool , 利用dva代替redux（我的认为dva比redux好学啊有木有，以为redux概念很差理解的彻底能够从dva入手啊，学完dva，redux秒懂）, 而后新增了一些功能。利用工做之余的时间写出来，但愿能帮助到你们~

目录结构

.
├── wu-server                // 后台服务
│   ├── Dockerfile           // dockfile
│   ├── README.md
│   ├── bin                  // 入口文件
│   │   └── server.js
│   ├── config               // 配置目录
│   │   ├── env
│   │   ├── index.js
│   │   └── passport.js      // 登陆认证服务
│   ├── index.js
│   ├── nginx.conf           // nginx 配置
│   ├── package-lock.json
│   ├── package.json
│   ├── release.sh           // 一键部署shell脚本
│   └── src
│       ├── middleware       // 中间件
│       ├── models           // mongo model
│       ├── modules          // 接口目录
│       └── utils            // 公用工具
└── wyfReader                // app端    
    ├── App.js
    ├── __tests__
    │   └── App.js
    ├── app
    │   ├── containers       // UI组件
    │   ├── images
    │   ├── index.js
    │   ├── libs             // 公用库
    │   ├── models           // dva models
    │   ├── router.js        // 路由
    │   ├── services         // 接口服务
    │   └── utils
    ├── app.json
    ├── index.js
    ├── jsconfig.json
    ├── package-lock.json
    ├── package.json
    └── yarn.lock

前端

即RN项目，仅作了ios端的兼容（偷个懒^-^）。彻底版的dva包含了react-router，咱们这边不须要，因此只用了dva-core

基本功能：

• 小说搜索，动态结果列表显示，支持模糊搜索。
• 加入书架，阅读，小说删除功能
• 登陆注册功能，node实现验证码

效果图

后端

框架采用的koa2，passport做为登陆认证，cheerio实现爬虫。

基本功能：

• 提供小说操做相关的全部api
• 提供登陆注册相关api
• node实现svg验证码
• 按期自动更新小说爬虫

部署

运行sh release.sh便可实现一键部署。

流行的有两种方案：pm2和docker，如今docker这么流行，咱果断选择它，写了一个自动构建脚本：release.sh

大概流程就是: 把代码上传到本身主机上面 > 构建镜像 > 而后以守护进程方式运行。

若是还想更近一步的实现自动部署的话，能够试试travis CI 开源免费。它能够经过git的钩子，直接在提交到git的时候自动运行构建脚本

nginx 了解一下

它是一个高性能的HTTP和反向代理服务区。学习成本很低，这里咱只是简单的用nginx作了一下代理。

server {
  listen 80;
  location / {
    root /opt/html;
    index index.html index.html;
  }
  location /server/ {
    expires -1;
    add_header Cache-Control no-cache,no-store;
    proxy_pass http://120.79.161.255:8080/;
  }
}

就是原先咱需写端口访问如： http://120.79.161.255:8080/ 如今直接访问http://120.79.161.255/server/ 便可，是否是变漂亮了不少？

固然nginx远不止这点功能，好比你能够用它作负载均衡、解决跨域问题、处理缓存 防盗链等HTTP相关问题，处理起来也很容易，只需在配置文件加上相关配置便可，有兴趣朋友能够深刻一下。不过话说如今service mesh好像比较流行，Envoy好像想取代它的样子~~哈哈，扯远了~

总结

总的来讲这个项目算是一个全栈练手项目，也没有花多长时间。有些地方仍是有点粗糙的，
可是不妨碍你们学习。还有些概念和工具只是大概提了一下，目的是给初学的朋友留下一个印象（万一从此有用到呢~）。感兴趣的朋友能够基于这个多多优化，加上本身idea。最后，欢迎star & fork！！！