关于Docker开发前端Vue,数据库Mysql的例子

  • 一.先说说docker是个什么玩意
  • 二.让Mysql跑在容器里
  • 三.前端搭node.js环境


一.先说说docker是个什么玩意

想一想假如你是开发团队的一员,你们一起开发一个项目,但是呢有个问题,成员A用的是mac电脑,成员B用的是linux操作系统,你是window用户,你会发现你们电脑运行环境是不一样的。或许你会问:运行环境不一样有什么关系呢?
这么说吧,你们电脑每个人都配置了一个java包,你是jdk7,而A是jdk5,B是jdk8,你们一起合作开发,你会发现,为什么一模一样的程序,A运行的起来,B也可以,你运行却报错了!为什么?原来你的jdk7和jdk5和8在某一方面不兼容导致你的程序崩溃了。
这时候你们需要统一开发环境,此时docker应运而生。
具体怎么用呢?别急,看下面:

注意:我这里用的是windows10系统,下载的是docker desktop,具体怎么配置docker去百度哦,教程很多,如果实在不行给我留言,我抽时间再出一个window10安装docker教程(当然别的也行,只要是dock,下面我一主要用docker desktop的图形界面操作)

windows下的docker容器ping不通宿主机_npm


然后安在wsl2里面

windows下的docker容器ping不通宿主机_npm_02

二.让Mysql跑在容器里

先去看一个我参考的教程如果看懂了就不用看我跑mysql容器了:
链接: 菜鸟教程.
打开docker desktop

打开命令行cmd
输入

docker images

这里是你pull的镜像(下载的镜像)

然后

docker pull mysql:5.7.30

再docker images,就可以看见mysql了

windows下的docker容器ping不通宿主机_vue.js_03


windows下的docker容器ping不通宿主机_npm_04

输入

docker run -itd --name mysql-test -p 3307:3306 -e MYSQL_ROOT_PASSWORD=123456 mysql

这里mysql本算端口输出是3306,我将它映射到3307(因为我的window自己本来的mysql正在3306运行)

然后docker ps

windows下的docker容器ping不通宿主机_npm_05

这时候你的mysql容器已经跑了起来,你需要在navicat来建一个新的连接

windows下的docker容器ping不通宿主机_windows_06


然后就成功了!这样你的3307端口可以访问一个docker容器的mysql数据库了

windows下的docker容器ping不通宿主机_mysql_07


之后如果你把运行的容器关了

windows下的docker容器ping不通宿主机_vue.js_08


windows下的docker容器ping不通宿主机_windows_09


说明新的mysql没了

三.前端搭node.js环境

这里我用的是vscode来弄的,用idea或者别的也行,我有空试试去。
这里你先pull一个node

docker pull node

windows下的docker容器ping不通宿主机_vue.js_10


然后你会发现

windows下的docker容器ping不通宿主机_docker_11


然后run

windows下的docker容器ping不通宿主机_windows_12


然后去vscode里面下载插件

一.docker

windows下的docker容器ping不通宿主机_docker_13


二.Remote - Containers

windows下的docker容器ping不通宿主机_vue.js_14


然后重启VScode

windows下的docker容器ping不通宿主机_docker_15


发现正在运行的容器:

右键-点击attach vscode

windows下的docker容器ping不通宿主机_vue.js_16


会有个新窗口,进去应该是这样:(马赛克涂的是我后加的)

你新建一个文件夹,比如vue

windows下的docker容器ping不通宿主机_docker_17


然后cd vue(这里是默认linux系统)

windows下的docker容器ping不通宿主机_docker_18


如何按你平时怎么创建vue项目的命令来(下面指令借鉴用)

npm install vue
npm install -g @vue/cli
npm install
npm create lwj

这样就可以在容器里创建好vue项目,这样让你的成员也pull同一个版本的node,这样你们的前端开发环境就都一样了。大家用的同一个node同一个docker容器的环境。

时间匆忙:有疑问可以提出,写的不好不要喷,可以多交流讨论