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

相关推荐
摇滚侠12 小时前
Vmvare 虚拟机安装 Linux CentOS 7 操作系统 一键安装 Docker 1Panel 一键安装 MySQL Redis OpenClaw
linux·docker·centos
此刻觐神12 小时前
IMX6ULL开发板学习-03(Linux文件相关命令)
前端·chrome
comedate12 小时前
【OpenClaw】 Open-WebUI Docker 部署连接本地 Ollama 技术文档
docker·ollama·openwebui·openclaw
吴声子夜歌12 小时前
ES6——Iterator和for...of循环详解
前端·javascript·es6
小李子呢021112 小时前
前端八股3---ref和reactive
开发语言·前端·javascript
落魄江湖行13 小时前
基础篇三 Nuxt4 组件进阶:插槽与事件传递
前端·nuxt4
kerli13 小时前
Compose 组件:LazyColumn 核心参数与 key/contentType 详解
android·前端
川trans13 小时前
基于 Docker & K8s 的 MySQL 容器化部署与应用关联实践
mysql·docker·kubernetes
好运的阿财13 小时前
“锟斤拷”问题——程序中用powershell执行命令出现中文乱码的解决办法
linux·前端·人工智能·机器学习·架构·编辑器·vim
踩着两条虫13 小时前
VTJ.PRO AI + 低代码实战:接入高德地图
前端·vue.js·ai编程