dev-serv

    0.1.1 • Public • Published

    dev-serv

    NPM version changelog license

    开发时使用的专属服务器

    • 安装 dev-serv 模块

      npm install dev-serv --save-dev

    • 增加服务器的配置文件

      dev-serv/example 中复制 _dev-serv.json 到项目根目录

      配置项说明请参考 src/dev-serv.js#DEV_SERV_CONFIG, 一般仅需要配置 backend 参数即可

    • 增加 puer-mock 接口配置文件

      请参考 puer-mock 使用文档, 复制 node_modules/puer-mock/example 下面的所有文件到项目根目录

    • 配置项目的 package.json 脚本

      "scripts"{
          "dev": "dev-serv"
      }
    • 启动服务器

      npm run dev

    开发时使用的服务器需要具备哪些功能

    • 静态文件服务器
    • 静态文件修改后浏览器自动刷新
    • Mock API Server
    • 代理后端真实接口(最好 Mock API Server 能够灵活切换到真实接口或者使用 Mock 接口)

    即需要集 static server + mock server + proxy server + live-reload 于一身

    实现方案

    • 使用 expres 来做静态文件服务器 -> 正式环境为 nginx
    • 使用 puer-mock 来做 API Server(代理后端的真实接口) -> 方便切换 mock 接口或者真实接口
    • 使用 http-proxy-middleware 来代理 API Server -> 正式环境为 nginx 反向代理(或者跨域调用)
    • 使用 puer 中间件来做静态文件修改后浏览器自动刷新 -> 方便开发

    即形成下面的结构

    • 通过 :8000 端口服务静态文件
    • 通过 :8000/api 代理在 :8001 端口的后端接口
      • puer-mock 在 :8001 端口启动 mock 接口服务
      • puer-mock 同时代理 :18520 端口的后端真实接口, 方便开发时可以随时切换成真实接口
    【静态服务器】                                                    【Mock API Server】
    http://localhost:8000                                            http://localhost:8001
    ┏━━━━━━━━━━━━━━━━━━┓                            ┏━━━━━━━━━━━━━━━━━━┓ 
    ┃                                 ┃                            ┃                                 ┃
    ┃ http://localhost:8000/a.html    ┃                            ┃ Mock API Route Config           ┃
    ┃ http://localhost:8000/a.css     ┃                            ┃ http://localhost:8001/user/list ┃
    ┃                                 ┃                            ┃                                 ┃
    ┃ http://localhost:8000/api       ┃ --http-proxy-middleware--> ┃      Mock API Server(puer-mock) ┃
    ┃                                 ┃                            ┗━━━━━━━━━━━━━━━━━━┛
    ┃          Static Server(express) ┃                                           
    ┃          + Auto Reload          ┃                                           ┃
    ┃       (puer-connect-middleware) ┃                                          proxy
    ┗━━━━━━━━━━━━━━━━━━┛                                           ┃
                                                                                    v
    
                                                                     【后端真实接口服务器】
                                                                     http://localhost:18520
                                                                     ┏━━━━━━━━━━━━━━━━━━┓
                                                                     ┃                                 ┃
                                                                     ┃http://localhost:18520/user/list ┃
                                                                     ┃                                 ┃
                                                                     ┃             API Server(Backend) ┃
                                                                     ┗━━━━━━━━━━━━━━━━━━┛
    

    因此页面上面所有接口的根路径应该为 :8000/api

    例如:

    // 通过代理调用后端接口, 会去请求 puer-mock 的服务
    // 因此实际上请求会发给 http://localhost:8001/user/list
    //
    // 如果 puer-mock 上禁用了这个 mock 接口, 由于 puer-mock 同时代理了后端真实接口
    // 因此实际上请求会发给 http://localhost:18520/user/list
    $.get('http://localhost:8000/api/user/list');

    Install

    npm i dev-serv

    DownloadsWeekly Downloads

    3

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • avatar