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

Question

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

当我使用Servless部署我的Lambda函数时，它会输出端点URL，如： https://ia6dga0can.execute-api.us-east-1.amazonaws.com/stagename/fnname ：//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