React + Node 单页应用「三」API 设计 & 项目部署

时间:2021-04-14 08:56:10

关于项目

项目地址
预览地址

记录最近做的一个 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,还得深入学点底层实现的东西,这也是下一步的方向。