鸽子终于回来啦，都一个月没发博客了。今天还不水一篇的话就说不过去了。

这篇博客只是作为一篇入门博客，记录一下我从不会使用 Docker 到会导出一个 Docker image 给别人使用的使用过程记录。

按照惯例，先了解一下 Docker 是什么。

Developing apps today requires so much more than writing code. Multiple languages, frameworks, architectures, and discontinuous interfaces between tools for each lifecycle stage creates enormous complexity. Docker simplifies and accelerates your workflow, while giving developers the freedom to innovate with their choice of tools, application stacks, and deployment environments for each project.

上面的介绍来自 Docker 官网，简单一点来说就是现在开发一个程序（此处大部分指后端）需要各种环境而且又一大堆的框架，每个框架的配置和运行环境又不同，有复杂也有简单的。配置环境是很折腾，而且很可能会出现在本地能跑放到线上环境就出现一大堆问题的情况。然而 Docker 就是为了解决这一问题而生的。

不知道小伙伴们之前有没用过那种集成开发环境？是不是觉得装一个软件就能直接开发很爽？相比还要配置各种环境变量，还有可能出现一些问题来说直接安装就能用，小白都能上手简直不要太爽好吧、

Docker 就是把你的程序 + 一个小型的 Linux 系统环境 + 程序运行环境打包成一个镜像（可以理解为软件）。服务器上的话就直接用 Docker 导入这个镜像直接运行就可以了。它内部的全部环境都不会改变，从而解决掉部署服务器与本地运行环境导致的差异问题。当然 Docker 远不止这些优势，比如说还有可以轻便灵活地隔离环境，进行扩容，运维管理等等等…

好了，现在对 Docker 也算是有一个印象了。接下来就是下载安装了，这边我直接在官网下载的 Desktop 桌面版，可以去 GitHub 或者 Docker 下载相应的版本就好了。

官网: https://www.docker.com/get-started

GitHub: https://github.com/docker/docker-install

安装好 Docker Desktop 之后打开运行这时候就会开启一个 Docker serve 我们才能愉快的使用 docker 相关的命令。

首先看看我们部署一个前端项目需要干些什么？

  1. npm install, 安装依赖
  2. npm run build，编译，打包，生成静态资源
  3. 启动一个 server 服务供用户访问

我们知道前端的这个部署流程那就简单了使用 Docker 也不过就是把这些配置让 Docker 去自动执行这些步骤就好了。

下面操作的话我选择的是一个 React 的项目，其他项目基本差不多，只是编译命令和输出文件夹路径可能有些差异。

在项目根目录创建一个 Dockerfile 文件，写入以下配置

FROM node:alpine as builder

# ENV PROJECT_ENV production
ENV NODE_ENV production
WORKDIR /data/www/hxf_web
ADD . /data/www/hxf_web
RUN npm install && npm run build 

# 测试编译
RUN npm install && npm run build && npm install -g http-server
EXPOSE 80
CMD http-server ./build -p 80

创建好 Dockerfile 文件之后我们还需要创建一个 docker-compose.yaml 写入以下配置

version: "3"
services:
  web:
    build: .
    expose:
      - 80
    ports:
      - "80:80"

两个文件创建好之后，使用 docker-compose 命令就可以编译 docker image 文件了，在终端运行

docker-compose build

如果出现以下报错的话就是没有打开 docker server （我这边安装的是桌面版，直接打开安装好的 docker 软件就好了）

docker.errors.DockerException: Error while fetching server API version: ('Connection aborted.', FileNotFoundError(2, 'No such file or directory'))

使用 Docker 部署一个 React or Vue 前端项目-天真的小窝

这样的话就等于编译成功了。

执行 docker images 命令就能看到编译好的 image

使用 Docker 部署一个 React or Vue 前端项目-天真的小窝

执行 docker run hxf_www_web_web 就能够将 docker image 运行起来

使用 Docker 部署一个 React or Vue 前端项目-天真的小窝

到这里一个前端项目基本就跑起来了。

现在来总结一下，我们创建了两个文件，dockerfile 是容器里运行的各种指令，docker-compose.yaml 是用于定义和运行多容器 Docker 应用程序的配置。

首先看看我们配置的 dockerfile 文件

FROM node:alpine as builder     # 表示使用 node:alpine 环境的容器，因为编译我们需要用到 npm

# ENV PROJECT_ENV production
ENV NODE_ENV production         # 这里设置 NODE_ENV 环境变量
WORKDIR /data/www/hxf_web       # 指定工作目录为 /data/www/hxf_web 这个路径是容器内的
ADD . /data/www/hxf_web         # 将当前目录下的文件添加到容器内的 /data/www/hxf_web 路径下

RUN npm install && npm run build && npm install -g http-server
# 执行命令 npm install && npm run build 安装依赖并且编译，npm install -g http-server 是通过 http-server 来提供一个简单的 http 服务

EXPOSE 80                       # 暴露容器的 80 端口，为了能够通过 80 端口访问到网页
CMD http-server ./build -p 80   # 运行 http-server 在 ./build 文件夹下，将服务部署到 80 端口

接着就是把我们的 image 导出，别人下载这个 image 文件就能在自己电脑的 Docker 上跑起来。

首先通过 docker images 得到 image 的 ID，再使用 docker save id > hxf_web.tar 将文件导出

使用 Docker 部署一个 React or Vue 前端项目-天真的小窝

通过 docker import 就能够将别人发布的 tar 文件导入了。

docker import - hxf_web_demo < hxf_web.tar

基本的 Docker 使用就先写到这里，后续还有优化我们前端 docker image 文件的大小，在 docker 中怎么使用代理加速 npm install 相关的博客。