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

相关推荐
没想好d17 小时前
通用管理后台组件库-9-高级表格组件
前端
阿虎儿17 小时前
React Hook 入门指南
前端·react.js
核以解忧18 小时前
借助VTable Skill实现10W+数据渲染
前端
WangHappy18 小时前
不写 Canvas 也能搞定!小程序图片导出的 WebView 通信方案
前端·微信小程序
李剑一18 小时前
要闹哪样?又出现了一款新的格式化插件,尤雨溪力荐,速度提升了惊人的45倍!
前端·vue.js
闲云一鹤18 小时前
Git LFS 扫盲教程 - 你不会还在用 Git 管理大文件吧?
前端·git·前端工程化
阿虎儿18 小时前
React Context 详解:从入门到性能优化
前端·vue.js·react.js
Sailing19 小时前
🚀 别再乱写 16px 了!CSS 单位体系已经进入“计算时代”,真正的响应式布局
前端·css·面试
喝水的长颈鹿19 小时前
【大白话前端 03】Web 标准与最佳实践
前端
爱泡脚的鸡腿19 小时前
Node.js 拓展
前端·后端