打包vue前端docker镜像

8 篇文章 0 订阅
4 篇文章 0 订阅

1 安装好docker环境     docker -v   查看是否成功

2编写Dockerfile文件.下面这个dokcerfile的RUN指令不好.[当有多个命令需要执行的时候,可以用换行符和连接符隔开,而不是写多个RUN指令,因为那样会增加镜像的构建时间,产生很多无用的中间层镜像(镜像分层原理,每一条指令都会构建一层镜像)]

RUN command1 \
    && command2 \
    && command3

From nginx:1.18.0

Run mkdir /usr/share/nginx/dis    这个路径在我这是错的,会报错.报错后直接run,启动容器后##去容器内容查看具体路径就好

Run rm -fr /etc/nginx/nginx.conf

COPY ./dist  /usr/share/nginx/dist

COPY  ./nginx.conf  /et/nginx/conf/nginx.conf

EXPOSE 80

3从外网下载一个nginx镜像包或者docker pull一个,上传前端升级包dist文件,准备好nginx.conf文件

4

docker load < nginx.tar      docker build -t name:tag .    //只写docker build  . 的话,docker load < nginx.tar打入的镜像没有name和tag,只有id

准备工作做好了.现在有docker环境和一个nginx镜像.

docker run --name myNginx2 -p 8080:80 -d 镜像ID   // 容器启动后就可以进入查看了,下面那个进入,-d: 启动容器后不进入容器

挂载目录方式:  

docker run --name myNginx2 -p 8080:80 -v /data/myNginx/nginx.conf:/etc/nginx/nginx.conf -v /data/myNginx/www/:/usr/share/nginx/ -v /data/myNginx/logs/:/var/log/nginx/ -v /data/myNginx/conf/conf.d:/etc/nginx/conf.d --privileged=true -d nginx


 

docker exec -it  容器ID /bin/bash      到容器内去看nginx的路径,不是所有默认路径都是/usr/share/nginx

docker cp dist myNginx2:/data/nginx/          拷贝整个dist文件夹及子文件夹到docker的路径内

执行完build后,执行

 docker save 镜像名:tag > 新名字.tar    //就可以导出镜像为压缩包了,这种导出,在执行load时,也会有name和tag.而 docker save 镜像id > XXX.tar在load时,只有镜像id

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Docker 是一种流行的容器技术,可以用来部署不同的应用程序,前端应用程序。Vue 是一种流行的前端框架,用于构建现代化的 SPA 单页面应用程序。当我们使用 Docker 来部署 Vue 应用程序时,我们需要将 Vue 应用程序打包Docker 镜像中,并设置端口映射以便能够通过 Web 浏览器访问该应用程序。 Vue 应用程序通常使用 Node.js 作为运行时环境,因此我们可以使用 Node.js Docker 镜像来部署 Vue 应用程序。下面是一个示例 Dockerfile: ``` FROM node:14.16.0-alpine3.13 WORKDIR /app COPY package*.json ./ RUN npm install COPY . . EXPOSE 8080 8081 8082 CMD ["npm", "run", "serve"] ``` 在上面的 Dockerfile 中,我们首先从 Node.js 14.16.0-alpine3.13 镜像中构建一个容器。工作目录被设置为 /app。然后我们将 package.json 和 package-lock.json 文件复制到容器中,并运行 npm install 安装所有依赖。复制所有其他文件后,我们设置 EXPOSE 指令以将端口 8080、8081 和 8082 映射到宿主环境。最后,我们可以使用 CMD 指令启动和运行 Vue 应用程序。 在 Docker 容器中运行 Vue 应用程序后,我们可以使用 docker run 命令将容器映射到计算机上的端口。例如,如果我们在本地计算机上使用端口 8000 作为映射端口,我们可以运行以下命令: ``` docker run -p 8000:8080 -p 8001:8081 -p 8002:8082 vue-app ``` 在上述命令中,-p 选项指定了端口映射。我们将容器中端口 8080、8081 和 8082 映射到宿主计算机上的端口 8000、8001 和 8002。vue-app 是我们构建的 Docker 镜像的名称。 总结来说,我们可以使用 Docker 容器来部署 Vue 应用程序,并使用端口映射将容器中的端口映射到宿主计算机上的端口。因此,我们可以在一个计算机上同时运行多个 Vue 应用程序。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值