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

相关推荐
ai产品老杨2 小时前
架构师深剖:基于 Docker 容器化与边缘计算的 AI 视频管理平台——支持 GB28181/RTSP 多协议接入与全源码交付
人工智能·docker·边缘计算
qq_185198694 小时前
Docker 历史版本
docker
m0_738120724 小时前
渗透测试基础——基于Docker的Rsync服务靶场搭建与原理讲解
运维·服务器·网络·安全·web安全·docker·容器
杨浦老苏8 小时前
PDF文档管理平台PDFManager
docker·pdf·工具·群晖
ai产品老杨8 小时前
解耦异构安防:基于 Docker 与边缘计算的 AI 视频管理平台,如何实现 GB28181/RTSP 统一接入与全源码交付
人工智能·docker·边缘计算
极客先躯9 小时前
高级java每日一道面试题-2026年02月09日-实战篇[Docker]-Docker 容器有哪些安全风险?如何缓解?
java·运维·网络·安全·docker·容器
yuanzhengme9 小时前
Ollama【部署 07】搭建本地智能体的简单说明(局域网离线部署Ollama+模型迁移+Docker部署AnythingLLM)
运维·docker·容器·大模型·ollama·本地智能体
想要成为计算机高手9 小时前
用meta quest 3 遥操宇树机器人-xr_teleoperate 复现(含docker安装与配置方式)
人工智能·docker·机器人·xr·g1·具身智能
“码”力全开10 小时前
云边端协同架构:基于 Docker 与边缘计算的 GB28181/RTSP 异构视频 AI 管理平台设计(附源码交付)
人工智能·docker·架构
IVEN_11 小时前
本地正常,Docker 怎么就空白:Next.js SSR 的 Alpine musl DNS 陷阱
前端·docker·next.js