一、 准备工作

1. 下载安装Docker:
   https://www.docker.com/get-started
   截屏2021-01-29 上午11.15.59.png

也可以通过homebrew来安装

2. 安装好后，打开设置，设置国内源

   
   截屏2021-01-29 上午11.19.32.png

截屏2021-01-29 上午11.45.16.png

国内源，可同时设置多个：

docker官方中国区 https://registry.docker-cn.com
网易 http://hub-mirror.c.163.com
ustc http://docker.mirrors.ustc.edu.cn
阿里云 http://<你的ID>.mirror.aliyuncs.com

2. 下载安装Node.js:
   http://nodejs.cn/download/
   截屏2021-01-29 下午1.18.31.png

// 查看是否安装成功
$ npm -v

$ node -v

// 更换淘宝源
$ npm config set registry https://registry.npm.taobao.org

// 查看是否更换成功
$ npm config get registry

3. 下载安装vscode:
   https://code.visualstudio.com
   截屏2021-01-29 上午11.13.57.png

安装Docker插件：

截屏2021-01-29 上午11.58.07.png

二、开始搭建

1. 安装 express-generator (Express 应用框架生成器)，用于创建测试项目
   https://www.expressjs.com.cn/starter/generator.html
   

   截屏2021-01-29 下午1.51.38.png

2. 在vscode中打开一个空文件夹，command + j 打开终端，
   执行 $ express，生成新项目。

// 生成新项目
$ express

// 安装依赖
$ npm install

// 启动项目
$ npm start

在浏览器中打开：http://localhost:3000
一切正常的话，页面中会显示如下内容：

截屏2021-01-29 下午2.52.36.png

回到vscode终端，按control + c退出npm

安装依赖 mongoose (用于操作mongodb) 和 nodemon (用于更改源代码后自动重启应用)

$ npm install --save mongoose

$ npm install --save nodemon

安装好 nodemon后，修改 package.json文件：

"start": "node ./bin/www"
// 修改为：
"start": "nodemon ./bin/www"

截屏2021-01-29 下午4.03.44.png

3. 通过 vscode 生成 Dockerfile，在 vscode 中，按 command + shift + p，

• 在弹出的输入框中输入：docker: add，
• 在下面筛选出来的列表中选择 Docker: Add Docker Files to Workspace...，
• 在弹出的下一步中选择Node.js，
• 第三步选择package.json
• 输入端口号，默认为 3000，确认按回车
• 问是否包含 Docker Compose files，选择 Yes

操作完成后，会生成3个新文件：Dockerfile、docker-compose.yml、docker-compose.debug.yml，主要看前两个。

截屏2021-01-29 下午3.47.39.png 截屏2021-01-29 下午3.47.52.png

部署时，会按Dockerfile文件里的步骤执行

在Dockerfile中，npm install前面添加一行，以修改源：

RUN npm config set registry https://registry.npm.taobao.org

修改后如图：

截屏2021-01-29 下午4.53.44.png

4. 在 docker-compose.yml中添加配置

    volumes: 
      - .:/usr/src/app
    links: 
      - mongodb
  mongodb:
    image: mongo:latest
    ports: 
      - 27017:27017
    volumes: 
      - data:/data/db

volumes: 
  data:

修改后如下：

截屏2021-01-29 下午3.57.52.png

5. 在 vscode 下面的终端中输入：docker-compose up 进行部署。在 Mac 和 Windows 中安装的 Docker 自带有docker-compose。至此，环境已经部署好了，接下来修改项目源码，添加对 mongodb 的操作进行测试。

三、测试

1. 添加文件夹 models，在 models 中添加 persons.js
   截屏2021-01-29 下午5.36.53.png
   内容如下：

const mongoose = require("mongoose");

const personsSchema = new mongoose.Schema({
    name: String,
    gender: String,
    age: Number
});

module.exports.Persons = mongoose.model("Persons", personsSchema);

2. 在 app.js 中添加代码：

var mongoose = require("mongoose");
mongoose.connect("mongodb://mongodb:27017/test", { useNewUrlParser: true });

var db = mongoose.connection;
db.on('error', console.error.bind(console, 'CONNECTION ERROR'));
db.once('open', function() {
  console.log("connected");
});

3. 修改 routes/index.js 后如下：

var express = require('express');
var router = express.Router();
var { Persons } = require('../models/persons');

/* GET home page. */
router.get('/', async function(req, res, next) {
  const persons = await Persons.find();
  res.render('index', { title: 'Persons', persons: persons });
});

module.exports = router;

4. 修改 view/index.jade 后如下：

extends layout

block content
  h1= title
  ul
    for person in persons
      li.listItem
        | Name: #{person.name}
        | Gender: #{person.gender}
        | Age: #{person.age}

    else
      p No Person Found

5. 保持终端在当前项目目录下，执行 docker-compose up，上传更新

6. 在Docker界面中找到前面创建的容器mongodb，点击CLI
   

   截屏2021-01-29 下午5.43.40.png
   点击CLI后会打开新的终端进行连接
   截屏2021-01-29 下午5.48.16.png
   在终端中输入 mongo，进入 mongodb，依次执行如下命令：
   截屏2021-01-29 下午5.50.24.png

// 显示所有数据库
> show dbs
// 切换到 `test` 数据库
> use test
// 插入测试数据
> db.persons.insertMany([{name:'lee', gender:'male', age:20},{name:'lin', gender:'female', age: 21}])
// 查看插入后的数据
> db.persons.find().pretty()

7. 在浏览器中打开：http://localhost:3000，这时访问的是Docker里的环境，页面显示如下，说明环境搭建成功
   截屏2021-01-29 下午5.55.36.png