部署若依前端页面到minikube

简介: 部署若依前端页面到minikube

部署若依前端页面到minikube

1.进入前端项目目录

Ruoyi-cloud/ruoyi-ui

执行指令构建前端页面

 

npm install

构建前端页面:npm build:prod如果是开发前端页面:npm run dev

详细信息可以查看README

 

2. 复制前端页面到nginx

相关复制命令可以参考copy.sh

cp -r ../ruoyi-ui/dist/** ./nginx/html/dist

 

3. 构建前端镜像

docker compose build ruoyi-nginx


4. 使用minikube image load 加载镜像


5. 编写前端yaml内容如下

 

apiVersion: apps/v1

kind: Deployment

metadata:

 name: ruoyi-ui

 labels:

   app: ruoyi-ui

spec:

 strategy:

   type: Recreate

 selector:

   matchLabels:

     app: ruoyi-ui

 template:

   metadata:

     labels:

       app: ruoyi-ui

   spec:

     containers:

     - name: ruoyi-ui

       image: nginx

       imagePullPolicy: IfNotPresent

       ports:

       - containerPort: 80

 

---

kind: Service

apiVersion: v1

metadata:

 name: ruoyi-ui

spec:

 type: ClusterIP

 selector:

   app: ruoyi-ui

 ports:

 - port: 8080

   targetPort: 80

 

 

注意:

1此处的nginx是包含前端页面的,是使用docker compose build ruoyi-nginx生成的镜像

2需要修改nginx配置的后端访问地址

 

6部署到minikube中

image.png 

如果是再虚拟机中,需要再做一次端口转发

相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1天前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
2月前
|
前端开发 数据安全/隐私保护
.自定义认证前端页面
.自定义认证前端页面
14 1
.自定义认证前端页面
|
2月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
2月前
|
Web App开发 缓存 监控
前端性能优化实战:从代码到部署的全面策略
前端性能优化实战:从代码到部署的全面策略
39 1
|
2月前
|
Web App开发 前端开发 JavaScript
前端性能优化实战:从代码到部署的全面指南
前端性能优化实战:从代码到部署的全面指南
41 1
|
2月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
134 2
|
2月前
|
前端开发 安全 JavaScript
在阿里云快速启动Appsmith搭建前端页面
本文介绍了Appsmith的基本信息,并通过阿里云计算巢完成了Appsmith的快速部署,使用者不需要自己下载代码,不需要自己安装复杂的依赖,不需要了解底层技术,只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Appsmith,非技术同学也能轻松搞定。
|
3月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
44 18
|
3月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。