IDP之Backstage - 环境搭建

0. 目录

      • 1. 前言
      • 2. 环境准备(Windows10下)
        • 2.1 安装nvm
        • 2.2 git和docker安装
      • 3. 创建模板项目
        • 3.1 典型错误: fails on the `yarn install` step
        • 3.2 再次启动
        • 3.3 验证
      • 4. 相关

1. 前言

本不想写这篇,因为看着官网文档写着挺简单的,但实际操作起来却是步步坑。于是怒而把过程细节重演一次并记录下来,于是就有了这篇。

2. 环境准备(Windows10下)

按照官网给出的Prerequisites,结合自身的实际情况,需要准备如下内容:

  1. Git-for-windows 。 可以同时满足GIT和Linux环境的要求。
  2. nvm - Node Version Manager 。同时满足nodejs和yarn的安装需求;而且可以在多个版本之间自由切换,相较于独立安装nodejs方便不少。
  3. Docker Desktop。Windows下的Docker自然就是选择它了。
2.1 安装nvm

这一步将安装关键的nodejs和yarn。

######################################### 1. 安装
# 如果这一步报错"Could not resolve host: raw.githubusercontent.com", 那就干脆浏览器下载这个install.sh脚本, 然后再本地执行
# 官方说明: https://github.com/nvm-sh/nvm?tab=readme-ov-file#wsl-troubleshooting
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash######################################### 2. 配置
# 以上 install.sh 脚本执行后,不出意外出现如下提示:
#	$ ./install.sh
#	=> Downloading nvm from git to '/c/Users/lqzkc/.nvm'
#	=> Cloning into 'C:/Users/lqzkc/.nvm'...
#	remote: Enumerating objects: 365, done.
#	remote: Counting objects: 100% (365/365), done.
#	remote: Compressing objects: 100% (313/313), done.
#	remote: Total 365 (delta 43), reused 166 (delta 26), pack-reused 0
#	Receiving objects: 100% (365/365), 365.08 KiB | 1.28 MiB/s, done.
#	Resolving deltas: 100% (43/43), done.
#	* (HEAD detached at FETCH_HEAD)
#	  master
#	=> Compressing and cleaning up git repository
#	
#	=> Profile not found. Tried ~/.bashrc, ~/.bash_profile, ~/.zprofile, ~/.zshrc, and ~/.profile.
#	=> Create one of them and run this script again
#	   OR
#	=> Append the following lines to the correct file yourself:
#	
#	export NVM_DIR="$HOME/.nvm"
#	[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
#	
#	=> Close and reopen your terminal to start using nvm or run the following to use it now:
#	
#	export NVM_DIR="$HOME/.nvm"
#	[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm# 2.1 按照上面命令行输出的提示, 创建一个 ~/.profile文件, 并写入其给出的内容; 
vi ~/.profile# 2.2 重新打开git命令行, 执行上述内容
export NVM_DIR="$HOME/.nvm"[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm######################################### 3. 验证
# 验证nvm安装成功
nvm -v# 已经安装了哪些版本的nodejs
nvm ls# 卸载指定版本nodejs
nvm uninstall 16# 当前使用的nodejs版本
nvm current# 安装指定版本nodejs
#	注意:如果你之前配置过nodejs, 可能出现如下提示. 按照提示操作即可.
nvm install 18Downloading and installing node v18.20.2...Downloading https://nodejs.org/dist/v18.20.2/node-v18.20.2-win-x64.zip...######################################################################## 100.0%Computing checksum with sha256sumChecksums matched!Your user’s .npmrc file (${HOME}/.npmrc)has a `globalconfig` and/or a `prefix` setting, which are incompatible with nvm.Run `nvm use --delete-prefix v18.20.2` to unset it.
nvm use 18      # 指定使用指定版本的nodejs
node -v         # 验证node安装成功
npm -v          # 设置默认使用的nodejs版本
nvm alias default 18.20.2######################################### 4. 安装yarn
# https://classic.yarnpkg.com/en/docs/install#windows-stable
npm install --global yarnyarn -v
2.2 git和docker安装

参考上方给出的链接地址下载安装即可。相关的文档一大堆,这里不再重复,避免偏离本文重点。

3. 创建模板项目

相关的官方文档写得挺简单:

# 键入这一条命令, 在弹出的输入行中键入你想要创建的项目名,例如my-backstage-app
npx @backstage/create-app@latest
# 启动项目
#	如果一切顺利, 该命令执行完毕之后浏览器将自动打开 localhost:3000 地址.
cd my-backstage-app
yarn dev
3.1 典型错误: fails on the yarn install step

这应该算是本文出现的最大原因。

解决的方案其实官方文档里已经给出了 —— 安装node-gyp的依赖项pythonvisualstudio2022-workload-vctools
在这里插入图片描述

我这里其实就是将其简化下,并且给出几条优化建议:

  1. 最简单的安装方式自然是如这里建议的:
# 1. 先安装Chocolatey。以管理员权限打开cmd.exe命令行提示
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\binchoco -v   # 验证# 2. 使用Chocolatey安装python和visualstudio2022-workload-vctools
#	注意:这里建议以管理员身份打开powershell,并且架起全局梯子, 节点选美丽国
choco install python visualstudio2022-workload-vctools -y
  1. 另外的方案是分开安装python和visualstudio2022-workload-vctools。很多时候我们是有python编程需求的,所以一般都是建议使用pyenv-win。而对于visualstudio2022-workload-vctools的安装,依然是参考官方文档。
3.2 再次启动
cd my-backstage-app
yarn install
yarn tscyarn dev
3.3 验证

http://localhost:3000/
在这里插入图片描述

4. 相关

  1. backstage-getting-started
  2. isolated-vm#requirements
  3. VSCode - plugin - backstage

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/619971.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机网络 Cisco路由信息协议(RIP)实验

一、实验内容 1、命名 2、关闭域名解释 3、设置路由器接口IP地址 4、根据要求配置RIP以实现所有客户机都能相互通信 5、配置默认路由 二、实验数据处理 1、建立拓扑图 2、PC机地址配置 主机IP地址子网掩码网关PC110.23.1.2255.255.255.010.23.1.1PC210.23.1.3255.255.2…

【MATLAB源码-第27期】基于matlab的QPSK定时同步仿真,采用gardner算法,Costa锁相环。

操作环境: MATLAB 2022a 1、算法描述 QPSK,有时也称作四位元PSK、四相位PSK、4-PSK,在坐标图上看是圆上四个对称的点。通过四个相位,QPSK可以编码2位元符号。图中采用格雷码来达到最小位元错误率(BER) —…

基于springboot的综合成绩管理系统(含源码+sql+视频导入教程+文档+PPT)

👉文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于springboot的综合成绩管理系统2拥有三个角色 管理员:学生管理、班主任管理、班级管理、综合测评管理等 学生:综合测评/德育成绩/课程成绩/体育成绩的登记 班…

Scrapy框架 进阶

Scrapy框架基础Scrapy框架进阶 【五】持久化存储 命令行:json、csv等管道:什么数据类型都可以 【1】命令行简单存储 (1)语法 Json格式 scrapy crawl 自定义爬虫程序文件名 -o 文件名.jsonCSV格式 scrapy crawl 自定义爬虫程…

WinForms 零基础进阶教程:文件操作与 CSV 处理

文章目录 文件操作数据存储与文件操作文件存取的好处文件存取的方式文本文件的写入和读取文本文件的删除、复制和移动 目录的操作文件属性操作文件路径 对话框OpenFileDialog对话框SaveFileDialog对话框对话框中CheckPathExists属性的应用 CSV 文件读写与 DataGridView 进阶Dat…

创新营销利器:淘宝扭蛋机小程序开发全解析

在数字化浪潮的推动下,淘宝扭蛋机小程序的开发成为了一种全新的购物体验。它巧妙地将传统扭蛋机的乐趣与移动技术的便捷相结合,为用户带来了前所未有的惊喜与互动。 淘宝扭蛋机小程序的开发,不仅是一次技术的革新,更是一次购物方…

用于 SQLite 的异步 I/O 模块(二十四)

返回:SQLite—系列文章目录 上一篇:SQLite的PRAGMA 声明(二十三) 下一篇:SQLite、MySQL 和 PostgreSQL 数据库速度比较(本文阐述时间很早比较,不具有最新参考性)(二…

计算机网络——WEB服务器编程实验

实验目的 1. 处理一个 http 请求 2. 接收并解析 http 请求 3. 从服务器文件系统中获得被请求的文件 4. 创建一个包括被请求的文件的 http 响应信息 5. 直接发送该信息到客户端 具体内容 一、C 程序来实现 web 服务器功能。 二、用 HTML 语言编写两个 HTML文件,并…

webpack打包ts代码

前面一篇文章介绍了如何使用ts‘编译器编译ts代码。但是在实际开发中很少直接使用ts编译器编译ts代码,而是配合打包工具来进行编译。本篇文章将介绍如何通过webpack对ts代码进行编译! 生成package.json包 在新开的文件夹下运行以下命令 npm init -y安…

智慧医疗app

智慧医疗app是一套融合物联网、云计算和大数据等技术,以患者数据为中心的医疗服务模式,致力于为患者提供更加便捷、高效的医疗服务。 在线挂号、在线问诊、电子病历记录、健康管理以及药品购买等。患者可以通过app选择医生和挂号时间,并在线…

AI天使汇联合150家顶级基金、战投,征集优秀AI创业项目

鉴于AI天使汇主办的2024年3月期优秀项目征集活动效果超出预期,3月活动最后TOP20路演者中已有多家快速拿到了TS。 路演活动质量受到了AI创业公司和基金/战投伙伴的高度评价,现在开始四月期活动报名! 本期征集活动联合的顶级基金和战投数量增加到了150家…

数据可视化高级技术Echarts(桑基图入门)

目录 一、什么是桑基图 二、基本特征 三、设计注意事项 四、使用Echarts进行初级绘制 1.首先不能忘记五个基本步骤 2.绘制的时需要将图像类型series.type设定为sankey类型。 一、什么是桑基图 桑基图(Sankey diagram),即桑基能量分流图&…