使用vue，webpack，和docker独立运行前端程序

使用docker构建前端代码主要就是写Dockerfile的过程，这个是一个通用的模板，直接使用node来构建docker镜像。

1.Dockerfile内容如下：

FROM node:9.11.2-slim //使用精简版的node作为父镜像，该镜像的父镜像是一个debian也是一个linux发行版
RUN apt-get update && apt-get install -y nginx // 安装nginx web服务器为前端提供运行环境
RUN mkdir /app // 创建一个临时工作目录
WORKDIR /app // 切换到当前工作目录
COPY . /app/ // copy当前的所有文件到临时工作目录
ENV PORT 80 // 使用80端口号访问该镜像提供的服务
RUN mkdir /var/www/html/dist \ // 在nginx web空间创建一个存放编译好好后的前端代码的目录dist
&& npm install \ // 使用npm安装前端依赖包
&& npm run build \ // 编译前端代码
&& cp -r dist/* /var/www/html/dist \ // 将编译好的文件copy到nginx对应的web目录
&& cp -r index.html /var/www/html \ // 这一步根据不同的项目是否需要把index.html文件copy到该目录
&& rm -rf /app // 移出临时目录
RUN echo "Asia/shanghai" > /etc/timezone // 设置程序运行的时区
CMD ["nginx","-g","daemon off;"] // 当使用该镜像创建的容器启动的时候运行的命令，直接启动nginx 服务。

完整的Dockerfile文档

FROM node:9.11.2-slim
RUN apt-get update  && apt-get install -y nginx
RUN mkdir /app
WORKDIR /app
COPY . /app/
ENV PORT 80
RUN mkdir /var/www/html/dist \
    && npm install \
    && npm run build \
    && cp -r dist/* /var/www/html/dist \
    && cp -r index.html /var/www/html \
    && rm -rf /app
RUN echo "Asia/shanghai" > /etc/timezone
CMD ["nginx","-g","daemon off;"]

2.使用第一步的Dockerfile构建docker镜像

docker -t XXXX . // XXXX表示编译出来镜像的名字 这个“.”代表Dockerfile在当前目录下，如果没有在需指定Dockerfile的位置

$ docker  -t  XXXX .

3.经过上面的步骤基本上就可以完成docker镜像的制作

$ docker images  // 列出本机上所有的docker镜像

4.使用下面命令可以创建容器

$ docker run -d -p 8080:80  imagename // -d 表示使用后台进程方式运行容器 -p 讲容器端口80映射到宿主机8080端口