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

相关推荐
__lll_3 小时前
Docker 从入门到实战:容器、镜像与 Compose 全攻略
前端·docker
柏成4 小时前
写给前端仔仔的docker实战
前端·docker·面试
进击的阿尔法猿6 小时前
docker
运维·docker·容器
木易双人青13 小时前
01-Docker-简介、安装与使用
运维·docker·容器
麦麦大数据20 小时前
F003疫情传染病数据可视化vue+flask+mysql
mysql·flask·vue·大屏·传染病
AI大模型21 小时前
基于 Docker 的 LLaMA-Factory 全流程部署指南
docker·llm·llama
tb_first1 天前
k8sday11服务发现(2/2)
docker·云原生·容器·kubernetes·k8s
发愤图强的羔羊1 天前
Docker 搭建 SVN 服务器
docker
为了摸鱼而战1 天前
Dockerfile知识点梳理,你要搞懂的都在这
docker
Clownseven1 天前
Docker+Nginx+Node.js实战教程:从零搭建高可用的前后端分离项目
nginx·docker·node.js