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

相关推荐
JavaPub-rodert7 小时前
Docker 日志为什么能把磁盘写爆?讲透 json-file、local、journald、日志轮转与 docker logs
docker·eureka·json
人生匆匆8 小时前
docker部署ceph集群
ceph·docker·容器
张张123y11 小时前
后端第九课:部署上线(把你的 FastAPI 后端真正跑起来给别人用)
python·docker·部署·fastapi
AscendKing15 小时前
Docker Compose 一键部署 SkyWalking 10.2.0 + Elasticsearch8.11,分布式链路追踪完整实战
elasticsearch·docker·skywalking·链路追踪·微服务监控
励志师code15 小时前
Kubernetes 集群节点生命周期管理实战:从扩容、调度管控到证书续期
运维·docker·容器·kubernetes·gpu算力·kubelet
木雷坞16 小时前
Docker Compose部署Metabase:应用库隔离与日期筛选看板
运维·docker·容器
怒放的生命199116 小时前
前端项目 Docker 打包实操指南
前端·docker·容器
tedcloud12316 小时前
Docker Compose 部署 Immich:手机照片自动备份与常见故障排查
运维·前端·docker·容器·智能手机·开源·流程图
古城小栈16 小时前
Docker Compose 云原生的底座
docker·云原生·容器
卜锦元17 小时前
Docker Compose 部署 Nginx 1.30.6 完整指南
nginx·docker·容器