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

相关推荐
斤斤计较4 小时前
Docker 环境安装(2025最新版)
运维·docker·容器
小锋学长生活大爆炸4 小时前
【教程】Docker方式本地部署Overleaf
运维·docker·容器
欧先生^_^4 小时前
Docker 的各种网络模式
网络·docker·容器
掘金者说4 小时前
docker系列-DockerDesktop报错信息(Windows Hypervisor is not present)
运维·docker·容器
我不是秃头sheep9 小时前
Ubuntu 安装 Docker(镜像加速)完整教程
linux·ubuntu·docker
格桑阿sir11 小时前
Kubernetes控制平面组件:Kubelet详解(三):CRI 容器运行时接口层
docker·kubernetes·containerd·kubelet·cri-o·容器运行时·cri
dadeity15 小时前
Linux 离线安装 Docker 和 Docker Compose 最新版 的完整指南
linux·docker·docker-compose
东方未明010819 小时前
docker(一)前言:高并发服务端技术架构的演进
docker·性能优化·高并发·虚拟化·容器化
yt948321 天前
Docker-基础(数据卷、自定义镜像、Compose)
运维·docker·容器
Hfc.1 天前
docker-daemon.json
docker·容器·json