本文參考：https://juejin.im/post/5cce4b1cf265da0373719819
http://www.lxweimin.com/p/422b61100273

安裝Docker

Windows Docker 安裝

安裝nginx鏡像

docker pull nginx:latest

查看鏡像

docker images

部署項(xiàng)目

在根目錄創(chuàng)建 Nginx Config配置文件
在項(xiàng)目根目錄下創(chuàng)建 nginx 文件夾，該文件夾下新建文件 default.conf：

server {
listen       80;
server_name  localhost;

#charset koi8-r;
access_log  /var/log/nginx/host.access.log  main;
error_log  /var/log/nginx/error.log  error;

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
}

#error_page  404              /404.html;

# redirect server error pages to the static page /50x.html
#
error_page   500 502 503 504  /50x.html;
location = /50x.html {
    root   /usr/share/nginx/html;
}
} 

該配置文件定義了首頁(yè)的指向?yàn)?/usr/share/nginx/html/index.html，所以我們可以一會(huì)把構(gòu)建出來(lái)的 index.html 文件和相關(guān)的靜態(tài)資源放到 /usr/share/nginx/html 目錄下。
在根目錄創(chuàng)建 Dockerfile 文件

FROM nginx
COPY dist/ /usr/share/nginx/html/ // 注意：一定要run build先創(chuàng)建dist文件夾
COPY nginx/default.conf /etc/nginx/conf.d/default.conf // 注意：文件夾名字一定要和創(chuàng)建的保持一致
                                                       //否則后面創(chuàng)建鏡像會(huì)出錯(cuò)

image.png

自定義構(gòu)建鏡像的時(shí)候基于 Dockerfile 來(lái)構(gòu)建。

1. FROM nginx 命令的意思該鏡像是基于 nginx:latest 鏡像而構(gòu)建的。
2. COPY dist/ /usr/share/nginx/html/ 命令的意思是將項(xiàng)目根目錄下 dist 文件夾下的所有文件復(fù)制到鏡像中 /usr/share/nginx/html/ 目錄下。
3. COPY nginx/default.conf /etc/nginx/conf.d/default.conf 命令的意思是將 Nginx 目錄下的 default.conf 復(fù)制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置來(lái)替換 Nginx 鏡像里的默認(rèn)配置。

基于該 Dockerfile 構(gòu)建鏡像
運(yùn)行命令（注意不要少了最后的 “.” ）：

docker build -t docker-whale(鏡像名) .

-t 是給鏡像命名，. 是基于當(dāng)前目錄的 Dockerfile 來(lái)構(gòu)建鏡像。

image.png

docker images查看鏡像，這時(shí)我們的docker-whale鏡像就已經(jīng)創(chuàng)建成功了。

image.png

啟動(dòng)容器

docker run -d -p 3000:80 --name ts_vue docker_whale

docker run 基于鏡像啟動(dòng)一個(gè)容器
-d 后臺(tái)方式運(yùn)行
-p 3000:80 端口映射，將宿主的3000端口映射到容器的80端口
--name 容器名，查看 Docker 進(jìn)程
查看創(chuàng)建的容器

docker ps

image.png

訪問(wèn)
此時(shí)訪問(wèn) http://localhost:3000 就能訪問(wèn)到該 Vue 應(yīng)用。