1.获取nginx镜像

docker pull nginx

 

 2.打包vue项目

项目根目录下cmd并输入

npm run build

打包后生成dist文件

Docker部署vue+nginx项目

 3.上传linux服务

将生成的dist文件上传至linux服务器。本例中保存在/usr/web-expert中，

Docker部署vue+nginx项目

 

4.添加Dockerfile文件

在web-expert文件夹内，和dist文件同一级

Docker部署vue+nginx项目

 5.Dockerfile内容

FROM nginx　　//设置基础镜像，也就是docker images中的nginx镜像名
MAINTAINER xx　　//定义作者，写上自己的邮箱
COPY dist/ /usr/share/nginx/html/  //将dist文件夹下面的内容拷贝到/usr/share/nginx/html/目录下

 

6.生成web镜像

在此目录下打开终端

Docker部署vue+nginx项目

输入

docker build -t xxx .　　//xxx 是你镜像的名字。 特别注意后页面那个点不能省略

 

7.运行容器 

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

xx，容器名称

xxx，镜像名称

8080:80，将nginx的80映射到linux服务器的8008端口