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

相关推荐
tryCbest8 分钟前
Vue3——第 11 篇:组合式 API(上)——setup 与响应式 API 深度解析
前端·javascript·vue.js
tryCbest1 小时前
Vue3——第 13 篇:计算属性与侦听器——computed 与 watch 的进化
前端·javascript·vue.js
怒放的生命19911 小时前
本地用 pnpm 省磁盘,团队继续用 npm:极简实践
前端·npm·node.js
IT19951 小时前
Docker 快速部署 DM8 达梦数据库|完整踩坑笔记
笔记·docker·容器
believed_breadfruit1 小时前
我开源了一个HTML 分页导出工具,解决了复杂页面的内容截断、跨页错乱和长文档白屏问题
前端·javascript·github
wzg20161 小时前
ubuntu通过docker镜像部署安装onlyoffice
linux·ubuntu·docker
福狼1 小时前
从“网墙”到柔性曲面:一次 WebGPU 波浪的逆向分析与重建
前端·逆向
Star(up up up)2 小时前
Docker系列---Docker容器基本命令(新手小白保姆级实操教程)
运维·学习·程序人生·青少年编程·docker·容器·dubbo
宝哥聊编程2 小时前
主流 Agent 平台对比:Coze、Dify、飞书、扣子、OpenClaw 落地实操手册
前端·人工智能·飞书
时间的情敌2 小时前
Vue3 + Cesium 实战:本地上传 GLB 模型、模型上叠加 GLB、点击控制透明度
前端·vue.js·cesium