AWS Amplify10个新的功能

xcvxvxc
408 阅读7分钟

我在AWS的团队一直在发布大量的新功能，使AWS Amplify比以前更好。以下是过去一年中发布的我个人感到兴奋的十项功能，这些功能将加速你的开发工作流程!

1.支持Next.js

Next.js是最新和最伟大的JavaScript框架。它允许静态网站生成和服务器端渲染，这使得你的网站性能更强，为你的客户提供更好的体验。Amplify已经增加了对Next.js的支持 -- 你可以将服务器端渲染和增量静态再生的应用程序部署到Amplify主机，添加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
    }
  }
}

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

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

  2. 导航到Amplify控制台

  3. 点击橙色的connect app 按钮

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

Amplify interface with different remotes

  1. 键入你刚刚创建的GitHub repo的名称（它应该是自动填充的！），然后点击next

Amplify interface with name of repo

  1. 构建设置将自动填充，因此你可以直接点击next 上的Configure build settings

  2. 点击Save and deploy 。

不需要自定义设置 -- 它将在幕后为你创建一个AWS Lambda@Edge函数来完成服务器端的渲染。

如果你想阅读关于如何在你的应用程序中实现这一点的完整教程，请查看这个!

2.用苹果登录

很多开发者需要将 "用苹果登录 "整合到他们的应用程序中，这样用户就可以使用他们预先创建的苹果账户，而不是从头开始创建一个。你可以使用Amplify管理界面或命令行界面来启用Sign in With Apple并将其与你的苹果开发者账户绑定，然后你可以使用Amplify的库来实现前端认证流程

Admin UI Interface with Sign in with Apple

请看此教程以了解更多

3.Amplify Geo开发者预览

你知道你可以用Amplify创建地图吗？现在Amplify Geo正处于开发者预览模式--你可以创建一个地图，然后在上面添加标记和基于位置的搜索。

要创建一个地图，首先要创建一个HTML元素，把它附加在上面

<div id="map"></div>

然后，你可以使用辅助函数，用几行代码创建一个地图

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()

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

4.数据存储多重认证

AWS Amplify DataStore允许你创建在线和离线的可用数据，而你的终端没有额外的代码。这对许多离线数据模式和移动应用程序是超级有帮助的。

它还支持添加不同的授权规则，这样就可以允许或限制不同的用户执行某些操作。例如，你可能希望管理员能够删除数据，普通用户能够创建数据，然后未经认证的用户能够读取数据。从几个月前开始，DataStore支持多种类型的授权，就像那个例子一样!

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

如果你对如何将其整合到你的应用程序中的完整教程感兴趣，请查看这个教程。

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

然后，在高级配置下，你可以添加环境变量和秘密！然后你可以在函数中使用它们。

? 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

然后你可以在你的函数中使用它们!比如说。

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

6.管理界面数据资源管理器

作为一个软件工程师，我无法告诉你有多少次我不得不为公司创建一个二级管理应用程序来管理数据。Amplify管理界面通过为你自动生成一个来解决这个问题!你可以使用其数据资源管理器来管理应用程序的数据。你可以对数据进行所有的CRUD操作，甚至可以管理你的应用程序的用户!

这里有一个关于使用Admin UI的完整教程。

7.数据播种

为了继续保持管理界面的强大功能，你还可以为你的应用程序自动生成种子数据。通常情况下，当你开发你的应用程序时，你需要测试数据，以确保它按照承诺工作。你可以用Admin UI自动生成这些数据。你可以选择要生成多少行，然后它将使用你的字段数据类型来生成数据!

8.DataStore的选择性同步和排序

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

如果你想只存储与某个用户ID相关的数据，你可以这样配置DataStore。

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

此外，还支持对数据进行排序!所以，如果你想按字母顺序列出所有的用户，你可以这样写一个查询。

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

这里是DataStore的完整文档。

9.扩增Flutter

我将是第一个承认我是一个真正的网页开发人员，真的没有移动知识。这就是说，我对Amplify发布对Flutter的支持感到非常兴奋。Flutter允许跨平台开发，而且它在社区中似乎正在兴起。

这里有一个关于如何开始使用Amplify和Flutter的教程!

10.Amplify容器

所以Amplify已经对无服务器函数和GraphQL APIs有了很好的支持，但有时你需要将现有的应用程序迁移到Amplify上。另外，有时你需要有长期运行的任务，而这些任务并不能很好地整合到Lambda函数中。或者你想写一个完整的Django或Rails应用程序，它使用了一堆其他的库，可能不能很好地集成到Lambda函数中。那么，好消息来了!Amplify支持AWS Fargate Containers!你可以在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

然后你就可以创建一个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

然后，你可以进入你的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)
})

然后，你可以运行amplify push ，进行部署!你可以配置你自己的Docker文件，并带来你自己的后端!

总结

感谢你对这些功能的检查!如果你对它们有任何反馈，我很乐意听到。请继续关注更多即将到来的😃。

avatar
文章
阅读
粉丝