前端-如何通过docker打包Vue服务成镜像并在本地运行(本地可以通过http://localhost:8080/访问前端服务)

1、下载安装docker,最好在vs code里安装docker的插件。

下载链接:https://www.docker.com/products/docker-desktop

🎉 Docker 简介和安装 - Docker 快速入门 - 易文档 (easydoc.net)

2、准备配置文件-dockerfile文件和nginx.conf文件

dockerfile文件:基本配置如下

复制代码
FROM registry.cn-beijing.aliyuncs.com/hiacloud/nginx:1.25.1
COPY dist/ /usr/share/nginx/html

另外准备一份nginx.conf文件(网上可搜)

3、命令行操作

首先下载vue的依赖,并且打包在本地生成dist文件

然后运行docker命令

复制代码
//打包成镜像
docker build -t my-nginx-image .
//启动服务
docker run -d -p 8080:80 my-nginx-image

接着就可以在本地通过http://localhost:8080/访问前端服务。

注意点

没有nginx.conf,会导致前端路由跳转报错。

相关推荐
深邃-5 分钟前
【Web安全】-云服务器与Docker(2):Docker镜像操作,Docker容器操作,Docker搭建漏洞靶场
linux·服务器·web安全·网络安全·docker
宁雨桥8 分钟前
AI前端开发面试题分享
前端·人工智能·ai
亿元程序员8 分钟前
求求你别卷了,主管又转发你的文章到工作群了...我看了之后五味杂陈,决定卷个毛线!
前端
kyriewen1117 分钟前
你的前端滤镜慢得像PPT?用Rust+WebAssembly,一秒处理4K图
开发语言·前端·javascript·设计模式·rust·ecmascript·powerpoint
QD_ANJING28 分钟前
建议5月的Web前端开发都去飞书上准备面试...
前端·人工智能·面试·职场和发展·前端框架·状态模式·ai编程
研究点啥好呢35 分钟前
面馆开业!客官,你的面(经)好了!
python·阿里云·docker·面试·reactjs·求职招聘·react
萤萤七悬35 分钟前
【人工智能训练师3级】考试准备(2026)三、实操题1.1.3-3.2.5
前端·数据库·人工智能
yqcoder40 分钟前
JavaScript 深拷贝:如何彻底切断引用关联?
开发语言·前端·javascript
米高梅狮子42 分钟前
13.ETCD 存储系统、生产环境 Kubernetes 集群部署和Kubernetes 集群升级
数据库·云原生·容器·架构·kubernetes·自动化·etcd