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

相关推荐
smileNicky8 分钟前
Docker 部署 SpringBoot 项目超详细教程
spring boot·docker·容器
次次皮2 小时前
代理启动前端dist包
java·前端·vue
我叫黑大帅5 小时前
基于 Docker + Watchtower 自动化部署后端服务
后端·docker·面试
念恒123065 小时前
Docker(容器技术发展史)
docker·容器
eggcode5 小时前
腾讯云使用Docker模板的学习记录
学习·docker·腾讯云
展示猪肝5 小时前
Vue2 + FastAPI + Dify 实现 AI 医疗预检分诊助手:从问诊追问到医生审核闭环
人工智能·vue·fastapi·dify
YuanDaima20485 小时前
Docker 核心架构与底层技术原理解析
运维·人工智能·docker·微服务·容器·架构·个人开发
殇尘7 小时前
Docker + VSCode 搭建开发环境沙箱
vscode·docker·容器
汪汪大队u8 小时前
从 Docker Compose 到 Kubernetes:物联网管理系统迁移实战(3)—— 两个运维坑
运维·docker·kubernetes
smileNicky8 小时前
CentOS 8 安装 Docker 超详细教程
docker·eureka·centos