Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >rancher ui 的开发环境搭建 开发流程以及部署

rancher ui 的开发环境搭建 开发流程以及部署

作者头像
拿我格子衫来
发布于 2022-01-24 11:57:34
发布于 2022-01-24 11:57:34
73900
代码可运行
举报
文章被收录于专栏:TopFETopFE
运行总次数:0
代码可运行

本篇博客介绍rancher 配套的前端项目 rancher/ui 的开发流程

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
# 克隆项目到本地
git clone https://github.com/rancher/ui.git

# 进入项目根目录
cd ui

# 安装项目依赖 注意使用npm i 会报错
./scripts/update-dependencies

# 开启本地开发环境
yarn start

注意一下, 由于是前后端分离, 只启动前端项目是不行, 还要有后端服务

在这里配置后端的地址就能正常访问了

注意必须是https

部署使用下面这个命令

这里的服务器地址是前端部署后的服务器地址

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
./scripts/build-static -l -s -c '服务器地址'

前端部署的时候需要支持跨域,

-l 表示最新

-s 表示跳过测试

-c 服务器访问地址

编译好后将 /static/latest2 上传到服务器,并保证能访问, 出现404是正常的, 因为还没有链接后端

登录rancher 后 访问

打开你rancher服务器的 /v3/settings/ui-index接口,

https://rancher服务器/v3/settings/ui-index

并且修改 并将前端访问地址 填入value输入框 并保存上传即可

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
构建rancher自定义ui的前端镜像
run之后 访问链接https://192.168.99.100:8000/rancher-ui/
拿我格子衫来
2022/01/25
8640
构建rancher自定义ui的前端镜像
rancher教程(二): 本地搭建rancher dashboard 开发环境
上一篇我们使用docker部署了一个最新稳定版本的rancher。大家可以看到rancher2.6相比2.5 有了很大的改变。 本期我们就来讲一下2.6版本的rancher 中的dashboard。如何在本地开启rancher dashboard的项目,这这对于理解rancher的源码,提交PR很有帮助。 项目地址为 https://github.com/rancher/dashboard
拿我格子衫来
2022/05/07
2.1K0
rancher教程(二): 本地搭建rancher dashboard 开发环境
自定义 rancher ui 并覆盖原有项目
If you want to customize the UI, re-packaging all of Rancher to distribute the UI is possible but not terribly convenient. Instead you can change Cattle to load the UI source from a remote web server:
拿我格子衫来
2022/01/24
3840
SQL审核 | SQLE 二次开发环境搭建
就职于捷信消费金融有限公司,担任 DBA 工作。先后从事过 oracle 、mongo 、mysql 的 DBA ,以及大数据 ETL 的开发工作。对 NEWSQL 以及云原生分布式数据库具有浓厚的兴趣爱好。
爱可生开源社区
2022/04/06
1K0
SQL审核 |  SQLE 二次开发环境搭建
猫头虎分享 AIGC 时代:新项目如何快速基于 IDEA 和 ChatGPT 搞定 Spring Boot 3 + Vue 3 全栈开发环境搭建
在 AIGC(生成式 AI) 时代,开发者不仅需要快速完成项目的原型开发,还要高效搭建一个灵活、可扩展的全栈开发环境。今天我们将带你一步步搭建一个 前后端分离 的全栈项目,后端使用 Spring Boot 3,前端使用 Vue 3。通过结合 IntelliJ IDEA 和 ChatGPT,你将能轻松完成一个标准的全栈开发环境,从而实现快速上线和开发。即便是初学者,跟随我们的教程,也能成功创建并运行一个完整的 Spring Boot + Vue 3 项目!让我们开始吧!
猫头虎
2024/11/30
2060
猫头虎分享 AIGC 时代:新项目如何快速基于 IDEA 和 ChatGPT 搞定 Spring Boot 3 + Vue 3 全栈开发环境搭建
腾讯云服务器搭建个人博客的实践[域名备案 + 项目]
有学生优惠的话还是挺便宜的,我买的时候一台轻量应用服务器一年 108,加 8 块还能注册一个域名。实名认证后购买,备案。域名也要实名认证和备案,域名实名认证后 72 小时才能备案。
宇宙无敌暴龙战士之心悦大王
2023/04/10
3.6K0
结合 qws 和 qbt ,本地开发环境搭建
serena
2017/09/08
1.8K0
结合 qws 和 qbt ,本地开发环境搭建
简化部署流程:Rainbond让Jeepay支付系统部署更轻松
在如今的开发环境中,部署一套像 Jeepay 这样的 Java 支付系统往往需要开发者面对繁琐的配置、依赖环境管理以及服务的高可用性保障,手动部署和运维变得异常艰巨和费时。然而,借助 Rainbond 这样的云原生 PaaS 平台,这一过程变得前所未有的简单。通过 Rainbond 的“点点点”式应用管理和自动化运维功能,开发者可以轻松完成 Jeepay 系统的部署,极大减少了传统的部署难度和复杂性,让你更专注于业务的快速迭代和创新。
Rainbond开源
2024/10/08
1630
Vue部署nginx中
安装步骤 安装前环境准备 1:下载nginx安装包nginx-1.17.5(当前最新),并上传到服务器上 这样上传到/root/
丁D
2022/08/12
5830
Vue部署nginx中
制作包含自定义rancher/ui的docker镜像
但如果我们想要对rancher的ui做一些自定义的定制,除了使用官方推荐的修改ui接口外,能否将自定义的UI打也打包成一个镜像。
拿我格子衫来
2022/01/24
8510
制作包含自定义rancher/ui的docker镜像
用 Vue 和 Django 快速搭建前后端分离项目
Web 开发中前后端分离已经是常规性做法,但是不少初学者不太熟悉如何前后端分离,搭建 Demo 的时候遇到的问题也比较多,今天就来分享一下如何用 Vue 和 Django 快速搭建前后端分离项目。
somenzz
2022/10/25
5.1K0
用 Vue 和 Django 快速搭建前后端分离项目
Vue+Koa2 前后端分离项目线上部署
昨天尝试部署一个 Vue+Koa2 的前后端分离项目,没想到因为前端项目部署的问题,卡了一整天,今天才终于找到了问题所在,成功解决。这篇文章主要谈谈:
Chor
2020/08/02
2.6K0
Vue+Koa2 前后端分离项目线上部署
go-admin-基于Gin + Vue + Element UI的前后端分离权限管理系统
系统初始化极度简单,只需要配置文件中,修改数据库连接,系统启动后会自动初始化数据库信息以及必须的基础数据
ccf19881030
2020/10/28
2K0
go-admin-基于Gin + Vue + Element UI的前后端分离权限管理系统
半小时打造前端本地开发环境
最近和朋友聊天,发现我朋友调试前端页面的时候,都是上传svn或者git到测试服务器上调试,这样一来效率非常差,并且在多人的时候会频繁更新测试环境,然后我问我朋友,为什么不本地开发?然后我朋友说因为后端是java,所以本地要搭建java环境那些,很麻烦,也不会。
LamHo
2022/09/26
8020
半小时打造前端本地开发环境
One API本地开发环境搭建
本文介绍如何在本地搭建 One API 开发环境,包括安装 Go 语言和 GoLand IDE,以及如何新建项目和配置数据库信息。通过简明的步骤说明,帮助开发者快速完成基本的开发环境配置,方便进行二次开发和开源贡献。
千寻简
2024/09/26
2800
One API本地开发环境搭建
vue项目代码部署发布总结
在一般情况下,vue项目代码部署发布只需将代码打包后直接上传到服务器即可。但在一个比较彻底的前后端分离业务中,这样的操作就行不通了,这篇文章将重点针对这种情况做分析总结。
挥刀北上
2019/08/06
1.8K0
vue项目代码部署发布总结
react开发环境搭建
要创建一个新的 React 项目,可以使用以下几种方法。以下是使用 create-react-app 工具的标准步骤,这是最常用的方法:
肥晨
2024/09/19
1550
react开发环境搭建
Microi吾码低代码平台:前端源码的本地运行探索
• 对于某些依赖特定工具链或包的项目,可能有不同的要求,但大多数前端项目都可以跨平台运行
DARLING Zero two
2024/12/24
1870
Microi吾码低代码平台:前端源码的本地运行探索
教你玩转Vue和Django的前后端分离
今天中秋节,先祝大家节日愉快,不在父母身边的都打个电话关心一下吧,我们最容易忽略的人恰恰是最爱我们的父母。
somenzz
2020/11/25
3K0
教你玩转Vue和Django的前后端分离
Nest.js 实战 (十五):前后端分离项目部署的最佳实践
本项目是一个采用现代前端框架 Vue3 与后端 Node.js 框架 Nest.js 实现的前后端分离架构的应用。Vue3 提供了高性能的前端组件化解决方案,而 Nest.js 则利用 TypeScript 带来的类型安全和模块化优势构建了一个健壮的服务端应用。通过这种技术栈组合,我们不仅实现了快速开发,同时也保证了应用的可维护性和扩展性。
白雾茫茫丶
2024/10/18
3840
Nest.js 实战 (十五):前后端分离项目部署的最佳实践
推荐阅读
相关推荐
构建rancher自定义ui的前端镜像
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验