docker创建vue镜像

1.确保你已经安装了 Node.js 和 Vue CLI。

2.创建一个 Vue.js 项目(如果你还没有一个)

vue create my-vue-app

3.进入目录

cd my-vue-app

4.构建vue.js

npm run build

5.创建一个 Dockerfile 来构建 Vue 应用的 Docker 镜像:

基于 Node 官方镜像

FROM node:lts-alpine

设置工作目录

WORKDIR /app

复制 package.json 和 package-lock.json (如果有)

COPY package*.json ./

安装项目依赖

RUN npm install

复制项目文件和目录到工作目录

COPY . .

构建 Vue 应用

RUN npm run build

使用 Nginx 镜像作为基础来提供 web 服务器

FROM nginx:stable-alpine

从 Vue 应用镜像中复制构建好的文件到 Nginx 服务器的 html 目录中

COPY --from=0 /app/dist /usr/share/nginx/html

暴露 80 端口

EXPOSE 80

启动 Nginx,并且 Nginx 将持续运行

CMD "nginx", "-g", "daemon off;"

6.使用以下命令创建docker镜像

docker build -t my-vue-app .

7.运行vue.js应用的docker容器

docker run -d -p 8080:80 --name vue-app my-vue-app

相关推荐
bosins7 小时前
WSL2 启动即崩溃?调整超时参数解决 Docker 阻塞问题
linux·docker·wsl
一直在努力学习的菜鸟9 小时前
Docker 完整知识体系图
docker
java_logo12 小时前
Docker 部署 Gotenberg 完整教程:Compose 搭建文档转 PDF API
docker·pdf·chromium·libreoffice·文档转换·轩辕镜像·gotenberg
闲云野鹤在人间13 小时前
docker 入门 | 第7章 容器监控 和 第8章 容器日志 详解
运维·docker·容器·架构·云计算
Experience-摆渡13 小时前
开源RAG知识库WeKnora深度调研:让知识自己长成体系
爬虫·docker·开源·rag
闲云野鹤在人间13 小时前
docker 入门 | 第5章 网络详解
网络·docker·架构·华为云·php
闲云自留地14 小时前
告别敲命令!DockerUI 与 Portainer 可视化容器管理实战
docker·容器
志尊宝14 小时前
Vue3 零基础每日笔记(040):Vite 创建 Vue3 + TS 项目——企业标配从这一篇开始
笔记·vue·html·前端开发·软件开发
wdfk_prog14 小时前
ROS教程10:从 gtest 到 rostest——Unit Test、Node 集成测试、rosbag 与 rqt 验证闭环
运维·缓存·docker·容器·ros
cnkeysky16 小时前
docker 运行 nacos
docker·nacos