尝试运用docker技术部署vue+koa+mysql的前后端分离全栈项目

前情提要：
练手项目是前端采取vue框架，后端采用koa+mysql的前后端分离的项目；
申请了一台云服务器，打算练习下采用docker容器技术部署下这个全栈项目；

部署的大体思路如下：

• （1）docker部署mysql

  • 拉取mysql镜像：docker pull mysql，【由于最开始mysql8.0会连接不上，所以换一个mysql版本docker pull mysql:5.7】
  • 启动容器：docker run -d --name mysql -p 3307:3306 -e MYSQL_ROOT_PASSWORD=@xixihaha mysql
  • 进入容器：docker exec -it mysql bash
  • 通过 mysql -u root -p进入mysql，并创建数据库“yunDB”

• （2）docker运行项目的后端部分

  • 将后端koa项目的代码放拷贝到云服务器中

  • 修改数据库连接配置文件DBconn/config.js：

    var config = {
        database: 'yunDB', // 使用哪个数据库
        username: 'root', // 用户名
        password: '@xixihaha ', // 口令
        host: '1.117.28.252', // 【主机名，也就是云服务器的ip】
        port: 3307 // 【端口号，MySQL默认3306；但是我们的mysql容器是映射到3307端口的】
    };
    
    

  • 增加Dockerfile文件

    #后端koa项目的镜像制作
    
    # 指定我们的基础镜像是node
    FROM node
    
    # 创建工作目录，WORKDIR指令用于设置Dockerfile中的RUN、CMD和ENTRYPOINT指令执行命令的工作目录
    RUN rm -rf /yunBackend && mkdir /yunBackend
    WORKDIR /yunBackend
    
    # 将后端server相关的文件都copy到container（运行此镜像的容器）文件系统的/yunBackend文件夹下
    COPY . /yunBackend
    
    # 安装项目依赖包
    RUN npm set registry https://registry.npm.taobao.org/ && npm install
    
    
    # 容器对外暴露的端口号(笔者的运行的端口号是3000)
    EXPOSE 3000
    
    # 容器启动时执行的命令，类似npm run start
    CMD ["npm", "start"]
    
    

• 制作后端应用的镜像：docker build -t yun-work-backend:v1 .

• 启动容器：docker run -d --name yunbackend -p 3001:3000 yun-work-backend:v1

• （3）docker运行项目的前端部分 => 思路：将前端打包好的dist文件放到nginx容器中去转发

  • 前端部分的Dockerfile文件如下

  #制作前端镜像
  
  FROM nginx
  
  #dist便是前端build后的文件夹
  COPY dist/  /usr/share/nginx/html/ 
  
  #nginx.conf是与Dockerfile同级目录下的文件，用于拷贝带nginx容器中去配置生效
  COPY nginx.conf /etc/nginx/nginx.conf  
  
  EXPOSE 81  
  

  • 前端镜像制作与启动

    docker build -t yun-front:v1 .

    docker run -d --name yunfront -p 81:81 yun-front:v1

可以结合之前写的这篇文章https://www.jianshu.com/p/efd6d2715afa去对比理解下：普通方式部署与docker容器部署方式的差异