当前位置:首页 > http > 正文内容

docker 前端中使用

tigon6个月前 (01-26)http144

下载地址

https://docs.docker.com/desktop/install/mac-install/

学dockder的目的
可以将vue项目打包为docker镜像运行
使用docker可以方便将其他人的项目直接运行,而不需要配置
1,将vue的项目进行构建,输出dist
这个步骤就相当于是将vue的项目 npm run build 打包到服务器是一样的
2,准备镜像内容
在dist目录之上新建一个Dockerfile文件,该文件没有后缀,文件名即为此,然后输入如下内容:

FROM nginx:latest //设置基础镜像,基础包镜像使用nginx
LABEL Author dj   //作者信息
COPY dist /usr/share/nginx/html  //将dist文件夹下面的内容拷贝到/usr/share/nginx/html 目录下面(nginx的默认项目路径)也就是我们vue项目打包之后我们正常使用nginx是拷贝过去的文件夹

3,制作镜像

docker build -t //镜像名字
# 比如
docker build -t vue3project
docker images //查看镜像是否制作好

注意:后面的,不能省略,镜像创建成功之后使用docker imges即可看到自己创建的镜像
整个制作过程大概为5分钟

在镜像工具里可以看到运行
4,启动镜像

docker run -d --name 镜像名字 -p 888:80 vue3project

docker类似线上的服务器
打包好的dist目录,平级下创建一个Dockerfile
里面写上配置内容

docker login 查看是否登录账号成功,在发布线上之前需要有账号

修改名字

docker tag xxx dj(作者名字)/镜像名字

在项目根目录下创建 Dockerfile

FROM node:18-alpine3.15
WORKDIR /egg
COPY package.json .
RUN npm install

.dockerignore
排队docker操作的内容

docker-compose.yml

版权声明:本文由Web学习之路发布,如需转载请注明出处。

本文链接:https://webge.net/?id=188

返回列表

上一篇:elementplus 限制数字最小最大

没有最新的文章了...

“docker 前端中使用” 的相关文章

vue实现的整体流程

vue实现的整体流程

vue实现分为4大步骤第一步:解析模板成render函数    with的用法,在javascrip精粹这本书中作者提出在开发中还是最好不要使用with,除非你对它存在的问题非常之了解,当前vue中使用了不会影响开发者使用    模板中的所...

vue3的使用

从0开始搭建项目1,npm init @vitejs/appyarn create @vitejs/app2,npm install 安装依赖3,npm run dev 启动项目...

资料下载地址

macpnpm https://www.pnpm.cn/installation...

elementplus 限制数字最小最大

<el-form-item :label="transformI18n($t('register.注册数量'))" prop="num"> <el-input style="w...