为 AWS 引入全新全栈 TypeScript DX

我们听到开发人员一次又一次地抱怨同样的痛点：难以将应用的前端与后端集成，需要在日常工作中应对不断扩展的技术范围，并且难以驾驭众多云服务。虽然后端即服务产品提供了便捷的入门途径，但随着公司规模的扩大，开发人员往往需要迁移到其他产品。因此，我们从头开始重新构建了AWS Amplify，以直接解决前端开发人员在日常工作中面临的这些挑战。

我们非常高兴地宣布推出全新的 Amplify 体验，旨在让前端开发者仅使用 TypeScript 即可构建全栈、云端驱动的应用。让我们深入了解第二代 Amplify 的魅力！

几分钟内即可将您的前端运送至全球

您只需几个快速简便的步骤，即可使用 Amplify Hosting 部署您的应用前端。首先，前往 AWS 控制台，选择您的 Git 提供商，选择您的代码库和分支，更新您想要自定义的任何构建设置，然后点击“保存并部署”。几分钟后，您的应用即可全局部署！您可以按照以下步骤托管使用 Next.js、Nuxt、Astro 和 Vite 等框架构建的静态或服务器端渲染应用。

快速从前端过渡到全栈

当您创建一个新的 Amplify 应用程序时，您将获得一些为您搭建的文件，您可以在其中保存后端代码。

├── amplify/
│   ├── auth/
│   │   └── resource.ts
│   ├── data/
│   │   └── resource.ts

在这些文件中，您可以编写 TypeScript 代码来创建应用后端。您可以使用以下代码创建数据模型，该模型还会为您的数据设置授权规则。

// amplify/data/resource.ts
import { a, defineData, type ClientSchema } from '@aws-amplify/backend';

/* Create a data model with two fields, `content` and `done`.
The default authorization mode is apiKey -- meaning anyone
authenticated using an API key can create, read, update, and
delete todos. */


const schema = a.schema({
  Todo: a.model({
      content: a.string(),
      isDone: a.boolean()
    })
    .authorization(allow => [allow.publicApiKey()])
});

// Used for code completion / highlighting when making requests from frontend
export type Schema = ClientSchema<typeof schema>;

// defines the data resource to be deployed
export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: 'apiKey',
    apiKeyAuthorizationMode: { expiresInDays: 30 }
  }
});

然后，您可以使用 Amplify 客户端库与应用程序前端的数据模型进行交互，例如列出所有待办事项，您可以编写如下代码：

import type { Schema } from "../amplify/data/resource";
import { generateClient } from "aws-amplify/data";

const client = generateClient<Schema>();

const fetchTodos = async () => {
    const { data: items, errors } = await client.models.Todo.list();
};

Amplify 拥有为许多不同框架和语言编写的库 - 从针对移动开发人员的 Swift、Android 和 Flutter 到针对 Next.js 应用程序的 SSR 功能。

您可以对身份验证执行类似的操作！以下代码定义并配置了一个身份验证资源，新用户将收到一封主题为“欢迎使用 Amplify 🚀”的验证邮件。

import { defineAuth } from "@aws-amplify/backend"

export const auth = defineAuth({
  loginWith: {
    email: {
      verificationEmailSubject: "Welcome to Amplify 🚀"
    },
  },
})

然后，您可以使用withAuthenticator更高阶的 React 组件来创建具有登录和注册功能的完整用户身份验证流程！

import { Authenticator } from '@aws-amplify/ui-react'

function App() {
  return (
    <Authenticator>
      <h1>You can't see this until you log in!</h1>
    </Authenticator>
  )
}

export default App

您可以在应用中以类似的方式创建无服务器函数和文件存储资源。部署时只需编写git push代码即可！

与你的团队合作，而不是对抗

在开发 Amplify 应用时，您可以运行沙盒，每当您更改后端代码时，它都会自动快速重新部署您的云资源。团队中的每位开发人员都将拥有自己的沙盒，这样在迭代过程中就不会互相覆盖。

npx ampx sandbox

您还可以为项目中的每个 Git 分支设置部署环境 - 例如dev，prod，和my-new-feature。您可以在部署到生产环境之前，在隔离的环境中测试更改！

Amplify 现在建立在 AWS 云开发工具包 (AWS CDK) 之上，因此您可以连接到 Amplify 本身不支持的服务 - 例如用于 AI/ML 的 Amazon Bedrock！

尝试一下！

要了解有关 Amplify 的更多信息，请尝试我们的快速入门教程之一，它将指导您完成创建全栈 Amplify 应用程序的步骤。

文章来源：https://dev.to/aws/introducing-a-new-fullstack-typescript-dx-for-aws-1ap9