本文参考：https://juejin.im/post/5cce4b1cf265da0373719819
https://www.jianshu.com/p/422b61100273
安装Docker
安装nginx镜像
docker pull nginx:latest
查看镜像
docker images
部署项目
在根目录创建 Nginx Config配置文件
在项目根目录下创建 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，所以我们可以一会把构建出来的 index.html 文件和相关的静态资源放到 /usr/share/nginx/html 目录下。
在根目录创建 Dockerfile 文件
FROM nginx
COPY dist/ /usr/share/nginx/html/ // 注意：一定要run build先创建dist文件夹
COPY nginx/default.conf /etc/nginx/conf.d/default.conf // 注意：文件夹名字一定要和创建的保持一致
//否则后面创建镜像会出错
image.png
自定义构建镜像的时候基于 Dockerfile 来构建。
- FROM nginx 命令的意思该镜像是基于 nginx:latest 镜像而构建的。
- COPY dist/ /usr/share/nginx/html/ 命令的意思是将项目根目录下 dist 文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下。
- COPY nginx/default.conf /etc/nginx/conf.d/default.conf 命令的意思是将 Nginx 目录下的 default.conf 复制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置。
基于该 Dockerfile 构建镜像
运行命令（注意不要少了最后的 “.” ）：
docker build -t docker-whale(镜像名) .
-t 是给镜像命名，. 是基于当前目录的 Dockerfile 来构建镜像。
image.png
docker images查看镜像，这时我们的docker-whale镜像就已经创建成功了。
image.png
启动容器
docker run -d -p 3000:80 --name ts_vue docker_whale
docker run 基于镜像启动一个容器
-d 后台方式运行
-p 3000:80 端口映射，将宿主的3000端口映射到容器的80端口
--name 容器名，查看 Docker 进程
查看创建的容器
docker ps
image.png
访问
此时访问 http://localhost:3000 就能访问到该 Vue 应用。
