React+Koa+MongoDB+Docker开发环境

前言

本次博文依然是对 multi-spa-webpack-cli 的扩充和完善。

1. 集成 mongoose。
2. 集成 Docker 开发环境。

multi-spa-webpack-cli 已经发布到 npm，只要在 node 环境下安装即可。

npm install multi-spa-webpack-cli -g

使用步骤如下:

# 1. 初始化项目

multi-spa-webpack-cli init spa-project

# 2. 进入文件目录

cd spa-project

# 未使用 Docker
# 3. 打包不变的部分

npm run build:dll

# 4. 启动项目（手动打开浏览器：localhost:8090）

npm start

# 5. 启动 MongoDB

mongod

# 6. 启动服务

cd server
npm install
npm start

# 使用 Docker（需安装docker）
# 3. 启动项目（手动打开浏览器：localhost:8090）

npm run docker:dev

从上面的步骤可以看出，Docker 只需要 3 步就可以启动项目了。

mongoose

mongoose 是在 node.js 环境下对 MongoDB 进行便捷操作的对象模型工具。

在没开始之前，要先安装 MongoDB。安装 MongoDB 的过程中，可能有些小麻烦，尤其是公司的电脑（谁也不知道电脑里配置了什么东西）。安装过程可参照 【官网：安装MongoDB】

还要知道 MongoDB 的一些概念。

SQL术语/概念	MongoDB术语/概念	解释/说明
database	database	数据库
table	collection	数据库表/集合
row	document	数据记录行/文档
column	field	数据字段/域
index	index	索引
table	joins	表连接,MongoDB不支持
primary key	primary key	主键,MongoDB自动将_id字段设置为主键

数据库服务和客户端：

SQL	MongoDB
Mysqld/Oracle	mongod
mysql/sqlplus	mongo

mongoose 相关概念看看官网就好了【mongoose 中文文档】

用法很简单，定义 Schema，转换成 Model，操作 Model，生成实例。

/* model.js */
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
// 定义 Schema
const UserSchema = new Schema({
  username: {
    type: String,
    unique: true,
    require: true
  },
  password: {
    type: String,
    require: true
  }
});

// 转换成 Model
const UserModel = mongoose.model('User', UserSchema);

module.exports = UserModel;

/* user.js */
// 操作 Model
let user = await UserModel.findOne({ username });
    if (!user) {
        try {
            // 生成实例
            await new UserModel({
            username,
            password
            }).save();
            ctx.body = {
            "success": true,
            "message": "注册成功"
            }
        } catch (error) {
            ctx.body = {
            "success": false,
            "message": "注册失败"
            }
        }
    } else {
    ctx.body = {
        "success": false,
        "message": "用户名已存在"
    }
}

Docker

由上面的步骤，我们可以看出来，项目启动步骤麻烦，而且在安装 MongoDB 环境时，容易受干扰。

下面通过 Docker 来构建开发环境，提高开发体验。

在使用 Docker 之前，先了解下几个概念。

• 镜像： 镜像只是一个虚拟的概念，其实际体现并非由一个文件组成，而是由一组文件系统组成，或者说，由多层文件系统联合组成。

镜像构建时，会一层层构建，前一层是后一层的基础。每一层构建完就不会再发生改变，后一层上的任何改变只发生在自己这一层。比如，删除前一层文件的操作，实际不是真的删除前一层的文件，而是仅在当前层标记为该文件已删除。在最终容器运行的时候，虽然不会看到这个文件，但是实际上该文件会一直跟随镜像。因此，在构建镜像的时候，需要额外小心，每一层尽量只包含该层需要添加的东西，任何额外的东西应该在该层构建结束前清理掉。

所以，在生产部署时，确保每一层的纯净，剔除不必要文件。比如开发编译时的文件等（ node_module ）。这样也避免了镜像不必要的臃肿。

• 容器：容器的实质是进程，但与直接在宿主执行的进程不同，容器进程运行于属于自己的独立的 命名空间。

容器内的进程是运行在一个隔离的环境里，使用起来，就好像是在一个独立于宿主的系统下操作一样。这种特性使得容器封装的应用比直接在宿主运行更加安全。

每一个容器运行时，是以镜像为基础层，在其上创建一个当前容器的存储层，我们可以称这个为容器运行时读写而准备的存储层为容器存储层。

容器存储层的生存周期和容器一样，容器消亡时，容器存储层也随之消亡。因此，任何保存于容器存储层的信息都会随容器删除而丢失。

按照 Docker 最佳实践的要求，容器不应该向其存储层内写入任何数据，容器存储层要保持无状态化。所有的文件写入操作，都应该使用 数据卷（Volume）、或者绑定宿主目录，在这些位置的读写会跳过容器存储层，直接对宿主（或网络存储）发生读写，其性能和稳定性更高。

开发环境经常对文件修改，就可以利用这里的数据卷绑定宿主目录。

• 上下文：传给 Docker 引擎的文件目录。

Docker 在运行时分为 Docker 引擎（也就是服务端守护进程）和客户端工具。在构建镜像时，会将上下文复制到 Docker 引擎。然后通过 Docker 客户端发出指令，而指令的执行是在 Docker 引擎中。所以，上下文的范围要合理，范围过大，就会导致文件复制到 Docker 引擎的时间长；范围过小，则会导致无法操作范围外的文件。

Docker 部署开发环境

部署开发环境其实很简单，只需要配置 Dockerfile 和 docker-compose 即可。相关文档可见：【Dockerfile 指令详解】和【Compose 模板文件】

docker-compose 使用的是 YAML 语言，【YAML 语言教程】

version: '3.6'

services:
  client:
    container_name: "client"
    build:
      context: ../
      dockerfile: Dockerfile.client.dev
    volumes:
      - ../src:/app/client/src
    ports:
      - "8090:8090"
    depends_on:
      - server

  server:
    container_name: "server"
    build:
      context: ../server
      dockerfile: Dockerfile.server.dev
    volumes:
      - ../server:/app/server
    ports:
      - "8080:8080"
    depends_on:
      - database


  database:
    container_name: mongo
    image: mongo
    volumes:
      - ../data:/data/db
    ports:
      - "27017:27017"

开发环境需要的就是实时展现效果，前端页面是这样，后端服务亦是如此。
如上文提到，上下文已经提交到镜像，前端项目如何才能够在容器中实现热替换？其实很简单，就是 volumes 这个配置。同理，后端也是，不过还需要 modemon 工具协助。

在部署时，也要到了一些问题，就是在镜像中，localhost 无法使用，需要用 IP 代替。

// 前端项目
/* webpack.dev.js */
  devServer: {
    publicPath: '/',
    contentBase: path.resolve(__dirname, '..', 'dist'),
    port: APP_CONFIG.port,
    host: '0.0.0.0', // 需指明
    hot: true,
    historyApiFallback: {
      index: '/'
    }
  }

// 后端项目
/* config.js */
module.exports = {
  'database': 'mongodb://database:27017/yexiaochen'  // 与 docker-compose 中 database 服务名匹配
}