Vue项目打包成Docker镜像包的简单步骤
作者：丶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镜像包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！