AWS API Gateway 无服务器开发人员门户 - 如何本地设置和更改 UI？

Question

我已从 - https://github.com/awslabs/aws-api-gateway-developer-portal 在我的本地计算机中克隆了 AWS 开发人员门户。 我的要求是，我需要更改 AWS 开发人员门户的 UI 并用客户端品牌对其进行标记，提供不同的页眉或页脚以及其他 UI 相关的更改。 UI 采用 React JS，npm run 和 npm install 没有帮助。我陷入困境，因为我无法在本地运行项目并查看 UI 或进行任何更改。 我可以在本地设置 AWS 开发人员门户并根据客户的要求进行自定义吗？

Answer 1

请按照以下步骤在 Windows 本地计算机中运行此开发门户：

步骤：

Install Git [2], Node v14 [3], AWS CLI [4], AWS SAM CLI [5].
Configure access key and secret key for AWS CLI using following command [6]:
$ aws configure

一旦按下回车键，您将必须添加以下信息：

AWS Access Key ID: AWS Secret Access Key: Default region name: Default output format: json

我发现了一个与 Windows 相关的问题，其中 npm 的子进程无法正常工作 [7]。为了缓解这个问题，我发现 npm.cmd 可以正常工作。 转到“aws-api-gateway-developer-portal\scripts”中的 npm.js 文件 pm.js”并将第 11 行的“npm”替换为“npm.cmd” npm.js 中的第 11 行应如下所示：

await run('npm.cmd', process.argv.slice(2), { action: 'Execution', target, cwd: resolved })
Go to run.js file present at "aws-api-gateway-developer-portal\scripts\run.js" and replace "npm" at line number 14 to "npm.cmd"
Your line number 14 in run.js should be as follows:
'npm.cmd', ['run', task, '—', ...args],
Now as per the documentation kindly copy the "example-dev-deployer.config.js" to "deployer.config.js" and replace following values:
==> Replace "YOUR_LAMBDA_ARTIFACTS_BUCKET_NAME" with your s3 bucket name ==> Replace "CUSTOM_PREFIX" with any prefix you like. (For example: test)

Run following command inside aws-api-gateway-developer-portal folder:
$ node run install release

我注意到 sam cli 没有正确部署模板，因此在运行上一个命令后找到“sam deploy”并复制它。 这是 sam 部署命令示例：

$ sam deploy --template-file C:\Users\Administrator\Desktop\demo\aws-api-gateway-developer-portal\cloudformation\packaged.yaml --stack-name dev-portal0 --capabilities CAPABILITY_NAMED_IAM --parameter-overrides StaticAssetRebuildToken=XXXXXXXXXXX StaticAssetRebuildMode=overwrite-content DevPortalSiteS3BucketName=test-dev-portal-static-assets0 ArtifactsS3BucketName=test-dev-portal-artifacts0 DevPortalCustomersTableName=DevPortalCustomers0 DevPortalPreLoginAccountsTableName=DevPortalPreLoginAccounts0 DevPortalFeedbackTableName=DevPortalFeedback0 CognitoIdentityPoolName=DevPortalIdentityPool0 LocalDevelopmentMode=true CognitoDomainNameOrPrefix=test-auth0 —s3-bucket testbucket

请将packaged.yaml替换为template.yaml。以下是您应该执行的示例命令：

$ sam deploy --template-file C:\Users\Administrator\Desktop\demo\aws-api-gateway-developer-portal\cloudformation\template.yaml --stack-name dev-portal0 --capabilities CAPABILITY_NAMED_IAM --parameter-overrides StaticAssetRebuildToken=XXXXXXXXXXX StaticAssetRebuildMode=overwrite-content DevPortalSiteS3BucketName=test-dev-portal-static-assets0 ArtifactsS3BucketName=test-dev-portal-artifacts0 DevPortalCustomersTableName=DevPortalCustomers0 DevPortalPreLoginAccountsTableName=DevPortalPreLoginAccounts0 DevPortalFeedbackTableName=DevPortalFeedback0 CognitoIdentityPoolName=DevPortalIdentityPool0 LocalDevelopmentMode=true CognitoDomainNameOrPrefix=test-auth0 —s3-bucket testbucket

现在运行此命令，您应该看到堆栈正在部署。

最后运行“node run start”命令，它将打开您的默认浏览器。等待一段时间，直到脚本加载，然后您应该看到开发人员门户在本地运行。 请注意 - SAM 部署命令中给出的配置和名称应与您在deployer.config.js 文件中给出的相同。否则会抛出错误。

Answer 2

由于 https://github.com/awslabs/aws-api-gateway-developer-portal 现在处于维护模式，您最好使用 apiable.io 您可以更改 API 开发人员门户的 UI 以应用您的客户品牌直接位于：门户 > 主题。