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

相关推荐
Dillon Dong26 分钟前
【系统运维】Docker版本冲突问题详解:从错误到解决方案
docker·容器
Dillon Dong31 分钟前
【系列主题】从 Docker 构建失败看依赖隔离:多阶段构建的“隐形陷阱”
运维·docker·容器
AI服务老曹1 小时前
从底层协议对接说起:基于 GB28181/RTSP 的异构视频流接入架构设计与源码级解析
人工智能·docker
如果'\'真能转义说3 小时前
《数据不丢失!本地挂载的 Docker 一键启动PS1脚本》
运维·docker·容器
郝开3 小时前
Docker Compose 本地环境搭建:mysql
mysql·docker·容器
Dillon Dong3 小时前
【系列主题】拯救 OOM 与构建中断:Next.js 在 Docker 中的静态生成(SSG)避坑指南
开发语言·javascript·docker
阿桂有点桂3 小时前
Laravel队列再docker中开启和配置
docker·php·laravel
人工智能培训3 小时前
AI模型部署进阶:Docker容器化部署AI项目
人工智能·深度学习·机器学习·docker·容器·transformer·知识图谱
胡小禾4 小时前
K8S Helm
docker·容器·kubernetes
深念Y6 小时前
Docker Windows C盘爆满迁移到D盘:完整试错与成功路径
windows·docker·wsl·镜像·清理·迁移·c盘