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

时间:2021-7-3 作者:qvyue

前情提要:
练手项目是前端采取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容器部署方式的差异

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。