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

相关推荐
IT_陈寒13 小时前
Vite动态导入差点让我秃头,原来问题出在这
前端·人工智能·后端
FoldWinCard13 小时前
K8s集群部署的方法原理
大数据·容器·kubernetes
白泽_hunter13 小时前
项目里最常见的 5 个 this 指向坑:从规则到实战彻底讲透
前端
宿67413 小时前
vue3-pinia
前端·vue.js
白泽_hunter13 小时前
搞懂 JS 数据类型:从 typeof 到手写完整类型判断,一张图理清
前端
日光倾14 小时前
TypeScript 随手记 —— 1
前端·javascript·typescript
自学it的攻城狮14 小时前
elpis-core ,koa实现的系统底座, 沉淀80% 的通用能力,剩下20% 用于定制化开发
前端
CappuccinoRose15 小时前
模块化体系
前端·import·export·es modules
AIDANHANG15 小时前
放开靠时间戳对日志前先核请求ID跨服务传播与采样关联
前端·人工智能
二宝哥15 小时前
docker安装apisix
docker·容器·apisix