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

相关推荐
名字还没想好☜5 小时前
用 systemd 托管后台服务:Restart 策略、日志接管、资源限制与开机自启全踩一遍
运维·docker·kubernetes
动力 continue6 小时前
docker容器大舞台,创建镜像,构造类,基础速通
docker·容器
Akiyama_Mio-Kon7 小时前
2026 最新:Dify 本地 Docker 部署完整教程(Windows + Git Bash)
windows·git·docker
野熊佩骑10 小时前
Kubernetes实战系列文章(三) 之 K8S运维常用命令
linux·运维·docker·微服务·云原生·容器·kubernetes
石小千14 小时前
Docker 笔记(九)--离线安装
docker·容器
dazhong201215 小时前
Docker 进阶篇(二) Docker Compose 部署 Nginx 实践
nginx·docker·容器
码--到成功15 小时前
Docker、Kubernetes安装系列 一
docker·容器·kubernetes
cui_hao_nan18 小时前
Docker学习3
docker·容器
新中地GIS开发老师18 小时前
WebGIS开发入门 | 从 Web 开发到地图开发,差别在哪儿?
前端·vue·webgis
玉&心18 小时前
在Docker中部署前端和后端的实现
运维·docker·容器