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

阳光穿透心脏的1/2处 2022-11-29 05:57 136阅读 0赞

## 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介绍 ##

![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: 'xx@xx.com'
        })
        
        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方式或其他方式

[compose]: /images/20221124/e2eaeffb875c4a4fac5334dfe9ccc5ac.png