前端自动化部署方案探索(一)：Docker篇

背景

---

在部署项目的过程当中，之前一直都是在本地部署，而后经过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的欢迎界面了。

若是访问失败的话，能够查看租用服务器的防火墙，查看8081端口是否开放

实战

接下来，咱们用nginx镜像为基础，修改该镜像并建立一个容器来运行一个vue应用。

1、 首先咱们建立一个vue应用，先不进行修改，打包成名为dist的文件夹，而后在服务器上建立一个工做目录用于测试，将打包后的文件放到工做目录中。

2、 接着咱们对nginx镜像进行修改。在docker中有两种修改镜像的方式：

# 使用该命令进入容器
$ docker run -it --name mynginx nginx /bin/bash
# 而后在容器内进行修改，修改后提交该镜像，-m为说明信息，username为你的用户名
$ docker commit -m "update the nginx" [username]/nginx:v2
复制代码

这种方式虽然简单，可是不利于在团队中使用，由于团队中的人不知道你对该镜像进行了什么操做，因此咱们使用第二种方案来修改镜像

2. 使用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;
    }
  }
复制代码

3、 将文件都准备好后，咱们构建该镜像而且建立、运行容器

# 要在Dockerfile所在路径下运行该命令，而且注意后面有个"."
$ docker build -t="[username]/mynginx" .
# 构建成功后，咱们使用该镜像来运行容器
$ docker run -it -d -p 3000:80 [username]/mynginx 
复制代码

4、 运行成功后，咱们在浏览器输入"服务器ip地址:3000"，便可看到vue项目的欢迎界面。

总结

在Docker篇中，咱们知道了如何使用docker去部署一个应用。使用docker部署应用的好处在于，不论你是在windows仍是在mac上编写docker，应用所处于的运行环境都是同样的，在服务器上你不须要从新部署一遍环境，减小了咱们的工做量。

下一篇中，我会介绍如何经过git的webhook功能，实现提交代码后，服务器自动执行刚才咱们所作的步骤。

最后，若是本文有什么错误之处，恳请指正。