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

相关推荐
春日见25 分钟前
Docker中如何删除镜像
运维·前端·人工智能·驱动开发·算法·docker·容器
Anastasiozzzz1 小时前
Docker介绍与常见指令
运维·docker·容器
qq_229058011 小时前
Docker常用命令
linux·服务器·docker
春日见1 小时前
Docker如何基于脚本拉取镜像,配置环境,尝试编译
运维·驱动开发·算法·docker·容器
泰勒疯狂展开1 小时前
Vue3研学-组件的生命周期
开发语言·前端·vue
wacpguo1 小时前
Ubuntu 24.04 安装 Docker
linux·ubuntu·docker
你才是臭弟弟2 小时前
Docker 容器使用运行镜像(Windows)
运维·docker·容器
IT运维爱好者3 小时前
【Docker】解决Docker容器时间与宿主机时间不一致的几种方法
docker·容器
鸠摩智首席音效师3 小时前
如何在 Docker 容器下运行 cronjob ?
运维·docker·容器
Yawesh_best3 小时前
摆脱命令行!Docker Compose UI + 内网穿透,随时随地管理容器
ui·docker·容器