结合 qws 和 qbt ，本地开发环境搭建

原创

serena

修改于 2021-08-03 06:56:08

1.9K00

代码可运行

文章被收录于专栏：社区的朋友们社区的朋友们

运行总次数：0

代码可运行

作者：陈彦贝

安装qws容器以及初始化化本地项目

qws 是腾讯云内部封装的一个NodeJS框架，它主要解决NodeJS及公共库的版本管理、进程线程管理、公共Api抽离、日志搜集等功能，简洁来说，qws主要完成三部分功能：

pm2类似的进程管理
在框架层集成通用服务（通用数据接口、日志搜集等中间件服务）
依赖版本管理（NodeJS及公共库）

这些功能如果分开开发以及分开应用的话，个人觉得效果会更好一些。

如何安装qws

qws提供了Linux 安装方法和Windows 安装方法，嗯，完美的避开了Mac环境的安装。

可以通过以下的方式手动安装：

下载代码：git clone http://git.code.oa.com/kimhou/qws.git
运行npm run init，它完成了两个工作：
- 构建代码（src/server和src/qws-api）
- 建立qws-api本地链接
运行npm run publish
修改./bin/qws-cli.js文件，并且建立全局软链
- 把./bin/qws-cli.js第一行代码改成#!/usr/bin/env node
- 建立全局软链：ln -s /Users/ablechen/tx-work/qws/build/qws/bin/qws-cli.js /usr/local/bin/qws，需要替换成你本地的qws-cli的地址。

自此，qws命令就可以在你的本地正常运行了。

如何初始化本地项目的依赖

以 dcdb_proj项为例，我们来讲讲如何安装它的本地依赖。

下载代码：git svn clone http://svn-cd1.tencent.com/qcloudcd/dcdb_proj
安装npm依赖：npm install
安装本地npm包依赖，分别是node相关的qws-api和前端相关的组件库qcloud-components-react。
- 下载qws，然后找到qws-api运行npm link，然后在dcdb_proj中运行npm link qws-api
- 下载QcloudWebComponents_proj，然后在项目中运行npm link，然后在dcdb_proj中运行npm link qcloud-components-react

使用qws启动本地NodeServer

前面准备好了qws和Node项目，接下来，我们看看如何将qws和Node项目连接起来。

如何利用qws运行本地NodeServer

理论上来说，本地项目应该跑一个 npm run dev 之类的命令即可运行。但是前面提过，qws本质上是一个NodeJS框架，它将一些通用服务统一管理之后，我们的本地开发就再也离不开它了。

qws提供了npm run debug [env]，可以读取本地的配置文件启动NodeServer。

那么如何提供本地的配置文件呢？

新建./src/server/config/qws.apps.local.js文件，指向对应项的配置文件。

export default {
    dcdb: {
        online: true,
        // 同样，指向你本地项目的配置文件即可
        config: '/Users/ablechen/tx-work/dcdb_proj/branches/isolation/server/lib/qws.config.js'
    }
}

到此，你已经在某个端口启动了你的项目，你访问 http://127.0.0.1:3501 能够在qws控制台看到对应的日志。是的，qws启动并监听了本地NodeServer。而这，也才是第一步而已。

使用代理进行本地开发

前面启动的NodeServer，你通过 http://127.0.0.1:3501 访问就会遇到第一个问题：登录状态保持。

使用nginx转发，解决cookie同步问题

腾讯云有统一的单点登录页面，我们访问本地项目的时候，会自动跳转到登录页面，那么如何同步cookie，保持登录状态呢？最简单的就是使用nginx转发请求，我们安装nginx并且修改 /usr/local/etc/nginx/nginx.conf 如下：

图： nginx配置

这时，你可以通过对应的url访问咱们本地的项目，也就是说，我们已经把NodeServer相关的东西给串起来了。

紧接着，咱们再来把前端资源给串起来，整个项目就算能够正常运行了。

使用nproxy/anyproxy转发，解决JS/CSS等资源的代理问题

前面虽然把NodeServer相关的东西成功运行起来，但是你如果通过Chrome DevTools查看里面的JS/CSS等静态资源，你会发现，他们都是线上的文件而并非本地的代码，也就是说，你改了本地的JS/CSS文件并不会生效到页面上。因此，我们需要将这些资源文件也代理到本地，这儿我们通过nproxy来解决这个问题。

const path = require('path');
const buildPath = path.join(__dirname, 'statics/bundle/')
const destPath = path.join(__dirname, 'statics/dest/dcdb')

module.exports = [{
    pattern: /(entra\.qcloud\.dcdb\.\w+\.\d+)/i,
    responder: path.join(destPath, '$1.js')
  },
  {
    pattern: /(\/qcloud\.dcdb\.\w+)\.\d+/i,
    responder: path.join(buildPath, '$1.js')
  },
  {
    pattern: /(app\.dcdb\.\w+\.index\.\d+)/i,
    responder: path.join(buildPath, '$1.js')
  },
  {
    pattern: /(app\/dcdb\/index)/i,
    responder: path.join(buildPath, 'app.dcdb.index.js')
  },
  {
    pattern: /http:\/\/(imgcache.qq.com.*)/,
    responder: 'https://$1'
  }
];