本文學習自:https://juejin.im/post/5bee5ddde51d457b8a33938c
項目環境是在ubuntu下,記得要在root目錄下,不然安裝vue會報錯
npm install -g vue-cli
vue init webpack demo01
cd demo01
npm run dev

dockerfile文件配置詳解
基礎鏡像node,以及安裝nginx。
FROM node:8-slim
RUN apt-get update && apt-get install -y nginx
在鏡像中創建目錄/usr/src/app以及進入到該目錄中。用來臨時存放項目代碼。
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
