前端项目部署-docker镜像部署

前端代码部署

前端代码部署的方式有很多，本文主要介绍以下几种：手动部署，docker镜像部署，gitee + docker自动部署。

上文已经实现了手动部署，本文来实现使用docker镜像部署。

什么是docker？

假如我们开发了一个Vue或者React项目，这个时候我们需要把它部署到云服务器上，我们需要在服务器上安装好合适版本的node，然后安装好项目依赖等等，但是由于操作系统的差异可能会导致安装过程中会出现各种问题。项目需要迁移部署到其它平台时，又需要重新安装配置环境。

为了模拟完全相同的本地开发环境，我们可能会想到使用虚拟机，虚拟机是一种完整的虚拟化解决方案，它在物理硬件上运行一个完整的操作系统实例。每个虚拟机都有自己的操作系统内核、系统资源和运行环境，它们相互隔离，可以在同一物理服务器上同时运行多个虚拟机。虚拟机通常需要较多的资源和启动时间，并且在运行时会产生较高的性能开销。

容器技术可以很好的解决虚拟机存在的这些问题，Docker是一种容器化技术，它通过共享主机操作系统内核，在容器内运行应用程序。容器是一种轻量级、可移植和可扩展的虚拟化解决方案。与虚拟机相比，Docker容器更加轻量级，启动速度更快，资源占用更少。每个容器包含应用程序及其所有依赖项，它们相互隔离但共享主机操作系统，因此可以在同一物理服务器上运行多个容器。

总结来说，虚拟机提供了完整的操作系统实例，而Docker容器则共享主机操作系统。虚拟机更适合运行不同的操作系统和应用程序，而Docker更适合轻量级、可移植和可扩展的应用程序部署。

两者对比图如下：

Docker 包含三个基本概念，分别是镜像（Image）、容器（Container）、仓库（repository）。

• 镜像是一种轻量级、可执行的独立软件包，用来打包软件运行环境和基于运行环境开发的软件，它包含运行某个软件所需的所有内容，包括代码、运行时、库、环境变量和配置文件。
• 容器是用镜像创建的运行实例。每个容器都可以被启动，开始，停止，删除，同时容器之间相互隔离，保证应用运行期间的安全。
• 仓库是用来存储和管理镜像的地方，类似于代码仓库。Docker官方提供了Docker Hub仓库，可以在其中存储和分享Docker镜像。用户也可以自建私有仓库来存储和管理自己的Docker镜像。

docker镜像部署

介绍完了docker的基本概念，让我们开始来使用它部署我们的页面吧~

1、安装docker

 yum install docker

后续在使用docker拉取jenkins镜像时报错missing signature key，所以又按照以下方式重新安装了一遍（Docker-CE版本更新速度较快，可以及时获得最新的和修复）：

#  卸载老版本的 docker 及其相关依赖
yum remove docker docker-common container-selinux docker-selinux docker-engine

# 更新yum
yum update -y

# 安装 yum-utils，它提供了 yum-config-manager，可用来管理yum源
yum install -y yum-utils

# 添加yum源
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

#更新索引
yum makecache fast

# 安装 docker-ce
yum install -y docker-ce

2、启动docker

systemctl start docker

3、创建配置文件 Dockerfile是一个用来构建镜像的文本文件，文本内容包含了一条条构建镜像所需的指令和说明。把镜像比喻成一个软件那么DockerFile就相当于是软件的配置文件。

在我们本地的项目根目录下创建docker的配置文件Dockerfile：

# 标明该镜像是基于 nginx:latest 镜像而构建的
FROM nginx:latest

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

# 将项目根目录下的default.conf文件复制到/etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置
COPY default.conf /etc/nginx/conf.d/default.conf

4、在我们本地的项目根目录下创建nginx的配置文件default.conf：

server {
    listen       80;
    server_name  localhost; # 修改为docker服务宿主机的ip

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

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

5、将我们的项目进行打包，把打包好的dist文件、上面创建的Dockerfile文件、default.conf文件使用Xftp等工具上传到服务器的/www/docker-demo目录下。

6、登录服务器，进入到/www/docker-demo目录，构建镜像：

# 进入目录
cd /www/docker-demo

# 构建镜像
docker build -t docker-image .

注意不要少了最后的"."，-t是给镜像命名，"docker-image"是我取的镜像名称，"."是基于当前目录的Dockerfile来构建镜像。

然后来查看下我们刚刚构建的镜像：

docker images | grep docker-image

7、启动镜像

docker run -d -p 8002:80 --name docker-container docker-image

• -d 后台方式运行
• -p 8002:80 端口映射，将宿主的8002端口映射到容器的80端口
• --name 容器名 镜像名

查看下我们的容器是否已经启动了：

docker ps

8、云服务器管理控制台配置安全组开放8002端口。配置路径可见前端项目部署-手动部署

9、访问

基于以上操作，现在我们可以访问部署好的页面了http://x.xxx.xxx.xxx:8002/你的页面路由

接下来我们来介绍gitee + docker自动部署

参考文章

1、什么是Docker？看这一篇干货文章就够了！

2、一文搞清楚 Docker 镜像、容器、仓库

3、centos安装docker显示 No package docker-ce available

4、Docker容器部署前端Vue服务------手把手教学