React + Node 單頁應用「三」API 設計 & 項目部署

關於項目

項目地址
預覽地址

記錄最近作的一個 demo，前端使用 React，用 React Router 實現前端路由，Koa 2 搭建 API Server， 最後經過 Nginx 作請求轉發。

這是第三篇，也是最後一篇，內容關於整個項目的 API 設計，以及最後的項目部署。

前端 Server

項目打包後的代碼集中在 /build/ 目錄下，create-react-app 提供了 serve -s build 命令啓動前端 Server，固然，還能夠選擇其餘工具。如今，前端 server 跑在開發機的 3000 端口上。

接下來，咱們配置項目的 API。

API 設計

由於先後端分離，API 能夠獨立設計，能夠走獨立域名，例如 api.github.com，也能夠走獨立的根目錄，例如 github.lijundong.com/api/auth，咱們這裏選擇獨立根目錄形態。

其次請求方式須要建議作區分，能夠參考 Github API，GET、POST、PUT、DELETE 區分開，使得 API 功能結構功能清晰，很值得借鑑。

路徑中的 /api 用於 Nginx 轉發時做區分，咱們在設置後端 API 時，以下，

const router = require('koa-router')();
const Comment = require('./comment.js');
const User = require('./user.js');
const Home = require('./home.js');
const Auth = require('./auth.js')
router.get('/', Home.renderIndex)
      .get('/login', User.renderLogin)
      .get('/signup', User.renderSignup)
      .get('/getcomment', Comment.getComment)
      .get('/getauthuser', Auth.getAuthUser)
      .get('/auth', Auth.getCode)
      .post('/signup', User.signup)
      .post('/login', User.login)
      .post('/newcomment', User.checkAuth, Comment.newComment)
      .post('/delcomment', User.checkAuth, Comment.delComment)

最後 Node 服務在部署時能夠直接選擇 node app.js 的方式，固然，這種方式，在遇到 Server 掛了時，得人工重啓，因此我推薦使用一些自動重啓的工具，例如 forever、nodemon 等。

Nginx 配置

下面分別是 AP 和 前端 Server 的 Nginx 配置，後端服務 /api 路徑走 127.0.0.1:3300，前端路由走 127.0.0.1:3000。

server {
    listen 80;
    server_name github.lijundong.com;
    access_log /var/log/nginx/github.log;
    location /api/ {
        proxy_pass //127.0.0.1:3300/;
    }
    location / {
        proxy_pass //127.0.0.1:3000/;
        }
}

意識流

大三，認識了羅老師以後，想賺錢，因而開始接外包，不爽於沒有後端支持，本身開始學 Node 相關的東西，固然，也只侷限於使用，剛開始用 Express ，畢設想學點東西，又看了 Koa，但如今還只是侷限在 Node Coder，若是想作一名 Node Develper，還得深刻學點底層實現的東西，這也是下一步的方向。