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

5,157 阅读4分钟

背景


在部署项目的过程中,以前一直都是在本地部署,然后通过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应用。

一、 首先我们创建一个vue应用,先不进行修改,打包成名为dist的文件夹,然后在服务器上创建一个工作目录用于测试,将打包后的文件放到工作目录中。

二、 接着我们对nginx镜像进行修改。在docker中有两种修改镜像的方式:

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

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

  1. 使用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功能,实现提交代码后,服务器自动执行刚才我们所做的步骤。

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