React+Koa+MongoDB+Docker开发环境

968 阅读5分钟

前言

本次博文依然是对 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 服务名匹配
}