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

相关推荐
拆房老料22 分钟前
ONLYOFFICE也能像Microsoft Word和WPS一样分别设置中西文字体
前端·html·word·开源软件·wps
AIGC大时代34 分钟前
LLM Agent 执行沙箱闸门:失败含义与当天最小实验
docker·沙箱·闸门·bubblewrap·llm agent
Solis程序员38 分钟前
Stripe 幂等表:把「不确定的重试」变成「查表返回」
前端·安全·bootstrap·php·agent
李纲明1 小时前
WordPress 站点变慢:按 TTFB → 缓存 → 查询 → 前端 分层排查(含配置注意)
前端·缓存·性能优化·wordpress·后端开发
程序人生8881 小时前
PDF 转 Word 版式错乱、表格丢失?DocConverter Web 格式互转引擎的保真实践
前端·人工智能·opencv·机器学习·pdf·word
灯澜忆梦2 小时前
【docker】#2 | 基础命令
docker·容器·eureka
粥里有勺糖2 小时前
安利一下最近用的桌面“Agent” | T3 Code
前端·github·ai编程
xy34532 小时前
Axure 9.0 动态面板基本操作
前端·ui·html·axure·原型·产品设计
不停喝水2 小时前
【前端转全栈java速通课】 项目实战④7-11节 操作数据库-登录-注册-修改密码-注销-mubatis-plus简化crud-
java·前端·数据库