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

相关推荐
Patrick在香港2 小时前
Python Docker镜像从1.2GB到89MB:多阶段构建的完整优化实录
java·python·docker·信息可视化·容器·数据分析·ai编程
Lyra_Infra8 小时前
Docker OCI Runtime 启动失败问题排查与解决
后端·docker·架构
way_hj14 小时前
Flask笔记(2)快速web项目
笔记·flask·vue·web
wsad053216 小时前
Docker 网络故障排查记:当 bridge 模式失效时,host 模式如何救场
运维·docker·容器
张毅2004-10-1016 小时前
docker详解:安装docker,docker架构,docker镜像、容器、网络、存储,容器监控,容器日志,综合实验
linux·运维·docker·云原生·云计算
营养充电站16 小时前
C++23 新特性在 CLion 中的实战体验
macos·docker·jupyter·正则表达式
文优16 小时前
Linux 常用命令速查手册(工作版)
linux·运维·docker
张文君1 天前
docker使用代理拉取镜像
运维·docker·容器
陌路201 天前
Docker教程从入门到精通(0基础)
运维·docker·容器