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

相关推荐
liangshiwei8 小时前
ABP x Vue:介绍 ABP Vue UI
vue·abp
灯澜忆梦10 小时前
【minio】#1 | 简介与安装
docker·对象存储·minio
江湖有缘20 小时前
3款开源绘图工具整理合集,可Docker一键部署!
docker·容器·开源
TTATTC20 小时前
告别协议选型内耗:深入拆解微服务“内部 gRPC + 边界 REST”混合通信架构与 Envoy 转码实战
docker·开源
光依旧2 天前
PageIndex没翻车,翻车的是我的解析器
docker·langchain·大模型·向量数据库·pdf解析·rag·pageindex
谢亮_vipxieliang2 天前
容器排障实战手册:从日志到内核的分层排障
docker·云原生·容器·eureka
frjc2 天前
前端技术选型:主流方案对比与落地建议
vue·react·angular
ss2732 天前
AI全栈实战 | 2.3-01 组件库实战:Element Plus 怎么搭出专业界面,过度封装为什么成维护负担
前端·javascript·elementui·vue
梦想不只是梦与想2 天前
Docker 常用命令
docker
小白的码BUG之路2 天前
Docker -- 构建ruoyi-gateway镜像
docker·容器·gateway