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，还得深入学点底层实现的东西，这也是下一步的方向。

标签：

相关文章