vue项目打包到服务器，构建docker镜像

目录

vue打包项目

将dist上传到服务器

在服务器创建保存目录

上传文件

在服务器对应目录(mall_vue)下创建Dockerfile文件

运行打包命令打包成docker镜像

访问页面

---

vue打包项目

对构建好的项目，运行npm run build

打包完成后，会有一个dist文件夹

 

将dist上传到服务器

在服务器创建保存目录

 

上传文件

使用文件传输工具filezilla进行文件上传(注意是将dist整个目录进行上传)

右上方为服务器目录，进入刚才创建的目录(mall_vue)，双击打开

左上方为本地目录，进入dist，左下方显示dist中内容，右击static和index.html，进行上传

上传完成后发现右侧对于服务器目录有上传的文件

在服务器对应目录(mall_vue)下创建Dockerfile文件

touch Dockerfile

vim Dockerfile

写入

# 设置基础镜像
FROM nginx:1.15
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
# 暴露端口
EXPOSE 80

此时mall_vue目录结构应该为:

 

运行打包命令打包成docker镜像

在对应目录(mall_vue)下执行docker build -t mall_vue .其中mall_vue为自定义镜像名，注意.表示全部文件

 

查看镜像，发现已经创建好mall_vue镜像

 

运行该镜像

docker run -d --name mall_vue -p 80:80 mall_vue

 

docker run

-d 后台运行容器

-p 制定端口映射 主机端口:容器端口

--name 为容器制定一个名称

最后一个mall_vue为镜像名称，也可以使用镜像ID

访问页面