該配置也適用於其它 gulp、webpack 型別的專案（需要通過node.js打包成靜態檔案並部署到伺服器的）
腳手架建立vue專案（示例用）
建立一個demo專案。
vue init webpack demo01
複製程式碼寫dockerfile配置檔案
完整的dockerfile檔案
放在專案的根目錄。
Dockerfile
FROM node:8-slim
RUN apt-get update && apt-get install -y nginx
WORKDIR /usr/src/app
COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]
RUN npm install
COPY . .
RUN npm run build
RUN ln -sf /dev/stdout /var/log/nginx/access.log \
&& ln -sf /dev/stderr /var/log/nginx/error.log
EXPOSE 80
RUN cp -r dist/* /var/www/html \
&& rm -rf /user/src/app
CMD ["nginx","-g","daemon off;"]
複製程式碼dockerfile檔案配置詳解
基礎映象node,以及安裝nginx。
FROM node:8-slim
RUN apt-get update && apt-get install -y nginx
複製程式碼在映象中建立目錄/usr/src/app以及進入到該目錄中。用來臨時存放專案程式碼。
WORKDIR /usr/src/app
複製程式碼下載node依賴。
# 拷貝三個依賴相關的json檔案到 "/usr/src/app" 目錄下
COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]
# 下載依賴
RUN npm install
複製程式碼拷貝專案所有檔案到 /usr/src/app 目錄下。（這裡選擇了先下載依賴，再拷貝專案的所有檔案到映象中。）
COPY . .
複製程式碼執行打包命令
RUN npm run build
複製程式碼將nginx的日誌軟連線到了標準輸出和標準錯誤。這樣可以通過 docker logs 檢視nginx的日誌。
RUN ln -sf /dev/stdout /var/log/nginx/access.log \
&& ln -sf /dev/stderr /var/log/nginx/error.log
EXPOSE 80
複製程式碼移動打包後的檔案到 nginx的 html目錄下。並將專案原始檔移除(沒有用了，要的只是打包後的靜態檔案)。
RUN cp -r dist/* /var/www/html \
&& rm -rf /user/src/app
複製程式碼配置專案啟動命令。-g 'daemon off;'配置引數將會使nginx前臺執行，如果後臺執行，docker容器會直接退出。
CMD ["nginx","-g","daemon off;"]
複製程式碼部署
將專案移動到部署的系統中（以linux為例）,並進入到專案根目錄中。
將專案打包成docker映象。映象名稱為demo,版本號為1.0
docker build -t demo:1.0 .
複製程式碼-t <映象名稱>:<版本號>
建立容器並執行。這裡用的是nginx-proxy進行代理。直接開啟 <域名> 即可訪問。
docker run -d -p 80 -e VIRTUAL_HOST=<域名> demo:1.0
# 可以開多個容器。nginx-proxy會自動配置負載均衡
docker run -d -p 80 -e VIRTUAL_HOST=<域名> demo:1.0
複製程式碼Vue history模式處理、API代理(附加)
需要配置nginx。配置檔案可以放在專案中打到映象內，還有就是放在宿主機中對映到容器內。這裡選擇的是後者，方便運維操作。
在宿主機中新建配置示例檔案
/root/conf/demo.conf
server {
listen 80;
server_name <域名>;
# 介面代理
location /api {
# .... 省略
}
# vue `history` 模式配置
location / {
root /var/www/html;
try_files $uri $uri/ /index.html;
}
}
複製程式碼改動啟動命令
docker run -d -p 80 -e VIRTUAL_HOST=<域名> -v /root/conf:/etc/nginx/conf.d demo:1.0
複製程式碼-v <宿主機路徑>:<容器路徑>