背景
在部署项目的过程中,以前一直都是在本地部署,然后通过xftp上传打包好的文件到服务器上,这个过程太过于繁琐。而现在就职的公司采用的是自动化部署的方案,在功能开发完后,将功能分支合并到master分支上,服务器就会自动构建代码。所以才有了学习自动化部署的想法。
本文中的一些概念、步骤,可能解释的不是很清楚或者有错误,有任何问题、想法的还恳请矫正 :) 对于一些概念和命令等,在文档上查找更好,所以在这里就没有对命令进行详细的解释。
正文
前端项目往往会根据环境的不同而出现各种各样的问题,并且在配置环境的过程中,大多情况下都很麻烦,所以使用Docker作为项目运行的环境。
概念
Docker初用只需要了解镜像、容器这两个概念就足够了。
- 镜像: 镜像是在运行时使用的文件系统和参数构成的。我们可以将其看作一个具有所需要的环境的微型的系统。
- 容器: 容器可以看作是镜像运行的一个实例。可以简单地将镜像和容器的关系看作是类和实例的关系。
安装
笔者是在ubuntu16.04的环境下安装的,根据docker文档安装步骤如下
$ sudo apt-get update
$ sudo apt-get install apt-transport-https ca-certificates curl gnupg-agent software-properties-common
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
$ sudo apt-key fingerprint 0EBFCD88
$ sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
$ sudo apt-get update
$ sudo apt-get install docker-ce docker-ce-cli containerd.io
复制代码
在curl和添加仓库的步骤时,可以将其改成阿里云源,否则安装和下载镜像时会很慢
$ curl -fsSL http://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
$ sudo add-apt-repository "deb [arch=amd64] http://mirrors.aliyun.com/docker-ce/linux/ubuntu $(lsb_release -cs) stable"
复制代码
安装成功后可以运行以下命令来判断是否安装成功
$ sudo docker run hello-world
复制代码
若出现hello from docker等文字则安装成功。
了解Docker的操作
这里以实际例子来构建一个docker容器并且在服务器上跑起来
我们使用nginx的镜像作为例子,首先先下载nginx镜像
$ docker pull nginx
复制代码
下载成功后我们可以查看系统中已存在的镜像的信息
$ docker image ls
REPOSITORY TAG IMAGE ID CREATED SIZE
nginx latest 53f3fd8007f7 2 weeks ago 109MB
复制代码
这时候我们就有了一个nginx的镜像,我们使用该镜像来创建并运行一个容器,然后在浏览器查看该效果。
$ docker run -d -p 8081:80 --name mynginx nginx
复制代码
其中,-d是指让容器在后台运行,-p是进行端口映射,将服务器的8081端口映射到容器内部的80端口,创建成功后会输出一串字符串表示创建成功,我们可以通过docker ps命令查看容器是否正在运行
$ docker ps
CONTAINER ID IMAGE ... PORTS NAMES
6dd4380ba708 nginx ... 0.0.0.0:8081->80/tcp mynginx
复制代码
看到该容器信息后,我们访问服务器的8081端口,就可以看到nginx的欢迎界面了。
实战
接下来,我们用nginx镜像为基础,修改该镜像并创建一个容器来运行一个vue应用。
一、 首先我们创建一个vue应用,先不进行修改,打包成名为dist的文件夹,然后在服务器上创建一个工作目录用于测试,将打包后的文件放到工作目录中。
二、 接着我们对nginx镜像进行修改。在docker中有两种修改镜像的方式:
# 使用该命令进入容器
$ docker run -it --name mynginx nginx /bin/bash
# 然后在容器内进行修改,修改后提交该镜像,-m为说明信息,username为你的用户名
$ docker commit -m "update the nginx" [username]/nginx:v2
复制代码
这种方式虽然简单,但是不利于在团队中使用,因为团队中的人不知道你对该镜像进行了什么操作,所以我们使用第二种方案来修改镜像
- 使用Dockerfile来执行一串的命令对镜像进行修改。首先我们创建一个Dockerfile并编写
# FROM关键字:取决于基于什么镜像构建
FROM nginx
# 将打包好的文件复制到容器中的该路径下
COPY dist/ /usr/share/nginx/html/
# 将修改的文件替换掉容器中的nginx配置
COPY default.conf /etc/nginx/conf.d/default.conf
复制代码
default.conf内容如下
server {
listen 80;
server_name localhost;
#charset koi8-r;
access_log /var/log/nginx/host.access.log main;
error_log /var/log/nginx/error.log error;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
复制代码
三、 将文件都准备好后,我们构建该镜像并且创建、运行容器
# 要在Dockerfile所在路径下运行该命令,并且注意后面有个"."
$ docker build -t="[username]/mynginx" .
# 构建成功后,我们使用该镜像来运行容器
$ docker run -it -d -p 3000:80 [username]/mynginx
复制代码
四、 运行成功后,我们在浏览器输入"服务器ip地址:3000",即可看到vue项目的欢迎界面。
总结
在Docker篇中,我们知道了如何使用docker去部署一个应用。使用docker部署应用的好处在于,不论你是在windows还是在mac上编写docker,应用所处于的运行环境都是一样的,在服务器上你不需要重新部署一遍环境,减少了我们的工作量。
下一篇中,我会介绍如何通过git的webhook功能,实现提交代码后,服务器自动执行刚才我们所做的步骤。
最后,如果本文有什么错误之处,恳请指正。