基于ubuntu部署前端项目到docker容器

背景

由于不同的机器有不同的操作系统、库和组件等，在将一个应用部署到多台机器上时需要进行大量的环境配置操作。 Docker 主要用来解决环境配置问题，它是一种虚拟化技术，对进程进行隔离，被隔离的进程独立于宿主操作系统和其它隔离的进程。使用 Docker 可以不修改应用程序代码，不需要开发人员学习特定环境下的技术，就能够将现有的应用程序部署在其它机器上。本文将以一个前端项目作为示例来展开docker容器化部署流程。

1. docker与虚拟机

Docker 作为一种虚拟化技术，对进程进行隔离，被隔离的进程独立于宿主操作系统和其它被隔离的进程。其实在容器化技术出来之前虚拟机的运用是非常普遍的。虚拟机也是一种虚拟化技术，它与 Docker 最大的区别在于它是通过模拟硬件，并在硬件上安装操作系统来实现。和虚拟机相比docker具有如下特点：

• 启动速度 —— 启动虚拟机需要先启动虚拟机的操作系统，再启动应用，这个过程非常慢；而启动 Docker 相当于启动宿主操作系统上的一个进程而已。
• 占用资源 —— 虚拟机是一个完整的操作系统，需要占用大量的磁盘、内存和 CPU 资源，一台机器只能开启几十个的虚拟机；Docker 只是一个进程，只需要将应用以及相关的组件打包，在运行时占用很少的资源，一台机器可以开启成千上万个 Docker。

除了以上的几方面的优势之外，docker 还具备以下几个特点：

1. 易迁移：提供一致性的运行环境。已经打包好的应用可以在不同的机器上进行迁移，而不用担心环境变化导致无法运行。
2. 易维护：使用分层技术和镜像，使得应用可以更容易复用重复的部分。复用程度越高，维护工作也越容易。
3. 易扩展：可以使用基础镜像进一步扩展得到新的镜像，并且官方和开源社区提供了大量的镜像，通过扩展这些镜像可以非常容易得到我们想要的镜像。

2. docker安装和启动

以自己的云服务器来展开安装和使用，当前服务为ubuntu系统。所以接下来的操作都是基于Ubuntu 系统的，但是Linux 和Ubuntu 系统区别不大，命令什么的大多也通用。

2.1 docker安装

• 1 由于apt官方库里的docker版本可能比较旧，所以先卸载可能存在的旧版本

sudo apt-get remove docker docker-engine docker-ce docker.io

• 2 更新ubuntu 的apt 源索引

sudo apt-get update

• 3 设置 apt可以通过Https 使用存储库（repository）

sudo apt-get install -y apt-transport-https ca-certificates curl software-properties-common

• 4 添加Docker 官方GPG 密钥

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

• 5 设置Stable存储库，即docker 稳定仓库4

sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

• 6 再次更新apt 包索引并安装最新的Docker CE 版本

sudo apt-get update
sudo apt-get install -y docker-ce

• 7 查看是否安装成功

docker version

2.2 docker使用和配置

1. 设置docker 开机启动

// 配置让docker服务岁系统自动启动
systemctl enable docker.service

// 启动docker守护进程
systemctl start docker.service

// 取消开机自动启动
systemctl disable docker.service

// 停止docker服务
systemctl stop docker.service

// 查看nginx服务的状态
systemctl status docker.service

// 重启docker服务
systemctl restart docker.service

2. 修改docker 的镜像源：增加Docker的镜像源配置文件 /etc/docker/daemon.json，如果没有配置过镜像该文件默认是不存的，需要 /etc/docker 目录下新建一个 daemon.json文件，并在其中增加如下内容：

"registry-mirrors" : [
  "https://registry.docker-cn.com",
  "https://docker.mirrors.ustc.edu.cn",
  "http://hub-mirror.c.163.com",
  "https://cr.console.aliyun.com"
]

3. 修改好镜像源配置文件，然后重启Docker服务：service docker restart, 然后通过以下命令查看配置是否生效：docker info|grep Mirrors -A 1

2.3 docker相关基础命令

docker 的几个重要概念理解：

• Repository: 仓库就是是集中存放镜像文件的场所，有点类似于github。
• Image：镜像，用来创建容器的基础。
• Container: 容器，是一个可运行的镜像实例。
• Dockerfile: 镜像构建的模板，描述镜像构建的步骤。

更简单，更具体的理解一下docker：

• Docker可以帮助我们来构建和部署容器，我们只需要将自己的应用程序或者服务打包放进容器即可。
• 容器是基于镜像启动起来的，容器中可以运行一个或多个进程。
• 可以理解成镜像是 Docker 生命周期中的构建或者打包阶段，而容器则是启动或者执行阶段。
• 容器基于镜像启动，一旦容器启动完成后，我们就可以登录到容器中安装自己需要的软件或者服务。

1. 容器和镜像相关的执行命令：

// 查看当前所有的容器（-a 会列出停止运行的容器）
docker ps -a

//查看下载的镜像
docker images

// docker中拉去nginx镜像
docker pull nginx

// 列出本地镜像中 REPOSITORY 为nginx 的镜像列表
docker images nginx

// 使用镜像列表中REPOSITORY为的 runoob/ubuntu 并且TAG为v2的本地镜像来启动一个容器并进入（-i表示持久的标准输入; -t表示创建一个终端）
docker run -t -i runoob/ubuntu:v2 /bin/bash

// 使用镜像列表中 IMAGE 为 c1d5422401f3 的本地镜像来启动一个容器，并且容器在后台运行（-d 表示不进入容器，让容器后台运行）
docker run -d -i -t c1d5422401f3 /bin/bash

// 启动/重启/停止容器
docker start <容器 ID>
docker restart <容器 ID>
docker stop <容器 ID>

// 进入容器
docker attach <容器 ID>  // 进入容器正在执行某个命令的终端，不能在里面操作；退出时终止容器
docker exec -it  <容器 ID> /bin/bash // 进入当前容器后开启一个新的终端，可以在里面操作;退出时不会终止容器

// 以宿主机上的某个容器来构建一个镜像（-m:提交的描述信息；-a:镜像作者；e218edb10161:容器 ID；newUbuntu:v2 是镜像名和TAG）
docker commit -m="create new image" -a="llz" e218edb10161 newubuntu:v2

// 通过宿主机的端口号绑定容器内的端口，实现本地宿主机的访问容器
docker run -it -d -p 127.0.0.1:5000:80 <镜像 ID> /bin/bash  // -p 标识指定容器端口80 绑定到主机端口 5000;-d 表示后台启动

// 通过宿主机的端口号绑定容器内的端口，外网通过访问宿主机可以访问到容器（127.0.0.0 换成 0.0.0.0即可）
docker run -it -d -p 0.0.0.0:5000:80 <镜像 ID> /bin/bash  // -p 标识指定容器端口80 绑定到主机端口 5000;-d 表示后台启动

3. docker部署前端项目

3.1 将前端项目本地打包到dist目录

前端所有的dist包都是通过index.html 来访问，因此此处为了简单，直接写一个简单的index.html 当作前端所有页面资源。

3.2 在本地创建一个Dockerfile文件

FROM nginx:latest

# 将项目根目录下dist文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下
COPY dist/ /usr/share/nginx/html/ COPY default.conf /etc/nginx/conf.d/default.conf

3.3 新建一个default.conf（nginx配置文件）

server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html index.htm;
    
    location / {
      try_files $uri $uri/ = 404;
    }
}

3.4 将打包后的文件dist文件夹和Dockerfile以及default.conf上传到linux服务器到指定的目录

3.5 开始通过Dockerfile创建镜像(admin指的是镜像的名字)

执行如下命令，会通过Dockerfile 的执行命令来创建镜像，镜像名为 admin。

docker build -t admin .

3.6 查看本地镜像

3.7 通过上面的镜像创建一个新的容器并运行

docker run -it -d -p 0.0.0.0:5004:80 ec227225fb64 /bin/bash

3.8 宿主机上curl 验证是否可以访问容器index.html,并且可以通过浏览器外网访问

curl http://120.79.203.154:5004