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

相关推荐
muyun28002 天前
Docker 下部署 Elasticsearch 8 并集成 Kibana 和 IK 分词器
elasticsearch·docker·容器
傻傻虎虎2 天前
【Docker】常用帮忙、镜像、容器、其他命令合集(2)
运维·docker·容器
2401_897930063 天前
使用Docker轻松部署Neo4j图数据库
数据库·docker·neo4j
蜚鸣3 天前
Vue的快速入门
vue
LeeZhao@3 天前
【AI推理部署】Docker篇04—Docker自动构建镜像
人工智能·docker·容器
程思扬3 天前
利用JSONCrack与cpolar提升数据可视化及跨团队协作效率
网络·人工智能·经验分享·docker·信息可视化·容器·架构
落日漫游3 天前
dockercompose和k8s区别
docker·kubernetes
lllsure3 天前
【Docker】存储卷
运维·docker·容器
纤瘦的鲸鱼3 天前
Docker 从入门到实践:容器化技术核心指南
java·docker·容器
邂逅星河浪漫3 天前
【Docker+Nginx+Ollama】前后端分离式项目部署(传统打包方式)
java·nginx·docker·部署