资讯专栏INFORMATION COLUMN

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

liaorio / 3014人阅读

摘要:基本功能提供小说操作相关的所有提供登录注册相关实现验证码定期自动更新小说爬虫部署运行即可实现一键部署。如果还想更近一步的实现自动部署的话,可以试试开源免费。

项目地址 前言

作为一个优秀前端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!!!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/27341.html

相关文章

  • 前端开发者的 Docker 之旅

    摘要:毫不夸张的说,前端的演化历史和成功,是工程师不断突破桎梏迈向本我的探索旅程。前端是由什么语言组成的前端开发技术,从狭义的定义来看,是指围绕这样一套体系的开发技术,它的运行宿主是浏览器。 showImg(http://7xi8kv.com5.z0.glb.qiniucdn.com/dalibao.jpg); 「Docker 开发大礼包」已经到了第三季。 「JavaScript:世界上最被...

    GitCafe 评论0 收藏0
  • 前端开发者的 Docker 之旅

    摘要:毫不夸张的说,前端的演化历史和成功,是工程师不断突破桎梏迈向本我的探索旅程。前端是由什么语言组成的前端开发技术,从狭义的定义来看,是指围绕这样一套体系的开发技术,它的运行宿主是浏览器。 showImg(http://7xi8kv.com5.z0.glb.qiniucdn.com/dalibao.jpg); 「Docker 开发大礼包」已经到了第三季。 「JavaScript:世界上最被...

    bingo 评论0 收藏0
  • 超长干货:基于Docker的DevOps CI/CD实践——来自iHealth的分享

    摘要:在猫屎氤氲的雾气里角仰望天花板,手机微信提醒这次构建成功或失败,并附带污言秽语。这时他可以开始往工位走,坐下时,微信又会提醒本次部署到成功或失败。与企业微信的集成在决定使用之前,需要知道的是,是一个高度依赖社区的项目。 前言 相信我,一切事情的发生都是赶鸭子上架,没有例外。人类所有伟大的变革都是迫不得已,可又是那么顺其自然。比如容器(docker)技术的诞生,比如箭在弦上的创业,比如野...

    Dongjie_Liu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<