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

相关推荐
To_OC1 天前
跑了3个Docker容器后,我终于搞懂镜像和容器到底啥关系
后端·docker·容器
南城以南溫暖如初1471 天前
外卖CPS实战指南:从技术选型到运营落地全流程解析
java·spring boot·mysql·架构·vue
tryCbest1 天前
Docker 从零到精通:知识与跨平台使用指南
docker·容器
开始学AI1 天前
Codex2API Docker 使用宿主机代理:OAuth Token 兑换 403 问题排查与解决方案
运维·docker·容器
做前端的娜娜子1 天前
Docker 常用命令全梳理:从镜像拉取到容器编排
docker·容器·掘金·金石计划
m0_579146651 天前
关于Docker Desktop导致C盘空间异常占用的排查与根治方案
运维·docker·容器
aXin_ya2 天前
ElementUI (01):Vue2 项目引入 ElementUI使用
elementui·vue
郝开2 天前
Docker Compose 本地环境搭建:kkFileView
运维·docker·容器
jufeng13072 天前
【系列:TDengine 工业物联网实战:从零搭起可运行系统 · 第 10 篇】
docker·时序数据库·tdengine·高可用
国际云,接待2 天前
Docker 容器一直显示 unhealthy:从 Healthcheck 输出到依赖故障的完整排查
运维·docker·容器