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 小时前
基于springboot+vue的旅游民宿管理系统
java·spring boot·vue·毕业设计·课程设计·源代码·旅游民宿管理系统
Benszen5 小时前
Docker容器化技术全解析
运维·docker·容器
再ZzZ9 小时前
Docker快速部署Kafka(内网通用版本)
docker·容器·kafka
风清云淡_A9 小时前
【vue3+ArcGIS5】web开发中的地图功能从入门到实战三:在地图上画形状
vue
Stack Overflow?Tan9010 小时前
linux ubuntu22.04安装ROS2humble完整版的流程
linux·docker·ros2
风清云淡_A12 小时前
【vue3+ArcGIS5】web开发中的地图功能从入门到实战一:显示一个基础的地图
vue
正经教主14 小时前
安全养虾:[windows]Docker部署OpenClaw详细过程记录
安全·docker·容器
风清云淡_A14 小时前
【vue3+ArcGIS5】web开发中的地图功能从入门到实战四:更改地图的图层样式
vue
程序员 沐阳14 小时前
Docker 命令完全指南:从入门到实战
docker·容器·eureka
繁星星繁14 小时前
Docker(一)
java·c语言·数据结构·c++·docker·容器·eureka