制作Docker镜像，在前端的应用

1. 制作Docker镜像

Dockerfile是一个由一堆命令+参数构成的脚本， 使用docker build即可执行脚本构建镜像， 自动的做一些事，主要用于进行持续集成。
一般， Dockerfile共包括四部分：

• 基础镜像信息
  不可能从头到尾创建一个完整的镜像, Docker镜像是分片的文件系统, 如果从头到尾创建就是重复劳动, 可以基于别人创建好的基础上添加.
• 维护者信息
• 镜像操作指令
• 容器启动时执行指令

一个简单的Koa应用：

const Koa = require('koa');
const app = new Koa();

//response
app.use(ctx => {
  ctx.body = 'Hello Koa';
});

app.listen(3000);

Dockerfile示例：

FROM node:10

// 维护者信息
LABEL maintainer = xxxx@xx

// 操作指令 每一条操作指令都对应分片的系统
# 创建app目录
WORKDIR / app

//# 把package.json, package-lock,json(npm@5+) 或 yarn.lock 复制到工作目录(相对路径)
COPY ["package.json","*.lock","./"]

//打包app编码
//注意要指定工作目录中的文件名
COPY src ./src

// 使用.dockerignore文件, 上面两个COPY合并成一个
# COPY ..

// 使用Yarn安装 app依赖
如果需要构建生产环境下的代码, 请使用:
# --propd参数
RUN yarn --prod --registry=https://registry.npm.taobao.org

# 对外暴露端口
EXPOSE 3000

CMD [ "node", "src/index.js"]

2. Docker-compose介绍

docker-compose在前端里面的使用demo
Nodejs + mongodb + koa + vue 应用组合:

version: '3'
services:
  web:
  	image: web:1.0
  	ports:
  	- "8089:80"
  	
  server:
  	image: server:1.0
  	ports:
  	- "3000:3000"
  	depends_on:
  	- mongodb
  	links:
  	- mongodb:db

  mongodb:
    image:mongo
    restart:always
    environment:
      MONGO_INITDB_ROOT_USERNAME:root
      MONGO_INITDB_ROOT_USERNAME:123456

// 这里有三个服务, 分别是web, server, mongodb服务. 
// web服务发起个请求到server, server接到请求把数据写到mongodb数据库
// 数据库返回结果给server,server返回结果给web, web展示数据
// 使用一个docker-compose去执行三个镜像

3. Docker-compose在前端全栈项目中的应用

1. npm init -y创建package.json初始化一个项目

2. 创建src目录, 目录下创建入口文件app.js

3. yarn add koa

   const koa = require('koa');
   // 实例化一个koa
   const app = new koa();
   // 
   app.use(async (ctx) => {
     ctx.body = {
       msg:'hi,nice to meet you'
     }
   })
   
   app.listen(3000);
   

4. 完成后 koa安装成功, 后台使用koa做接口

5. 初始化前端项目 npx vue create frontend并启动

6. 下面做一件事, 从前端项目发起一个请求, 这个请求在server端接收保存到mongodb数据库

7. server目录下创建docker-compose.yml文件

   version: '3.1'
   services:
     mongo:
       image:mongo
       restart:always
       // 27017端口映射到 去访问本地的27017mongodb服务
       ports:
         - "27017:27017"
       environment:
         MONGO_INITDB_ROOT_USERNAME: root
         MONGO_INITDB_ROOT_PASSWORD: 123456
   

8. docker-compose up -d命令运行起来 docker ps命令查看启动的mongodb服务

9. 数据库层面做好了. 添加mongoose

10. src目录下创建dbconfig.js作为数据库连接文件

    const mongoose = require('mongoose')
    // 定义URL
    const URL = 'mongodb://root:123456@localhost:27017/admin'
    // 定义一个方法
    var connect = function () {
    	// 解析
    	mongoose.connect(URL,{useNewUrlParser: true}}
    }
    
    connect()
    
    //监听事件
    mongoose.connection.on('error', function() {
    	console.log('不能连接')
    	if(err) {
    	  console.error('Failed to connect to mongo on startup')
    	  setTimeout(connect, 5000)
    	}
    })
    
    mongoose.connection.on('连接成功', function () {
    	console.log('mongodb连接成功')
    })
    
    const UserSchma = new mongoose.Schma({
    	name: String,
    	gender: String,
    	email: String
    })
    
    const User = mongoose.model('user', UserSchma)
    
    var user = new User({
      name:'xiaoming',
      gender: 0,
      email: '[email protected]'
    })
    
    user.save()
    

11. node src/dbconfig.js 执行文件, 看是否正常连接

12. 把web, server, mongodb三个服务做镜像 , 方便把服务部署到任何一台有docker的服务器. 前端项目中build构建好, 打包出dist目录, 创建Dockerfile,

    // 引用Nginx基础镜像
    FROM nginx
    // 把dist目录下的文件拷贝到nginx的html目录下去
    COPY ./dist /usr/share/nginx/html
    // 执行
    RUN ls -la /usr/share/nginx/html
    // 暴露端口
    EXPOSE 80
    // 执行CMD
    CMD ["nginx", "-g","daemon off"]
    

    终端中使用docker build -t web:1.0命令创建web应用

13. 前端搞好, server端也要创建个Dockerfile, 同时创建个.dockerignore文件, 忽略一些node_modules/ , .git , .vscode , .DS_Store 等等

    // 使用node10作为基础镜像
    FROM node:10
    // 指定一个工作目录
    WORKDIR /app
    // 当前文件拷贝进来
    COPY ..
    // 安装
    RUN yarn install --registry==https://xxxx
    
    EXPOSE 3000
    
    CMD ["node", "src/app.js"]
    // 因为docker和docker容器之间, 他们网络相互隔离
    // 因此server这里怎么访问mongodb容器
    // 使用links方式或其他方式