使用docker構(gòu)建前端代碼主要就是寫Dockerfile的過程萎战，這個是一個通用的模板媳否，直接使用node來構(gòu)建docker鏡像特恬。
1.Dockerfile內(nèi)容如下：
FROM node:9.11.2-slim //使用精簡版的node作為父鏡像执俩，該鏡像的父鏡像是一個debian也是一個linux發(fā)行版
RUN apt-get update && apt-get install -y nginx // 安裝nginx web服務(wù)器為前端提供運行環(huán)境
RUN mkdir /app // 創(chuàng)建一個臨時工作目錄
WORKDIR /app // 切換到當(dāng)前工作目錄
COPY . /app/ // copy當(dāng)前的所有文件到臨時工作目錄
ENV PORT 80 // 使用80端口號訪問該鏡像提供的服務(wù)
RUN mkdir /var/www/html/dist \ // 在nginx web空間創(chuàng)建一個存放編譯好好后的前端代碼的目錄dist
&& npm install \ // 使用npm安裝前端依賴包
&& npm run build \ // 編譯前端代碼
&& cp -r dist/* /var/www/html/dist \ // 將編譯好的文件copy到nginx對應(yīng)的web目錄
&& cp -r index.html /var/www/html \ // 這一步根據(jù)不同的項目是否需要把index.html文件copy到該目錄
&& rm -rf /app // 移出臨時目錄
RUN echo "Asia/shanghai" > /etc/timezone // 設(shè)置程序運行的時區(qū)
CMD ["nginx","-g","daemon off;"] // 當(dāng)使用該鏡像創(chuàng)建的容器啟動的時候運行的命令，直接啟動nginx 服務(wù)癌刽。
完整的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構(gòu)建docker鏡像
docker -t XXXX . // XXXX表示編譯出來鏡像的名字 這個“.”代表Dockerfile在當(dāng)前目錄下役首，如果沒有在需指定Dockerfile的位置
$ docker -t XXXX .
3.經(jīng)過上面的步驟基本上就可以完成docker鏡像的制作
$ docker images // 列出本機上所有的docker鏡像
4.使用下面命令可以創(chuàng)建容器
$ docker run -d -p 8080:80 imagename // -d 表示使用后臺進(jìn)程方式運行容器 -p 講容器端口80映射到宿主機8080端口
