Vue项目打包成Docker镜像包的简单步骤
更新时间：2023年10月16日 10:12:19 作者：丶Yann
最近做时速云项目部署,需要将前端项目打成镜像文件,下面这篇文章主要给大家介绍了关于Vue项目打包成Docker镜像包的简单步骤,需要的朋友可以参考下
要将 Vue 项目打包为 Docker 镜像，可以按照下面的步骤进行操作：
1、在 Vue 项目根目录下创建一个名为 Dockerfile 的文件。
2、在 Dockerfile 中定义应用程序所需的环境，例如 Node.js 运行时和依赖项。
以下是一个示例：
# 使用 Node.js 18 作为基础镜像 FROM node:18 # 在容器中创建工作目录 WORKDIR /app # 拷贝 package.json 和 package-lock.json 到工作目录 COPY package*.json ./ # 安装依赖 RUN npm install # 拷贝整个应用程序到工作目录 COPY . . # 构建应用程序 RUN npm run build # 暴露端口 EXPOSE 80 # 运行应用程序 CMD [ "npm", "run", "start" ]
3、构建 Docker 镜像。在终端中导航到项目根目录并运行以下命令：
docker build -t your-image-name .
其中 your-image-name 是你要为镜像取的名称。
4、运行 Docker 镜像。运行以下命令：
docker run -it -p 8080:80 your-image-name
其中 -p 参数指定要绑定的主机端口和容器端口。在这个例子中，将主机端口 8080 绑定到容器端口 80。
补充：运行前端镜像容器
容器内部的端口号是443 我使用--net=host，就不需要映射端口号了
如果防火墙开着的话，需要放行443和80端口哦
docker run -d --privileged=true --name nss-web1.0 --restart always --net=host nss-web:1.0
--privileged=true #容器内部拥有root权限 --restart always #自启动 --net=host #网络与宿主机保持一致
总结
到此这篇关于Vue项目打包成Docker镜像包的文章就介绍到这了,更多相关Vue打包Docker镜像包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
本篇文章主要介绍了Vuejs 用$emit 与 $on 来进行兄弟组件之间的数据传输示例，非常具有实用价值，需要的朋友可以参考下。2017-02-02
这篇文章主要介绍了安装vue/cli后查看版本显示找不到vue指令的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
在 Vue 3 中,Proxy 主要用于 拦截对象的基本操作,包括 属性读取（get）、修改（set）、删除（deleteProperty） 等,本文给大家介绍了Vue3使用Proxy构建高效响应式数据的操作教程,需要的朋友可以参考下2025-03-03
这篇文章主要介绍了vue为什么要封装全局组件引入，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下2022-07-07
这篇文章主要为大家详细介绍了Vue2递归组件实现树形菜单的相关代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要介绍了vue子传父关于.sync与$emit的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要为大家详细介绍了vue.js实现一个漂亮、灵活、可复用的提示组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
在Vue中,有两种类型的自定义指令：局部指令和全局指令,但是除了这些指令 Vue也允许我们自己定义自己的指令,下面我们就来学习一下Vue中自定义指令的用法吧2023-08-08
这篇文章主要介绍了Vue-scoped(局部)样式使用方法及实例代码，文中示例代码介绍了的非常详细感兴趣的同学可以参考阅读一下2023-05-05
关于在vue 中使用百度ueEditor编辑器的方法实例代码
这篇文章主要介绍了在vue 中使用百度ueEditor编辑器的方法实例代码 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
最新评论