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

相关推荐
donoot10 小时前
一次 Nginx 502 问题的深度排查:从 SELinux 到容器网络
nginx·docker·selinux·反向代理·502 bad gateway
爱上纯净的蓝天10 小时前
使用 AtomCode 构建微前端架构:从设计到实现实战
架构·vue·实战·react·微前端·atomcode
Sagittarius_A*12 小时前
Docker:渗透前置容器化核心基础
运维·安全·docker·容器
名字还没想好☜14 小时前
Docker 多阶段构建:把镜像从 1.2GB 砍到 15MB
运维·docker·容器·多阶段构建·镜像优化
生活爱好者!15 小时前
NAS还能玩游戏?部署一款 WebGL 3D 赛车小游戏
游戏·docker·容器·玩游戏
曦月合一16 小时前
本地电脑部署docker,及各种组件(nginx、mysql、redis、mongo、minio、java)
docker·windows10 专业版
hj28625117 小时前
Docker 核心知识点整理(网络 + Dockerfile + 原理 + 命令)
网络·docker·容器
梦想的颜色1 天前
【Docker原理】Docker 容器一文打尽:生命周期、环境管控、迁移备份、日志进程排查、垃圾清理
运维·docker·容器·容器生命周期·容器日志排查·容器迁移备份·容器进程管理
极客先躯1 天前
高级java每日一道面试题-2026年03月30日-实战篇[Docker]-如何监控容器的网络流量?
java·运维·docker·容器·prometheus·高级面试
大E帝国子民11 天前
Docker 部署 RocketMQ 5
docker·容器·rocketmq