无服务器 Web 应用架构

Question

我目前正在使用无服务器设计一个简单的无服务器 Web 应用程序。

我目前的预期筹码是；

API 网关
拉姆达
DynamoDB
静态单页应用程序

我遵循了一些使用 Serverless Framework 构建无服务器 API、Lambda 和 DynamoDB 的教程，并且构建了我的单页应用程序，但是现在它们是 2 个独立的实体。

我现在要做的是将静态站点 (nodejs) 放入与我的 API、Lambda 和 DynamoDB 相同的项目中，并使用无服务器框架来控制部署，但我正在努力寻找指导；

你如何在无服务器中表示静态网站部分框架
如何最好地托管该静态网站（例如 s3 静态网站托管还是其他选择？）
如何最好地引用正在生成的 API 网关 URL 同时进行部署（例如通过无服务器框架）

任何人都可以提供有关这应该如何工作的任何见解，或者可以为我指明一些好的方向 blogs/resources？

亲切的问候，约翰

Answer 1

我已经完成了几乎相同的架构并在 s3 上托管了单页应用程序。您可以做的是为 api 网关设置云端，然后将 api.yourDomain.com 指向该云端。您还需要在 api 上启用 cors。

此插件会为您设置域和云端：

https://github.com/amplify-education/serverless-domain-manager

我不确定您的项目要求，但如果您想更快地提供静态文件，设置 domain->cloudfront->s3 可能是一个明智的选择。

Answer 2

我有一个用 React 编写的 SPA（单页应用程序）与 REST JSON API 通信，用 nodejs 编写并作为 monolith 托管在 Heroku 上。我迁移到 AWS Lambda 并将整体拆分为 3+ AWS Lambda micro services inside of a monorepo 如果您的 SPA 需要用户登录才能执行任何操作，则以下项目结构很好。我使用了一个 git 存储库，其中每个服务都有一个文件夹：

api
应用程序
www

在每个服务的文件夹中，我有一个 serverless.yml 定义部署到一个单独的 AWS Lambda。每个服务仅映射到 1 个接受所有 HTTP 端点的函数 index。我确实使用了 2 个环境 staging 和 production。我的 AWS Lambda 是这样命名的：

示例-api-staging-index
示例-api-生产-索引
示例-app-staging-index
示例-app-production-index
示例-www-staging-index
示例-www-生产-索引

我使用 AWS Api Gateway's Custom Domain Names 将每个 lambda 映射到 public 域：

api.example.com（休息JSONAPI）
app.example.com（需要登录的单页应用）
www.example.com（服务器端呈现的着陆页）
api-staging.example.com
app-staging.example.com
www-staging.example.com

您可以使用 serverless.yml 资源或插件定义域映射，但您只需执行一次，所以我是从 AWS 网站控制台手动完成的。我的 .com 域托管在 GoDaddy 上，但我将其迁移到了 AWS Route 53 since HTTPS certificates are free.

应用服务

/bundles-production
/bundles-staging
src（React/Angular这里是单页应用）
handler.js
package.json
serverless.yml

应用服务包含一个文件夹/src，其中包含单页应用程序代码。 SPA 是基于环境在我的计算机上以 ./bundles-production 或 ./bundles-staging 本地构建的。构建生成 .js 和 .css 包以及 index.html。当我运行 serverless deploy -v -s production 时，使用 serverless-s3-deploy 插件将文件夹的内容部署到 S3 存储桶。我只定义了 1 个函数，在 serverless.yml 中为所有端点调用（我使用 JSON 而不是 YAML）：

...
    "functions": {

        "index": {
            "handler": "handler.index",
            "events": [
                { "http": "GET /" },
                { "http": "GET /{proxy+}"}
            ]
        },

    },

handler.js 文件 returns 在 /bundles-staging 或 /bundles-production

中定义的 index.html

我使用 webpack 构建 SPA，因为它通过 serverless-webpack 插件与无服务器很好地集成。

api 服务 我使用 aws-serverless-express 来定义所有 REST JSON API 端点。 aws-serverless-express 就像普通的快递，但你不能做一些像 express.static() 和 fs.sendFile() 这样的事情。我最初尝试为每个端点使用单独的 AWS Lambda 函数而不是 aws-serverless-express，但我很快点击了 CloudFormation mappings limit.

www 服务 如果您的单页应用程序的大部分功能都需要登录，最好将 SPA 放在一个单独的域中，并使用 www 域 server-side 呈现针对 SEO 优化的登陆页面。

奖金：

graphql 服务 使用微服务架构可以轻松进行实验。我目前正在重写 graphql using apollo-server-lambda

中的 REST JSON API

Answer 3

这里有一些关于无服务器架构和 Azure 无服务器服务的有意义且值得一读的东西

https://sps-cloud-architect.blogspot.com/2019/12/what-is-serverless-architecture.html

无服务器 Web 应用架构

Serverless Web App Architecture

serverless-framework

serverless-architecture

serverless