前端-如何通过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,会导致前端路由跳转报错。

相关推荐
“码”力全开20 小时前
解耦品牌壁垒:基于 Docker 与边缘计算的高并发视频中台架构(支持 GB28181/RTSP 统一接入与源码交付)
docker·音视频·边缘计算
Xp0219110320 小时前
知网研学、万方、WPS、大以论文四大排版工具横评,新用户免费排版等你领!
前端·css·html·生活·wps·论文排版
全栈技术负责人20 小时前
老项目新需求AI前端开发指南
前端·ai编程
木卫二号Coding20 小时前
第八十五篇-CentOS-7 + Tesla V100 环境下 Docker 容器内编译部署 Qwen3.6-27B-MTP 大模型实战指南
linux·docker·centos
Irene199120 小时前
Win11 安装 Docker Desktop 并配置 WSL 使用 Hbase
docker·hbase
周凡12320 小时前
AI 时代的 Web JavaScript 逆向分析实践与思考
前端·javascript·人工智能
dongdonglele52120 小时前
ubuntu 系统x86 架构安装docker,可以使用本地显卡
ubuntu·docker·架构
日取其半万世不竭20 小时前
密码管理工具私有化部署,Vaultwarden 备份恢复怎么做?
数据库·docker·容器
jerryinwuhan20 小时前
marker BiBERTo解释
java·前端·人工智能
zhoumeina9920 小时前
分段创建产品,tab 页切换又要保留缓存
前端·javascript