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！！！