!
前言
以上的小剧场大家当成个段子看看就好了,我相信大部分的前端后端都是挺和谐的,一般来说合力怼产品才是程序员的第一要务(PM 别打我),关于剧场里提到的是否要返回 null
的问题,建议大家以后直接反手一个链接给后端 一千个不用 null 的理由,深藏功与名。
17年毕业到现在算算也有一年多了,前端的工作越来越得心应手,完成日常业务已经没有大问题,前端方面对于一些比较前沿的工具也有了不少心得体会,前段时间手写了一个 webpack 4.x
结合 vue-loader
的脚手架替换掉了公司项目里比较老旧的脚手架,自己写的插件也在项目里面吭哧吭哧的跑的不亦乐乎,也可以带领公司新入职的前端学习更多的姿势了。
但是,总感觉还缺少了什么,以前写过 PHP
,对于接口如何实现的也没有那么好奇,无非就是连接数据库写写 sql
,再大不了就是建建视图查询,用用 redis
之类的,再深入一点就是消息队列 MQTT
结合 websocket
的应用了,那还缺少了什么,没错,就是服务器部署,关于这个,我很好奇!
关于工作初期,我的想法是先要有技术广度的了解,再要技术深度的了解。曾经也有过写脚手架写上瘾的时候,连续一个星期回家写代码写到两三点(大城市的大佬就不要吐槽我了 =3=),各种跑测试,最后出了成果成功运行在线上项目的成就感我至今还记得,但是期间碰到了不少的问题,很多问题在其他领域的人看来甚至都不是问题,只是因为自己知道的太少了,所以被自己限制住了。
想象一下,如果自己能够掌握整个项目从零开始,从第一行代码开始,到发布上线的整个流程,不管是前端后端服务端,自己都能够了解到每个细节,那和后端理论起来,底气都要足不少,不是么?=3=
废话太多,开始正题,本篇文章可以帮助任何对 docker
有兴趣的人有一个基础的认识,最后会有一个简单的基于 vue-cli
搭建的 nginx
服务器的实战应用。
环境安装
题主的系统环境是 windows win7 64位
系统,所以需要个 linux
系统的虚拟机,并且出于装逼的目的,将不使用桌面版的 linux
系统,所有的操作均在命令行完成。
安装 virtualBox
virtualBox
是一个开源的虚拟机软件,相比较VMware
他更小,且开源免费,对于本篇文章想要实现的功能,已经是非常足够。
首先是安装 virtualBox
虚拟机,属于一直下一步到天亮的操作,但也附上安装操作教程。
安装 ubuntu-server
ubuntu
是一款Linux
系统,记住Debian
这个单词单词可以在某些时候起到提示作用。另外,就我愈加深入了解服务器端,发现公司搭建更多用的是centos
,不过没事儿,说来说去都是linux
系统,对于用户而言就是文件目录或者下载工具不太一样而已。
下一步,下载 ubuntu-server
的镜像文件,我用的是 18.04.1 LTS
版本的,过个几年如果这文章还会被人翻出来的话,那时候还请下载自己喜欢的版本。
配置
virtualBox
- 新建
- 这个基本上也是一直下一步到天亮的操作,值得一提的就是关于不能安装
64位
系统的ubuntu
的处理,有的电脑会发现新建的时候没有ubuntu 64位
的选项,可以的话请参考这篇文章。
- 设置
- 存储
- 如上图,点击那个位置将你下载的
ubuntu-server
镜像载入即可。
- 网络
- 如上图,使用桥接网卡选项,可以设置该虚拟机网络环境为同一局域网下的另一台设备,方便我们后续通过主机访问虚拟机搭建的网络。
系统装填成功,开始系统内配置
在此,默认各位已经在虚拟机中安装好了 ubuntu
系统,并且也成功进入了系统,在我们开始了解 docker
之前,有必要对我们所处环境的墙做一些处理,你知道的,这墙就是那墙。
ubuntu
默认安装的下载、更新用的软件是 apt
,软件安装更新的时候都是从一个存放了大量软件的地方下载的,至于从哪里下载,默认的如下。
$ cat /etc/apt/sources.list
复制代码
重新设置下载源,这里还备份了一份以防不时之需。sed
指令是替换一个文件中的指定字符串为另一个字符串,注意中间的竖线分隔符号,前面是被替换的字符串,我们将地址替换为国内的源地址。
$ sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak
$ sudo sed -i 's|deb.debian.org|mirrors.ustc.edu.cn|g' /etc/apt/sources.list
$ sudo sed -i 's|security.debian.org|mirrors.ustc.edu.cn/debian-security|g' /etc/apt/sources.list
复制代码
更新一下 apt-get
的源的地址,这个操作我们以后会经常做。
$ sudo apt-get update
复制代码
安装我们后续需要的包,里面包括了对 https
地址的解析所用的工具包等。
$ sudo apt-get install apt-transport-https ca-certificates software-properties-common curl
复制代码
为确保系统里面没有自带的 docker
软件的残留,我们要清除一下旧版本的 docker
,虽然新系统一般都不会有就是了。
$ sudo apt-get remove docker docker-engine docker.io
复制代码
添加 docker
的 GPG
密钥,并添加 docker-ce
的软件源,这告诉了 apt
去哪里下载 docker-ce
。
$ curl -fsSL https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
$ sudo add-apt-repository "deb [arch=amd64] https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu $(lsb_release -cs) stable"
复制代码
更新软件包缓存。
$ sudo apt-get update
复制代码
下载 docker
。
$ sudo apt-get install docker-ce
复制代码
设置开机的时候启动 docker
,并启动 docker
。
$ sudo systemctl enable docker
$ sudo systemctl start docker
复制代码
添加当前用户到 docker
的用户组,以后可以不用输入 sudo
直接使用 docker
。
$ sudo groupadd docker
$ sudo usermod -aG docker $USER
复制代码
更改 docker-ce
内部使用的下载镜像的地址源,对于 ubuntu 16.04 +
的系统,我们只要在 /etc/docker/daemon.json
更改即可,注意,你可能需要 root
的权限才可以对该文件做更改。
# 使用 root 权限
$ sudo -i
$ vim /etc/docker/daemon.json
# 修改 daemon.json 为如下
{"registry-mirrors": ["https://docker.mirrors.ustc.edu.cn/"]}
# 重启 docker 服务
$ sudo systemctl restart docker
# 记得退出当前的 root 环境
$ exit or ctrl + d
复制代码
至此,对于前期环境的配置已经完成的差不多了,我们已经替换了 apt-get
下载新的软件的源地址为国内地址,也替换了 docker-ce
下载新的镜像时候使用的源地址为国内地址,现在让我们来测一发 docker
。
docker run
为运行一个镜像文件,如果本地没有找到该镜像,会去镜像地址地址下载拉取。如果提示 permission
之类的错误,但你已经做了添加当前用户到 docker
用户组的操作,重启一下虚拟机即可,这是权限不够的意思。
$ docker run hello-world
复制代码
因为我们后期会用到 git
到我的 github
上拉取 vue-cli-base
的代码,所以这里可以提前安装一个 git
。
$ sudo apt-get install git
# 配置用户名和伊妹儿
$ git config –global user.name "你的用户名"
$ git config –global user.email "你的伊妹儿"
复制代码
然后既然是用了 vue-cli
那 nodeJs
自然是不能少的,因为我们会用 webpack
进行打包,那就顺便安装个 nodeJs
,我这里选择的 nodeJs
官方长期支持的版本 8.x
,需要安装 10.x
版本的把 setup_8.x
改为 setup_10.x
即可。
$ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
$ sudo apt-get install -y nodejs
复制代码
下载了 nodeJs
那自然是需要对 nodeJs
切换一下国内的源。
$ npm config set registry https://registry.npm.taobao.org
复制代码
至此,前期准备已经告一段落,接下来就是开始实战部分。
docker
实战
docker
是个啥,我就近期在 linux
系统中使用之后的使用感受来简单介绍一下。 首先来几个英文单词的解释。
image
- 镜像
- 可以理解成操作系统的镜像,但又不是所有的镜像都是操作系统。
container
- 容器
-
docker
跑起来的时候会新建一个容器,该容器里面会运行镜像。
registry
- 镜像源;仓库
- 可以理解成
docker
需要拉取镜像的时候所访问的地方。
有一些比较特殊的概念,可以看着留个印象,docker
里面的镜像是分层的,打个比方,一个操作系统的镜像,里面可能分别安装了 git node
,然后加上系统的基础镜像,一共三层,我们称他为 A镜像,如果这时候还有个 B镜像,他里面有 git node docker
,然后加上系统的基础镜像,那 git node
层 AB镜像 就可以共用。
docker nginx
基础操作
相信作为前端,“nginx
做个反代理就好了”,这种话应该看到不少过,实战我们就直接用 nginx
做个主要例子,期间会对对常用的一些 docker
语法做解释。
首先,我们先拉取 nginx
的镜像文件。
$ docker pull nginx
复制代码
新建一个用于测试 docker
的文件夹,方便管理。
$ mkdir /home/$USER/docker-demo
$ cd /home/$USER/docker-demo
$ mkdir html
复制代码
新建一个用于 nginx
的默认展示页,我们的第一步就是要让这个代码跑在页面上。
$ cd html
$ echo "<html><h1>Hello World</h1></html>" > index.html
$ cd ..
复制代码
将 docker
跑起来吧,当然在跑起来之前,还是需要解释一下参数。
docker run
- 这将新建一个容器,并在里面跑一个镜像。
-d
- 将该容器运行在后台,我们使用
nginx
那肯定是需要持续跑在后台的,又叫守护进程。
-p
- 将容器对外曝露的端口映射到宿主机的端口(也就是我们上面花了半天功夫装的虚拟机)。
- 说白了就是访问宿主机的
8888
端口就好像访问容器的80
端口一样。
--name
- 给我们新建的容器起一个名字。
-v
- 这是
docker
里面比较特殊的东西,volume
,可以这么理解,冒号前面的为宿主机的路径,后面为容器内的路径,这个参数可以将宿主机路径下的东西同步到容器内,因为/usr/share/nginx/html
这个目录就是nginx
中默认的对外展示的目录,所以我们将刚才新建的html
文件夹同步到默认目录里面,我们就可以访问该页面了。
nginx
- 这里是指向我们新建容器所需要用到的镜像文件,如果你上面没有做
docker pull
的操作,docker
也会自动到仓库去拉取过来。
$ docker run -d -p 8888:80 --name my-first-nginx -v $PWD/html:/usr/share/nginx/html nginx
复制代码
ok,不出意外会输出一串字符串,这个就代表了你新建容器的 id
,我们新建的所有的容器都会有一个用作标识的 id
,不过我们不需要记住它,以后可以用 docker ps
来查询。
查看一下我们新建的容器是否有在好好工作。
$ docker ps
复制代码
若见到类似如下,那代表我们的容器有在好好工作,验证一下吧。
在命令行中看看效果。
$ curl localhost:8888
复制代码
看到如下,那就成功了。
命令行看着不过瘾,我们到真机上看看效果,不过在这之前,我们需要知道我们宿主机的 ip
地址,在上面的步骤中我们已经将网络改成了桥接网卡,所以现在我们的虚拟机用是和主机存在同一个局域网下的另一个 ip
。
查看网络接口上分配的 ip
地址,再加个筛选 IPv4
的参数。
$ ip -4 a
复制代码
找到如下,192.168
开头的,这就是虚拟机的 ip
地址了。
接着,我们只需要打开主机,访问 192.168.0.200:8888
不要忘记带上端口号即可。
nginx
实际应用
上面那些都是基操,接下来我们来点不一样的,我们会找一个基于 vue-cli
的 webpack
脚手架,然后依旧是跑在 nginx
容器里面的应用,会有 shell
脚本的书写,方便运维朋友们进行项目一键更新发布。这更加适用于日常我们的项目发布流程。
在准备阶段我们安装了 nodeJs
,我也准备了一个基础的 vue-cli
项目,用于打包生产项目。
在开始之前,我们要先停止刚才我们跑的容器。
# 这是停止容器的指令
# 因为 nginx 是运行在后台的,所以要先停止他才可以移除
# 还记得上面生成的容器唯一 id 么,这里只需要输入前几位即可停止该容器
$ docker stop 5af87
复制代码
当然,光光停止还不够,出于洁癖的心理,还要把容器移除,减少占用空间。
$ bash rm 5af87
复制代码
接下来创建一个新的文件夹,用于演示接下来的项目。
$ mkdir /home/$USER/docker-demo-two
$ cd /home/$USER/docker-demo-two
复制代码
复制 github
上的项目到该文件夹,这是基于最新版的 vue-cli
生成的例子,当然官方还没有用上 webpack 4.x
,不过问题不大,演示足矣。
$ git clone https://github.com/jsjzh/vue-cli-base.git
复制代码
进入 vue-cli-base
之后就是前端基操了,使用 npm
包管理工具安装项目依赖包,由于我们这里是要得到生产环境的代码,所以直接执行 npm run build
将项目进行打包。
$ cd vue-cli-base
$ npm install
$ npm run build
复制代码
项目打包好之后查看一下是否有相关的文件生成。
$ cd dist
$ ls
复制代码
看到如下目录就没问题了。
完成之后进入到开始新建的目录,进行容器的 volume
挂载操作。
$ cd /home/$USER/docker-demo-two
$ docker run -d -p 8889:80 -v $PWD/vue-cli-base/dist:/usr/share/nginx/html nginx
复制代码
还是老样子,命令行会输出该容器的 id
,但我们还是需要查看一下 nginx
有没有好好的运行在后台。
$ docker ps
复制代码
查看到容器之后,在主机打开 192.168.0.200:8889
即可看到熟悉的 vue-cli
的界面了。
但是这还没完,总不能让运维小妹妹每次都跑一遍 npm
吧,作为贴心的开发哥哥,自然是要准备脚本供小妹妹使用,新建一个 shell
脚本,并保存内容如下。
提示:
vim
编辑器编辑的操作是按i
,编辑完成之后Esc ---> :x
即可。
$ cd /home/$USER/docker-demo-two
$ vim update-project.sh
# 脚本内容
cd vue-base-cli
git pull
npm install
npm run build
复制代码
保存好之后,以后项目需要更新的时候,只需要跑一跑脚本就可以完成。
$ cd /home/$USER/docker-demo-two
$ /bin/bash update-project.sh
复制代码
为看到效果,我们直接试着更改一下项目内容。
$ cd vue-cli-base/src
$ vim main.js
# 加入以下内容
console.log("file is change!");
复制代码
退回到上层,执行我们的脚本。
$ /bin/bash update-project.sh
复制代码
等运行完之后,在主机打开 192.168.0.200:8889
,按 F12
打开控制台,就看到了我们输入的内容,至此,项目更新已成功。
不过既然说 docker
跑的都是容器,那自然是可以进到容器里面去一探究竟的,我们进入 nginx
的容器里面看看。
docker exec
- 在运行中的容器中执行命令。
-it
- 保持终端打开状态。
/bin/bash
- 这里就是需要被执行的命令,这个命令是提供一个
bash
环境。
$ docker exec -it 26e52b8c6ffd9 /bin/bash
复制代码
如果你在命令行看到 root@26e52b8c6ffd9:~#
就代表你进入了这个容器,我们再去看看 /usr/share/nginx/html
文件夹下有没有 dist
中的文件。
$ cd /usr/share/nginx/html
$ ls
复制代码
这里可以看到 index.html
文件和 static
文件夹,我们再去看看刚才的 file is change
在哪里。
$ cd static/js
# 注意 这里的名字是都不一样的,你可以先敲个 app 再按 tab 键,会进行自动补全
$ cat app.86602636cb9e13f553fb.js
复制代码
在底部的小角落我们看到了刚才输入的代码。
别忘了从容器里面退出来,依然是 $ exit
或者 ctrl + d
退出容器。
docker 一些便捷的指令
# 批量删除容器
$ docker rm `docker ps -a -q`
# 批量删除镜像
$ docker rmi `docker images -q`
#卸载 docker
$ sudo apt-get purge docker-ce
$ sudo rm -rf /var/lib/docker
复制代码
后语
至此,docker
简单的应用已经结束了,后续还会有关于 docker
的应用教程,想一想,如果我们可以把 static
目录下的文件都传到云空间,利用 CDN
加速,或者再配置一下 nginx
的 gzip
压缩,再来一下反代理,然后了解一下容器新建数据库,跑一个 nodeJs
的接口服务,再用 docker-compose
把前端后端数据库连接起来,实现环境的一键部署,那不是自己一个人就是一个军队?
想想还有点小兴奋,不过饭要一口口吃,代码自然也是要一行行敲,在日益稀疏的头发中找到代码的真谛,不求闻达于诸侯,只求一方天地宁静。
代码如人生,我甘之如饴。
我在这里 gayhub@jsjzh 欢迎大家来找我玩儿。
大纲
- 环境配置(DONE)
-
virtualBox
下载安装 -
ubuntu-server
下载安装 - 虚拟机相关配置
- 系统装填成功,开始系统内配置(DONE)
- 配置
apt-get
下载源 - 配置
docker
镜像源 - 下载
git
和nodeJs
docker
实战(DONE)
- 简单的
nginx
应用 - 结合
vue-cli
的nginx
应用
- TODO(TODO)[分篇]
Dockerfile
docker-compose
nginx
- 上传
app.js
等至云空间