如何在 S3 托管的客户端中使用 API 网关的端点 URL？答案

【问题标题】：How to use endpoint URL for API Gateway in client hosted at S3?如何在 S3 托管的客户端中使用 API 网关的端点 URL？
【发布时间】：2018-07-04 10:39:44
【问题描述】：

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

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

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

【问题讨论】：

标签： serverless-framework

【解决方案1】：

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

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

这里是您可以做的事情的简要概述。

以阶段作为参数（测试、产品）开始构建过程
使用给定的阶段输入参数部署一个或多个 AWS Lambda 函数
对于每个部署的功能，使用AWS CLI 或读取无服务器部署的输出以获取部署的每个网关的 URL
使用这些网关 URL 作为参数在您的 SPA 配置中进行变量替换，从而将配置中的变量替换为实际 URL
完成对您的 SPA 应用程序的任何其他预处理（缩小、散列等）
将 SPA 代码库部署到 S3

【讨论】：

【解决方案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

【讨论】：