Docker部署前端vue项目

前端项目使用的是vue+node，部署在centos7.4

打包vue项目

• 通过打包命令打包项目

npm run build

• 生成如下目录，dist就是我们需要的目录。

•  把dist和Dockerfile放入centos的同一个目录下面

• Dockerfile如下，第二行的意思就是将dist文件夹下面的内容拷贝到/usr/share/nginx/html/这个目录下（此目录为通过docker运行nginx后容器的目录结构 ，可以通过命令 docker exec  -it  容器名称  /bin/bash 查看）。

FROM nginx:1.10
COPY dist/ /usr/share/nginx/html/

• 构建镜像（其中的xxx为镜像的名称，你可以修改）

docker build -t xxx .

• 执行镜像(其中xx为容器的名称)

    docker run --name xx  -p 80:80 -d xxx