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

相关推荐
知己80802 小时前
docker搭建图数据库neo4j
数据库·docker·neo4j
qq_2153978972 小时前
docker 安装 redis
redis·docker·容器
ink@re2 小时前
Docker环境搭建与容器管理实战:从部署到编排的完整指南
运维·docker·容器
李纲明4 小时前
WordPress外贸成品网站的免费获取渠道
vue·php
huisheng_qaq4 小时前
【RocketMq源码篇-02】rocketmq集群搭建详细过程(docker版-2主2从)
docker·rocketmq·rocketmq集群·rocketmq源码·2主2从
qq_2153978975 小时前
docker 管理工具 Portainer安装
运维·服务器·docker
凤凰战士芭比Q5 小时前
Docker安装与常用命令
linux·运维·docker·容器
小坏讲微服务7 小时前
Docker-compose搭建Docker Hub镜像仓库整合SpringBootCloud
运维·分布式·spring cloud·docker·云原生·容器·eureka
AI大模型学徒7 小时前
Docker(五)_数据根目录空间不足的原因与解决方法
运维·docker·容器
惊涛说IT7 小时前
Dockerfile入门案例
docker