值得一试的 10 项 AWS Amplify 新功能

2025-06-04

值得一试的 10 项 AWS Amplify 新功能

2024 年 6 月 27 日：这篇博文使用 Amplify Gen 1，如果您要启动新的 Amplify 应用程序，我建议您尝试Gen 2！

我的 AWS 团队发布了大量新功能，使AWS Amplify比以往任何时候都更加出色。以下是过去一年发布的十项我个人非常期待的功能，它们将加速您的开发工作流程！

1. Next.js 支持

Next.js 是最新、最强大的 JavaScript 框架。它支持静态站点生成和服务端渲染，从而提升您的网站性能，从而为您的客户带来更佳的体验。Amplify 现已新增对 Next.js 的支持——您可以将服务端渲染和增量静态再生应用部署到 Amplify Hosting，添加 Amplify 后端资源，然后使用 Amplify JavaScript 库在服务端渲染您的数据。

getServerSideProps例如，在 中，您可以使用该withSSRContext函数允许您的 Amplify JavaScript 代码在服务器上而不是浏览器上运行。

export async function getServerSideProps () {
  const SSR = withSSRContext()
  const { data } = await SSR.API.graphql({ query: listParks })
  return {
    props: {
      parks: data.listParks.items
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

然后，您需要做的就是部署：

  1. 如果您还没有AWS 账户，请创建一个。

  2. 导航至Amplify 控制台

  3. 单击橙色connect app按钮。

  4. GitHub在菜单中选择From your existing code，然后单击继续

放大与不同遥控器的接口

  1. 输入您刚刚创建的 GitHub 仓库的名称（它应该会自动填充！）然后单击next

使用 repo 名称放大接口

  1. 构建设置将自动填充，因此您只需next单击Configure build settings

  2. 点击Save and deploy。

无需自定义设置——它将在后台为您创建一个 AWS Lambda@Edge 函数来执行服务器端渲染。

如果您想阅读有关如何在您的应用中实现此功能的完整教程，请查看此处！

2. 使用 Apple 登录

许多开发者需要将“通过 Apple 登录”功能集成到他们的应用中，以便用户可以使用预先创建的 Apple 帐户，而无需从头创建一个。您可以使用 Amplify 管理界面或命令行界面启用“通过 Apple 登录”功能并将其与您的 Apple 开发者帐户绑定，然后使用 Amplify 的库来实现前端身份验证流程！

带有 Apple 登录功能的管理员 UI 界面

查看本教程以了解更多信息。

3. Amplify Geo 开发者预览版

您知道可以使用 Amplify 创建地图吗？目前，Amplify Geo 处于开发者预览模式——您可以创建地图，然后添加标记和基于位置的搜索功能。

要创建地图，首先要创建一个 HTML 元素来附加它。

<div id="map"></div>
Enter fullscreen mode Exit fullscreen mode

然后，您可以使用辅助函数用几行代码创建地图！

import { createMap } from "maplibre-gl-js-amplify"
import "maplibre-gl/dist/maplibre-gl.css"

async function initializeMap() {
    const map = await createMap({
        container: "map",
        center: [-200, 50],
        zoom: 11,
    })
}

initializeMap()
Enter fullscreen mode Exit fullscreen mode

您可以在文档中阅读有关如何实现 Amplify Geo 的更多信息。

4. 数据存储区多重授权

AWS Amplify DataStore 允许您创建在线和离线可用数据，无需额外代码。这对于许多离线数据模式和移动应用程序非常有用。

它还支持添加不同的授权规则，以便允许或限制不同用户执行某些操作。例如，您可能希望管理员能够删除数据，普通用户能够创建数据，未经身份验证的用户能够读取数据。几个月前，DataStore 就支持多种类型的授权，就像上面的例子一样！

使用管理界面，您可以为不同类型的用户添加不同的授权规则：

管理员 UI 界面显示不同的授权规则

如果您对如何将其集成到您的应用程序中的完整教程感兴趣，请查看本教程。

5.环境变量和秘密

您可以使用 Amplify 创建 AWS Lambda 函数，无论是在 REST API 内部还是外部。现在，您可以向函数添加环境变量和密钥——我使用此功能创建了一个函数，该函数每次用户使用 Stripe 从我的网站购买商品时都会创建一个用户帐户。

为此，首先创建一个函数：

➜  next10-blog git:(main) ✗ amplify add function
? Select which capability you want to add: Lambda function (serverless function)
? Provide an AWS Lambda function name: next10bloge53fc67d
? Choose the runtime that you want to use: NodeJS
? Choose the function template that you want to use: Hello World
Enter fullscreen mode Exit fullscreen mode

然后，在高级配置下，您可以添加环境变量和秘密！

? Do you want to configure environment variables for this function? Yes
? Enter the environment variable name: github_user
? Enter the environment variable value: aspittel
? Select what you want to do with environment variables: Im done
? Do you want to configure secret values this function can access? Yes
? Enter a secret name (this is the key used to look up the secret value): github_key
? Enter the value for github_key: [hidden]
? What do you want to do? Im done
Enter fullscreen mode Exit fullscreen mode

然后你就可以在函数中使用它们了！例如：

  const { Parameters } = await (new aws.SSM())
    .getParameters({
      Names: ['github_key'].map(secretName => process.env[secretName]),
      WithDecryption: true
    })
    .promise()
  return Parameters[0].Value
Enter fullscreen mode Exit fullscreen mode

6. 管理界面数据浏览器

作为一名软件工程师，我曾无数次为公司创建辅助管理应用来管理数据。Amplify Admin UI 可以自动为您生成一个管理界面，解决了这个问题！您可以使用其数据浏览器管理应用程序数据。您可以对数据执行所有 CRUD 操作，甚至可以管理应用的用户！

这是有关使用管理 UI 的完整教程。

7. 数据播种

为了继续使用强大的管理界面功能，您还可以自动为应用生成种子数据。在开发应用时，您通常需要测试数据来确保其正常运行。您可以使用管理界面自动生成这些数据！您可以选择要生成的行数，然后它会使用您指定的字段数据类型来生成数据！

8. DataStore 选择性同步和排序

DataStore 允许您的数据在线和离线访问。在浏览器中，它默认将您的数据存储在 IndexedDB 中。然而，有时每个用户不需要访问所有数据，或者只需要部分应用程序数据离线访问。您可以设置选择性同步，仅在本地同步部分数据。

如果您只想存储与特定用户 ID 关联的数据，则可以像这样配置 DataStore：

DataStore.configure({
  syncExpressions: [syncExpression(Song, u => u.userID('eq', '123'))]
})
Enter fullscreen mode Exit fullscreen mode

此外，还支持数据排序！所以，如果你想按字母顺序列出所有用户，你可以编写如下查询：

const posts = await DataStore.query(User, Predicates.ALL, {
  sort: s => s.username(SortDirection.ASCENDING)
})
Enter fullscreen mode Exit fullscreen mode

这是 DataStore 的完整文档。

9. 放大 Flutter

我得承认，我是一名真正的 Web 开发者，对移动端一无所知。话虽如此，Amplify 发布对 Flutter 的支持让我非常兴奋。Flutter 支持跨平台开发，而且它在社区中似乎越来越受欢迎。

这是有关如何开始使用 Amplify 和 Flutter 的教程！

10. 扩大容器

Amplify 已经对无服务器函数和 GraphQL API 提供了强大的支持，但有时您需要将现有应用迁移到 Amplify。此外，有时您需要执行长时间运行的任务，而这些任务无法很好地集成到 Lambda 函数中。或者，您想编写一个完整的 Django 或 Rails 应用，该应用使用了一堆其他库，而这些库可能无法很好地集成到 Lambda 函数中。好消息！Amplify 支持 AWS Fargate 容器！您可以在 Amplify 中部署任何在 Docker 容器中运行的应用程序。

首先，您需要通过运行amplify configure project以下命令允许 Amplify 创建基于容器的 API：

? Which setting do you want to configure? Advanced: 
> Container-based deployments
? Do you want to enable container-based deployments? 
> Yes
Enter fullscreen mode Exit fullscreen mode

然后您就可以创建一个 API！

amplify add api

? Please select from one of the below mentioned services:
> REST
? Which service would you like to use
> API Gateway + AWS Fargate (Container-based)
? Provide a friendly name for your resource to be used as a label for this category in the project:
> containerb5734e35
? What image would you like to use
> ExpressJS - REST template
? When do you want to build & deploy the Fargate task
> On every "amplify push" (Fully managed container source)
? Do you want to restrict API access
> No
Enter fullscreen mode Exit fullscreen mode

然后，你就可以进入你的amplify/backend/api/<your-api-name>/src/index.js文件，添加你的应用代码了！例如，对于 Express 应用，你可以这样写：

const express = require("express");
const bodyParser = require('body-parser');
const port = process.env.PORT || 3001;

const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// Enable CORS for all methods
app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*")
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With,Content-Type, Accept")
  next()
})

app.get("/", async (req, res, next) => {
  try {
    res.contentType("application/json").send({ 
      "hello": "world"
    })
  } catch (err) {
    next(err)
  }
})

app.listen(port, () => {
  console.log('Example app listening at http://localhost:' + port)
})
Enter fullscreen mode Exit fullscreen mode

然后，您就可以运行amplify push部署了！您可以配置自己的 Dockerfile 并自带后端！

结论

感谢您试用这些功能！如果您有任何反馈，我很乐意听取。敬请期待即将推出的更多功能😃。

文章来源：https://dev.to/aws/10-new-aws-amplify-features-to-check-out-4291
Devto 翻译
PREV
使用 AWS Amplify 将 Google 登录添加到您的 Web 应用程序
NEXT
无服务器解决了什么问题？