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镜像包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue3+vite兼容低版本的白屏问题详解(安卓7/ios11)
这篇文章主要给大家介绍了关于vue3+vite兼容低版本的白屏问题的相关资料,还给大家介绍了vue打包项目以后白屏和图片加载不出来问题的解决方法,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了elementUI同一页面展示多个Dialog的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要介绍了vue富文本框（插入文本、图片、视频）的使用及问题小结,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了ant-design-vue中tree增删改的操作方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
vue 使用addRoutes动态添加路由及刷新页面跳转404路由的问题解决方案
我自己使用addRoutes动态添加的路由页面,使用router-link标签可以跳转,但是一刷新就会自动跳转到我定义的通配符 * 指向的404路由页面,这说明没有找到指定路由才跳到404路由的,这样的情况如何处理呢,下面小编给大家分享解决方案,一起看看吧2023-10-10
vue2中的el-select组件数据太多,如何实现滚动加载数据效果
这篇文章主要介绍了vue2中的el-select组件数据太多,如何实现滚动加载数据效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
在Vue3中,onUnmounted是一个生命周期钩子,它会在组件实例被卸载（unmounted）和销毁之前被调用,本文给大家介绍vue3中onUnmounted使用详解,感兴趣的朋友跟随小编一起看看吧2024-03-03
这篇文章主要介绍了Vue使用vm.$set()解决对象新增属性不能响应的问题,为了解决这个问题，Vue提供了一个特殊的方法vm.$set(object, propertyName, value)，也可以使用全局的Vue.set(object, propertyName, value)方法，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue中如何监听url地址栏参数变化问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了vue 使用lodash实现对象数组深拷贝操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论