Akamai Cloud Manager开发指南：构建高效Linode服务管理界面-开发者社区

Akamai Cloud Manager开发指南：构建高效Linode服务管理界面

【免费下载链接】managerThe Akamai Cloud Manager is an open-source, single-page application serving as the official UI for interacting with the Linode API. It is trusted by hundreds of thousands of customers to manage their Linode services.项目地址: https://gitcode.com/gh_mirrors/ma/manager

Akamai Cloud Manager是一个开源的单页应用程序，作为与Linode API交互的官方UI，被数十万客户用于管理他们的Linode服务。本指南将帮助开发者快速入门并掌握构建高效管理界面的核心技能。

快速入门：搭建开发环境

要开始使用Akamai Cloud Manager进行开发，首先需要完成以下步骤：

克隆仓库：

git clone https://gitcode.com/gh_mirrors/ma/manager

创建OAuth应用：访问cloud.linode.com/profile/clients，添加一个OAuth应用，设置回调URL为http://localhost:3000/oauth/callback，并勾选"Public"选项。
配置环境变量：在packages/manager目录下，复制.env.example到.env，并设置REACT_APP_CLIENT_ID为上一步获取的OAuth应用ID。

安装依赖：

# 安装Node.js 22.19 LTS curl https://get.volta.sh | bash volta install node@22.19 # 安装pnpm v10 volta install pnpm@10 # 安装项目依赖 pnpm bootstrap

启动开发服务器：
```
pnpm dev
```
Cloud Manager将运行在http://localhost:3000。

Akamai Cloud Manager开发环境界面展示

项目结构解析

Akamai Cloud Manager采用monorepo结构，主要包含三个核心包：

api-v4：Linode API的JavaScript封装，发布在NPM上
manager：Cloud Manager主应用（cloud.linode.com）
validation：用于验证API请求的验证模式

项目结构如下：

ma/manager/ ├── docs/ # 项目文档 ├── packages/ │ ├── api-v4/ # API封装 │ ├── manager/ # 主应用 │ └── validation/ # 验证模式 └── scripts/ # 辅助脚本

核心目录详解

api-v4包(packages/api-v4/)：

/src：应用代码，按API部分划分目录（如/account、/domains、/linodes）
每个子目录包含API请求方法、TypeScript类型定义和导出文件

manager包(packages/manager/)：

/src/components：可复用React组件
/src/features：应用功能代码
/src/queries：使用React Query和api-v4获取数据的代码
/src/utilities：通用工具函数

数据获取与状态管理

Cloud Manager通过api-v4包与Linode API交互，推荐使用React Query进行数据获取和状态管理。

使用React Query获取数据

创建查询钩子：

// src/queries/profile.ts import { useQuery } from "@tanstack/react-query"; import { getProfile } from "@linode/api-v4"; export const useProfile = () => useQuery({ queryKey: ["profile"], queryFn: getProfile });

在组件中使用：

import { useProfile } from "src/queries/profile"; const UsernameDisplay = () => { const { loading, error, data: profile } = useProfile(); if (loading) return <span>Loading...</span>; if (error) return <span>Error loading profile</span>; return <span>Username: {profile.username}</span>; };

React Query自动处理加载状态、错误处理和数据缓存，相比传统的Redux Thunks模式大大简化了代码。

Akamai Cloud Manager数据获取流程示意图

构建新功能的最佳实践

创建新组件

在/packages/manager/src/components目录下创建新组件，遵循以下结构：

ComponentName/ ├── ComponentName.tsx # 组件代码 ├── ComponentName.test.tsx # 单元测试 ├── ComponentName.stories.mdx # Storybook故事 └── index.ts # 导出组件

添加新功能模块

在/packages/manager/src/features目录下创建新目录
添加路由配置到src/MainContent.tsx
更新导航菜单src/components/PrimaryNav

API集成流程

在api-v4包中添加请求处理和类型定义
在validation包中添加验证模式（如需要）
创建React Query钩子
在功能组件中使用新的查询钩子

生产构建与部署

要创建生产环境构建并本地运行：

pnpm install pnpm run --filter @linode/validation build pnpm run --filter @linode/api-v4 build pnpm run --filter linode-manager build pnpm run --filter linode-manager start:ci

构建结果将输出到packages/manager/build目录，可通过http://localhost:3000访问。