Docker+前端

Erbaoing
100 阅读5分钟

本文将我们将一起完成 前端Docker 的入门项目！

1. 认识 Docker

2. 安装 Docker

3. 快速开始

1.认识 Docker

为了更好的理解 Docker 是什么，我们先来讲个故事：

农夫想建造一个房子来看护自己的羊群，于是运来木头、水泥、沙子。一顿操作，终于把这个房子盖好了。但是住了没多久，发现附近很多狼群，偷吃自己的羊。于是他想到了搬家，但是搬家的话，又要往新的地方运木头、水泥、沙子，农夫很是惆怅，这时哆啦A梦路过了这里，告诉农夫，它的百宝口袋里有一个宝贝，可以把盖好的房子复制一份，做成「镜像」，放在背包里，等到了新的农场，就用这个「镜像」，复制一套房子，快就可以拎包入住了。

在这个故事中，房子就代表我们的项目本身，镜像就是项目的复制，背包就是镜像仓库。

Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口。

Docker 本身并不是容器，它是创建容器的工具，是应用容器引擎；

Docker 技术的三大核心概念，分别是：镜像 Image、容器 Container、仓库 Repository。

Docker 技术使用 Linux 内核和内核功能（例如 Cgroups 和 namespaces）来分隔进程，以便各进程相互独立运行。

2.安装 Docker

1.下载 www.docker.com/get-started image.png 2.默认配置一直下一步

3.完成安装 image.png

4.安装之后在cmd 查看版本 docker -v

5.配置镜像加速

image.png


{
  "registry-mirrors": [
    "http://hub-mirror.c.163.com/",
    "https://registry.docker-cn.com"
  ],
  "insecure-registries":[],
  "experimental": false,
  "debug": true
}
可能会遇到 Linux 的问题 (没出现请忽略)

docs.microsoft.com/zh-cn/windo…

1 - 启用适用于 Linux 的 Windows 子系统

需要先启用“适用于 Linux 的 Windows 子系统”可选功能，然后才能在 Windows 上安装 Linux 分发。

以管理员身份打开 PowerShell（“开始”菜单 >“PowerShell” >单击右键 >“以管理员身份运行”），然后输入以下命令：

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

2 - 启用虚拟机功能 以管理员身份打开 PowerShell 并运行：

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

3 - 下载 Linux 内核更新包

下载最新包：

4 - 重启电脑

准备工作完成，下面开始实际操作

3. 快速开始

本项目使用，下一篇文章 前端vue项目搭建指引 中的vue_demo_01作为操作对象。\

1.启动项目 访问地址：http://localhost:8080/。项目就绪;
2.打包项目 打包后项目目录下的 Dist 就是我们要部署的静态资源了，我们继续下一步
3.新建 Dockerfile (后面会说作用)

image.png

FROM nginx  
# 指定该镜像是基于 nginx:latest 镜像而构建的；
COPY dist/ /usr/share/nginx/html/  
# 将项目根目录下 dist 文件夹中的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下；
COPY default.conf /etc/nginx/conf.d/default.conf  
# 将 default.conf 复制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置。

4.准备 Nginx 镜像 运行你的 Docker 桌面端，就会默认启动实例，我们在控制台拉取 Nginx 镜像：

docker pull nginx

控制台会出现如下信息： image.png

如果你出现这样的异常，请确认 Docker 实例是否正常运行。

Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?

镜像准备完成，我们在根目录创建 Nginx 配置文件：

image.png

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   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

配置镜像

打开 Dockerfile ，写入如下内容：

FROM nginx  
# 指定该镜像是基于 nginx:latest 镜像而构建的；
COPY dist/ /usr/share/nginx/html/  
# 将项目根目录下 dist 文件夹中的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下；
COPY default.conf /etc/nginx/conf.d/default.conf  
# 将 default.conf 复制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置。

构建镜像
Docker 通过 build 命令来构建镜像：

docker build -t jartto-docker-demo .
  • -t 参数给镜像命名 jartto-docker-demo
  • . 是基于当前目录的 Dockerfile 来构建镜像

执行成功后，将会输出：

image.png

镜像制作成功！我们来查看一下容器：

docker image ls

可以看到，我们打出了一个 146MB 的项目镜像:

image.png

运行容器

docker run -d -p 3000:80 --name docker-demo jartto-docker-demo
  • -d 设置容器在后台运行
  • -p 表示端口映射，把本机的 3000 端口映射到 container 的 80 端口（这样外网就能通过本机的 3000 端口访问了。
  • --name 设置容器名 docker-demo
  • jartto-docker-demo 是我们上面构建的镜像名字

补充一点：
在控制台，我们可以通过 docker ps 查看刚运行的 Container 的 ID：

docker ps -a

控制台会输出：

image.png

如果你使用桌面端，那么打开 Docker Dashboard 就可以看到容器列表了，如下图：

image.png

镜像：

image.png

因为我们映射了本机 3000 端口，打开浏览器，访问：localhost:3000

发布镜像 发布镜像需要如下步骤：

  • 登陆 [dockerhub](https://hub.docker.com)，注册账号；
  • 命令行执行 docker login，之后输入我们的账号密码，进行登录；
  • 推送镜像之前，需要打一个 Tag，执行 docker tag <image> <username>/<repository>:<tag>

到这里，已经完成了 Docker 的入门项目！

avatar
文章
阅读
粉丝