部署若依前端页面到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 

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

相关文章
|
13天前
|
前端开发 数据安全/隐私保护
.自定义认证前端页面
.自定义认证前端页面
6 1
.自定义认证前端页面
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
|
8天前
|
前端开发 安全 JavaScript
在阿里云快速启动Appsmith搭建前端页面
本文介绍了Appsmith的基本信息,并通过阿里云计算巢完成了Appsmith的快速部署,使用者不需要自己下载代码,不需要自己安装复杂的依赖,不需要了解底层技术,只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Appsmith,非技术同学也能轻松搞定。
|
6天前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
30天前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
37 18
|
24天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
9天前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
|
2月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
85 2
前端JS读取文件内容并展示到页面上
|
1月前
|
前端开发 数据安全/隐私保护
angular前端基本页面验证
angular前端基本页面验证
29 1
|
1月前
|
前端开发
搭建个人博客--1、前端页面
搭建个人博客--1、前端页面
20 1