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

相关推荐
森叶9 分钟前
Electron 安装包 asar 解压定位问题实战
前端·javascript·electron
drebander13 分钟前
ubuntu 安装 chrome 及 版本匹配的 chromedriver
前端·chrome
软件技术NINI22 分钟前
html知识点框架
前端·html
深情废杨杨26 分钟前
前端vue-插值表达式和v-html的区别
前端·javascript·vue.js
GHUIJS26 分钟前
【vue3】vue3.3新特性真香
前端·javascript·vue.js
minsin29 分钟前
【linux】【docker】Docker默认网段配置导致无法访问
docker
markzzw30 分钟前
我在 Thoughtworks 被裁前后的经历
前端·javascript·面试
众生回避32 分钟前
鸿蒙ms参考
前端·javascript·vue.js
洛千陨32 分钟前
Vue + element-ui实现动态表单项以及动态校验规则
前端·vue.js
GHUIJS1 小时前
【vue3】vue3.5
前端·javascript·vue.js