前端自动化部署方案探索

在部署项目的过程中，以前一直都是在本地部署，然后通过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
复制代码

这种方式虽然简单，但是不利于在团队中使用，因为团队中的人不知道你对该镜像进行了什么操作，所以我们使用第二种方案来修改镜像

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;
    }
  }
复制代码

三、 将文件都准备好后，我们构建该镜像并且创建、运行容器

# 要在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功能，实现提交代码后，服务器自动执行刚才我们所做的步骤。

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