如何在S3托管的客户端中使用API​​ Gateway的端点URL？

Question

我正在开发一个无服务器的应用程序，该应用程序涉及在S3上托管的SPA客户端，通过API网关在后端调用Lambda函数。

当我使用Servless部署我的Lambda函数时，它打印出端点URL，如：https://ia6dga0can.execute-api.us-east-1.amazonaws.com/stagename/fnname。这很好，但是如何将它与我在S3上托管的客户端代码连接在一起？

我正在寻找一个完全自动化的解决方案，理想情况是不涉及在任何地方手动复制此URL或修改源，使其无法在多个阶段（部署）中使用。

Answer 1

这是一个复杂的问题，需要您对应用程序和体系结构有所了解，但我会尝试为您提供一个可以作为起点的方法的高级答案。

如果您希望这是一个完全自动化的解决方案（这是考虑它的正确方法），那么您需要在流程中添加某种形式的构建工具。这些工具的一些示例可能是gulp或grunt。

以下是您可以做的快速概述。

1. 以舞台作为参数（test，prod）
开始构建过程
2. 使用给定的舞台输入参数
部署一个或多个AWS Lambda函数
3. 对于每个已部署的功能，请使用AWS CLI或读取无服务器部署的输出以获取部署的每个网关的URL
4. 使用这些网关URL作为参数在SPA配置中执行变量替换，以使用实际URL替换配置中的变量
5. 完成SPA应用程序的任何其他预处理（缩小，散列等）
6. 将SPA代码库部署到S3

Answer 2

我也遇到了同样的问题，并通过编写一个自定义插件使用serverless.yml环境变量构建前端来解决了这个问题。如果您想使用该插件，则将其称为serverless-build-client。然后，我使用serverless-finch将内部版本上传到S3。

serverless-build-client很简单；它只是遍历环境变量，并将它们添加到process.env中。这是重要的部分

const environment = this.serverless.service.provider.environment;
if (!environment) {
  return;
}

Object.keys(environment).forEach(variable => {
  process.env[variable] = environment[variable];
});

// Later
spawnSync("yarn", ["build"]);

示例

我有2个独立的无服务器项目：一个用于前端，一个用于后端。部署后端时，堆栈会输出ServiceEndpoint，这是您要引用的基本终结点。

在serverless.yml文件中，我有类似的内容：

plugins:
  - serverless-build-client
  - serverless-finch

provider:
  ...
  environment:
    REACT_APP_ENDPOINT: ${cf:<backend service name>.ServiceEndpoint}

然后在前端，我引用环境变量进行请求

const response = await fetch(`${process.env.REACT_APP_ENDPOINT}/some/api`);

我的部署脚本按此顺序执行命令

// Backend
npx serverless deploy

// Frontend
npx serverless deploy
npx serverless build
npx serverless client deploy