一、 准备工作
- 下载安装
Docker:
https://www.docker.com/get-started
截屏2021-01-29 上午11.15.59.png
也可以通过
homebrew来安装
-
安装好后，打开设置，设置国内源
截屏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
ustchttp://docker.mirrors.ustc.edu.cn
阿里云http://<你的ID>.mirror.aliyuncs.com
- 下载安装
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
- 下载安装
vscode:
https://code.visualstudio.com
截屏2021-01-29 上午11.13.57.png
安装Docker插件：
截屏2021-01-29 上午11.58.07.png
二、开始搭建
-
安装
express-generator(Express 应用框架生成器)，用于创建测试项目
https://www.expressjs.com.cn/starter/generator.html
截屏2021-01-29 下午1.51.38.png 在
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
- 通过
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
- 在
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
- 在
vscode下面的终端中输入：docker-compose up进行部署。在Mac和Windows中安装的Docker自带有docker-compose。至此，环境已经部署好了，接下来修改项目源码，添加对mongodb的操作进行测试。
三、测试
- 添加文件夹
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);
- 在
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");
});
- 修改
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;
- 修改
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
保持终端在当前项目目录下，执行
docker-compose up，上传更新-
在
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()
- 在浏览器中打开：http://localhost:3000，这时访问的是
Docker里的环境，页面显示如下，说明环境搭建成功
截屏2021-01-29 下午5.55.36.png
