4.3 创建 Dockerfile 文件
FROM nginx COPY dist/ /usr/share/nginx/html/ COPY nginx/default.conf /etc/nginx/conf.d/default.conf
- 自定义构建镜像的时候基于Dockerfile来构建。
FROM nginx命令的意思该镜像是基于 nginx:latest 镜像而构建的。
COPY dist/ /usr/share/nginx/html/命令的意思是将项目根目录下dist文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下。
COPY nginx/default.conf /etc/nginx/conf.d/default.conf命令的意思是将nginx目录下的default.conf 复制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换nginx镜像里的默认配置。
4.4 基于该Dockerfile构建vue应用镜像
运行命令（注意不要少了最后的 “.” ）
docker build -t vuenginxcontainer .
-t是给镜像命名.是基于当前目录的Dockerfile来构建镜像
查看本地镜像，运行命令
docker image ls | grep vuenginxcontainer
到此时我们的 vue 应用镜像 vuenginxcontainer 已经成功创建。接下来，我们基于该镜像启动一个docker容器。
4.5 启动 vue app 容器
Docker 容器Container： 镜像运行时的实体。镜像（Image）和容器（Container）的关系，就像是面向对象程序设计中的类和实例一样，镜像是静态的定义，容器是镜像运行时的实体。容器可以被创建、启动、停止、删除、暂停等 。
基于 vuenginxcontainer 镜像启动容器，运行命令：
docker run \ -p 3000:80 \ -d --name vueApp \ vuenginxcontainer
docker run基于镜像启动一个容器
-p 3000:80端口映射，将宿主的3000端口映射到容器的80端口
-d后台方式运行
--name容器名 查看 docker 进程
docker ps
可以发现名为 vueApp的容器已经运行起来。此时访问 http://localhost:3000 应该就能访问到该vue应用:
目前为止，已经通过docker容器部署了一个静态资源服务，可以访问到静态资源文件。还有 /api/json这个接口数据没有，接下来我们来解决一下这个问题。
5 接口服务
再部署一个 node 的容器来提供接口服务
5.1 express 服务
用 node web 框架 express 来写一个服务，注册一个返回json数据格式的路由 server.js:
'use strict'; const express = require('express'); const PORT = 8080; const HOST = '0.0.0.0'; const app = express(); app.get('/', (req, res) => { res.send('Hello world\n'); }); app.get('/json', (req, res) => { res.json({ code: 0, data :'This is message from node container' }) }); app.listen(PORT, HOST); console.log(`Running on http://${HOST}:${PORT}`);
运行该 express 应用需要 node 环境，我们基于 node 镜像来构建一个新镜像
5.2 获取 node 镜像
docker pull node
5.3 编写 Dockerfile 将 express 应用 docker 化
FROM node WORKDIR /usr/src/app COPY package*.json ./ RUN npm install COPY . . EXPOSE 8080 CMD [ "npm", "start" ]
构建镜像的时候 node_modules 的依赖直接通过 RUN npm install 来安装，项目中创建一个 .dockerignore文件来忽略一些直接跳过的文件：
node_modules npm-debug.log
5.4 构建 nodewebserver 镜像
运行构建命令：
docker build -t nodewebserver .
