Docker部署nginx+vue

安装nginx

//从远程仓库拉取镜像
docker pull ${name:version}
//安装 nginx 1.15版本的
docker pull nginx:1.15
//查看本地镜像
docker image ls

运行nginx

// -i 以交互模式运行容器，通常与 -t 同时使用
// -t 为容器重新分配一个伪输入终端，通常与 -i 同时使用
// -p 参数将一个docker主机的端口映射到容器中
// -it 参数一般连用，在docker run 启动一个容器后提供一个容器的终端，如果容器中没开启shell进程，
//      也无法对容器进行交互
docker run -it -p 8848:80 nginx:1.15

在浏览器访问http://localhost:8848/，能够显示nginx的主页：

创建容器

使用nginx:1.15镜像创建自己的容器，将vue放在nginx目录中

创建vue项目

//vue-cli 3版本创建vue项目的命令
vue create docker-vue 
//进入项目执行 
yarn build

在项目的根目录下面创建Dockerfile文件，没有后缀名

Dockerfile文件内容：

# 设置基础镜像 
FROM nginx:1.15
# 定义作者
MAINTAINER waynian @foxmial.com>
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/

执行build命令

// -t 指定了镜像名为docker-vue
// . 代表着当前目录
docker build -t docker-vue .

运行容器

//-d 后台运行容器，并返回容器ID
docker run -p 88:80 -d docker-vue

浏览器查看地址：http://localhost:88/#/