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

相关推荐
Patrick_Wilson2 天前
从「改个端口」到 502:Next.js on k8s 的容器端口、Service 映射与 env 覆盖
docker·kubernetes·next.js
Suroy3 天前
DockerView-Go:用 Go 写一个终端 Docker 监控工具,顺便做了个 Web 仪表盘
docker
云恒要逆袭3 天前
运行你的第一个Docker容器
后端·docker·容器
宋均浩4 天前
# Docker 镜像瘦身实战:从 1.2G 到 80MB 的五个优化步骤
ci/cd·docker
程序员老赵4 天前
10 分钟部署 OpenCode:Docker 一键安装,浏览器打开就能用 AI 写代码(附完整命令与排错)
docker·容器·ai编程
WangMingHua1114 天前
LM Studio Docker 部署——本地大模型一键启动
docker
曲幽5 天前
别再用网页翻译看源码了!你的私人翻译神器LibreTranslate,部署避坑指南来了
python·docker·web·pot·translate·libretranslate·arogstranslate
武子康7 天前
调查研究-183 Apple container:Mac 上用轻量 VM 跑 Linux 容器,Swift 会改写本地容器体验吗?
docker·容器·apple
Alsn8610 天前
等待学习-学习目录:Docker 容器安全攻防
学习·安全·docker
程序员老赵10 天前
服务器没有桌面?Docker 跑个 Chrome,浏览器就能远程用
docker·容器·devops