docker部署前端-CFANZ编程社区

简单概念

docker

Docker是一个虚拟环境容器，可以将你的开发环境、代码、配置文件等一并打包到这个容器中，并发布和应用到任意平台中。比如，你在本地用Python开发网站后台，开发测试完成后，就可以将Python3及其依赖包、Flask及其各种插件、Mysql、Nginx等打包到一个容器中，然后部署到任意你想部署到的环境。

镜像

Docker 镜像是一个特殊的文件系统，除了提供容器运行时所需的程序、库、资源、配置等文件外，还包含了一些为运行时准备的一些配置参数（如匿名卷、环境变量、用户等）。镜像不包含任何动态数据，其内容在构建之后也不会被改变。

容器

镜像（Image）和容器（Container）的关系，就像是面向对象程序设计中的类和实例一样，镜像是静态的定义，容器是镜像运行时的实体。容器可以被创建、启动、停止、删除、暂停等。

仓库

镜像构建完成后，可以很容易的在当前宿主机上运行，但是，如果需要在其它服务器上使用这个镜像，我们就需要一个集中的存储、分发镜像的服务，Docker Registry 就是这样的服务。

Dockerfile

Dockerfile 是一个文本文件，其内包含了一条条的指令(Instruction)，每一条指令构建一层，因此每一条指令的内容，就是描述该层应当如何构建。 Dockerfile 中每一个指令都会建立一层，RUN 也不例外。

部署vue项目

1. 新建default.conf文件,这个是nginx的配置文件

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;
        try_files $uri $uri/ /index.html;
    }
    #需要根据后端service定义
    location /dev-api {
        proxy_pass   http://miniadmin;
    }

    location /prod-api {
        proxy_pass   http://miniadmin;
    }

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

2.新建Dockerfile文件

# 声明镜像基础
FROM nginx
# 声明维护者
LABEL author=xxx
# 声明版本
LABEL version="1.0.0"
# 删除nginx初始配置文件
RUN rm /etc/nginx/conf.d/default.conf
# 添加配置文件
ADD default.conf /etc/nginx/conf.d/
# 复制打包后的文件到html目录下
COPY dist/ /usr/share/nginx/html/

3.打包vue项目

vue-cli-service build --mode production

4.构建镜像

docker build [选项] <上下文路径/URL/->

docker build -t [镜像名] .

5.查看是否构建成功

docker images

运行docker images查看是否有刚刚生成的镜像

6.运行镜像

docker run --name [容器名] -p [物理机端口]:[容器端口] -d [镜像名]

docker run --name [容器名] -p 4399:80 -d [镜像名]

--name 给容器起名

-p 将物理机端口映射到容器端口

-d 后台运行

7.查看启动是否成功

1.运行docker ps ,查看vue-docker是否在运行

docker ps

2.浏览器访问localhost:4399查看项目运行是否正常