摘要：已經(jīng)發(fā)布到，只要在環(huán)境下安裝即可。下面通過來構(gòu)建開發(fā)環(huán)境，提高開發(fā)體驗(yàn)。容器容器的實(shí)質(zhì)是進(jìn)程，但與直接在宿主執(zhí)行的進(jìn)程不同，容器進(jìn)程運(yùn)行于屬于自己的獨(dú)立的命名空間。部署開發(fā)環(huán)境部署開發(fā)環(huán)境其實(shí)很簡(jiǎn)單，只需要配置和即可。

本次博文依然是對(duì) multi-spa-webpack-cli 的擴(kuò)充和完善。

集成 mongoose。

集成 Docker 開發(fā)環(huán)境。

multi-spa-webpack-cli 已經(jīng)發(fā)布到 npm，只要在 node 環(huán)境下安裝即可。

npm install multi-spa-webpack-cli -g

使用步驟如下:

# 1. 初始化項(xiàng)目

multi-spa-webpack-cli init spa-project

# 2. 進(jìn)入文件目錄

cd spa-project

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

npm run build:dll

# 4. 啟動(dòng)項(xiàng)目（手動(dòng)打開瀏覽器：localhost:8090）

npm start

# 5. 啟動(dòng) MongoDB

mongod

# 6. 啟動(dòng)服務(wù)

cd server
npm install
npm start

# 使用 Docker（需安裝docker）
# 3. 啟動(dòng)項(xiàng)目（手動(dòng)打開瀏覽器：localhost:8090）

npm run docker:dev

從上面的步驟可以看出，Docker 只需要 3 步就可以啟動(dòng)項(xiàng)目了。

mongoose 是在 node.js 環(huán)境下對(duì) MongoDB 進(jìn)行便捷操作的對(duì)象模型工具。

在沒開始之前，要先安裝 MongoDB。安裝 MongoDB 的過程中，可能有些小麻煩，尤其是公司的電腦（誰也不知道電腦里配置了什么東西）。安裝過程可參照 【官網(wǎng)：安裝MongoDB】

還要知道 MongoDB 的一些概念。

數(shù)據(jù)庫服務(wù)和客戶端：

mongoose 相關(guān)概念看看官網(wǎng)就好了【mongoose 中文文檔】

用法很簡(jiǎn)單，定義 Schema，轉(zhuǎn)換成 Model，操作 Model，生成實(shí)例。

/* 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
  }
});

// 轉(zhuǎn)換成 Model
const UserModel = mongoose.model("User", UserSchema);

module.exports = UserModel;

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

由上面的步驟，我們可以看出來，項(xiàng)目啟動(dòng)步驟麻煩，而且在安裝 MongoDB 環(huán)境時(shí)，容易受干擾。

下面通過 Docker 來構(gòu)建開發(fā)環(huán)境，提高開發(fā)體驗(yàn)。

在使用 Docker 之前，先了解下幾個(gè)概念。

鏡像： 鏡像只是一個(gè)虛擬的概念，其實(shí)際體現(xiàn)并非由一個(gè)文件組成，而是由一組文件系統(tǒng)組成，或者說，由多層文件系統(tǒng)聯(lián)合組成。

鏡像構(gòu)建時(shí)，會(huì)一層層構(gòu)建，前一層是后一層的基礎(chǔ)。每一層構(gòu)建完就不會(huì)再發(fā)生改變，后一層上的任何改變只發(fā)生在自己這一層。比如，刪除前一層文件的操作，實(shí)際不是真的刪除前一層的文件，而是僅在當(dāng)前層標(biāo)記為該文件已刪除。在最終容器運(yùn)行的時(shí)候，雖然不會(huì)看到這個(gè)文件，但是實(shí)際上該文件會(huì)一直跟隨鏡像。因此，在構(gòu)建鏡像的時(shí)候，需要額外小心，每一層盡量只包含該層需要添加的東西，任何額外的東西應(yīng)該在該層構(gòu)建結(jié)束前清理掉。

所以，在生產(chǎn)部署時(shí)，確保每一層的純凈，剔除不必要文件。比如開發(fā)編譯時(shí)的文件等（ node_module ）。這樣也避免了鏡像不必要的臃腫。

容器：容器的實(shí)質(zhì)是進(jìn)程，但與直接在宿主執(zhí)行的進(jìn)程不同，容器進(jìn)程運(yùn)行于屬于自己的獨(dú)立的 命名空間。

容器內(nèi)的進(jìn)程是運(yùn)行在一個(gè)隔離的環(huán)境里，使用起來，就好像是在一個(gè)獨(dú)立于宿主的系統(tǒng)下操作一樣。這種特性使得容器封裝的應(yīng)用比直接在宿主運(yùn)行更加安全。
每一個(gè)容器運(yùn)行時(shí)，是以鏡像為基礎(chǔ)層，在其上創(chuàng)建一個(gè)當(dāng)前容器的存儲(chǔ)層，我們可以稱這個(gè)為容器運(yùn)行時(shí)讀寫而準(zhǔn)備的存儲(chǔ)層為容器存儲(chǔ)層。
容器存儲(chǔ)層的生存周期和容器一樣，容器消亡時(shí)，容器存儲(chǔ)層也隨之消亡。因此，任何保存于容器存儲(chǔ)層的信息都會(huì)隨容器刪除而丟失。
按照 Docker 最佳實(shí)踐的要求，容器不應(yīng)該向其存儲(chǔ)層內(nèi)寫入任何數(shù)據(jù)，容器存儲(chǔ)層要保持無狀態(tài)化。所有的文件寫入操作，都應(yīng)該使用 數(shù)據(jù)卷（Volume）、或者綁定宿主目錄，在這些位置的讀寫會(huì)跳過容器存儲(chǔ)層，直接對(duì)宿主（或網(wǎng)絡(luò)存儲(chǔ)）發(fā)生讀寫，其性能和穩(wěn)定性更高。

開發(fā)環(huán)境經(jīng)常對(duì)文件修改，就可以利用這里的數(shù)據(jù)卷綁定宿主目錄。

上下文：傳給 Docker 引擎的文件目錄。

Docker 在運(yùn)行時(shí)分為 Docker 引擎（也就是服務(wù)端守護(hù)進(jìn)程）和客戶端工具。在構(gòu)建鏡像時(shí)，會(huì)將上下文復(fù)制到 Docker 引擎。然后通過 Docker 客戶端發(fā)出指令，而指令的執(zhí)行是在 Docker 引擎中。所以，上下文的范圍要合理，范圍過大，就會(huì)導(dǎo)致文件復(fù)制到 Docker 引擎的時(shí)間長(zhǎng)；范圍過小，則會(huì)導(dǎo)致無法操作范圍外的文件。

部署開發(fā)環(huán)境其實(shí)很簡(jiǎn)單，只需要配置 Dockerfile 和 docker-compose 即可。相關(guān)文檔可見：【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"

開發(fā)環(huán)境需要的就是實(shí)時(shí)展現(xiàn)效果，前端頁面是這樣，后端服務(wù)亦是如此。
如上文提到，上下文已經(jīng)提交到鏡像，前端項(xiàng)目如何才能夠在容器中實(shí)現(xiàn)熱替換？其實(shí)很簡(jiǎn)單，就是 volumes 這個(gè)配置。同理，后端也是，不過還需要 modemon 工具協(xié)助。

在部署時(shí)，也要到了一些問題，就是在鏡像中，localhost 無法使用，需要用 IP 代替。

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

// 后端項(xiàng)目
/* config.js */
module.exports = {
  "database": "mongodb://database:27017/yexiaochen"  // 與 docker-compose 中 database 服務(wù)名匹配
}