本文參考：https://juejin.im/post/5cce4b1cf265da0373719819
http://www.reibang.com/p/422b61100273
安裝Docker
安裝nginx鏡像
docker pull nginx:latest
查看鏡像
docker images
部署項目
在根目錄創(chuàng)建 Nginx Config配置文件
在項目根目錄下創(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;
}
}
該配置文件定義了首頁的指向為 /usr/share/nginx/html/index.html伙菜，所以我們可以一會把構(gòu)建出來的 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)建鏡像會出錯
image.png
自定義構(gòu)建鏡像的時候基于 Dockerfile 來構(gòu)建胁黑。
- FROM nginx 命令的意思該鏡像是基于 nginx:latest 鏡像而構(gòu)建的。
- COPY dist/ /usr/share/nginx/html/ 命令的意思是將項目根目錄下 dist 文件夾下的所有文件復(fù)制到鏡像中 /usr/share/nginx/html/ 目錄下僵缺。
- COPY nginx/default.conf /etc/nginx/conf.d/default.conf 命令的意思是將 Nginx 目錄下的 default.conf 復(fù)制到 etc/nginx/conf.d/default.conf虏等，用本地的 default.conf 配置來替換 Nginx 鏡像里的默認(rèn)配置乍桂。
基于該 Dockerfile 構(gòu)建鏡像
運(yùn)行命令（注意不要少了最后的 “.” ）：
docker build -t docker-whale(鏡像名) .
-t 是給鏡像命名，. 是基于當(dāng)前目錄的 Dockerfile 來構(gòu)建鏡像怜俐。
image.png
docker images查看鏡像身堡，這時我們的docker-whale鏡像就已經(jīng)創(chuàng)建成功了。
image.png
啟動容器
docker run -d -p 3000:80 --name ts_vue docker_whale
docker run 基于鏡像啟動一個容器
-d 后臺方式運(yùn)行
-p 3000:80 端口映射拍鲤，將宿主的3000端口映射到容器的80端口
--name 容器名贴谎，查看 Docker 進(jìn)程
查看創(chuàng)建的容器
docker ps
image.png
訪問
此時訪問 http://localhost:3000 就能訪問到該 Vue 應(yīng)用。
