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

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

集成 mongoose。

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

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

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 是在 node.js 環(huán)境下對 MongoDB 進行便捷操作的對象模型工具。

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

還要知道 MongoDB 的一些概念。

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

mongoose 相關概念看看官網(wǎng)就好了【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": "用戶名已存在"
    }
}

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

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

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

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

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

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

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

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

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

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

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

部署開發(fā)環(huán)境其實很簡單，只需要配置 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"

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

在部署時，也要到了一些問題，就是在鏡像中，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 服務名匹配
}