前端容器启动前端自动化部署 docker

转载

技术极客领袖 2024-03-24 20:19:00

文章标签 前端容器启动运维前端操作系统 ViewUI 文章分类 云原生云计算

背景

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

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

使用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项目的欢迎界面。