Рубрики
Без рубрики

10 новых функций AWS Amplify для проверки

Моя команда в AWS выпускала кучу новых функций, которые делают AWS усилить лучше, чем когда -либо. Здесь … с меткой AWS, JavaScript.

Моя команда в AWS выпускала Тон новых функций, которые делают AWS Amplify лучше, чем когда-либо. Вот десять вещей, выпущенных в прошлом году, которыми я лично взволнован, и это ускорит ваши рабочие процессы разработки!

1. Следующая поддержка

Next.js является последним и лучшим в фреймворках JavaScript. Это позволяет обоим Статическое генерация сайта и рендеринг на стороне сервера , что делает ваши сайты более эффективными, что приводит к лучшему опыту для ваших клиентов. Amplify добавила поддержку для next.js-вы можете развернуть серверные рендерированные и инкрементные статические регенерированные приложения для усиления хостинга, добавить ресурсы Amplify Backend, а затем вы можете использовать библиотеки Amplify JavaScript для рендеринга на стороне сервера.

В пределах getserversideprops Например, вы можете использовать withssrcontext Функция, чтобы позволить вашему коду javaScript работать на сервере вместо браузера.

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

Тогда все, что вам нужно сделать для развертывания, это:

  1. Создать учетную запись AWS Если у вас его еще нет.

  2. Перейдите к Консоль Amplify

  3. Нажмите на Orange Подключить приложение кнопка.

  4. Выберите GitHub в Из вашего существующего кода меню и нажмите Продолжать

  1. Введите имя вашего GitHub Repo, которое вы только что создали (оно должно автозаполнить!), А затем нажмите следующий

  1. Настройки сборки будут автоматически заполнять, и поэтому вы можете просто нажать Следующий на Настройте настройки сборки

  2. Нажмите Сохранить и развернуть Анкет

Не требуется пользовательских настроек-это создаст функцию AWS Lambda@Edge за кулисами, чтобы вы могли выполнить рендеринг на стороне сервера.

Если вы хотите прочитать полный учебник о том, как реализовать это в своем приложении, Проверь это!

2. Войти в Apple

Многие разработчики должны интегрировать «войти в Apple» в свои приложения, чтобы пользователи могли использовать свои предварительно созданные учетные записи Apple вместо того, чтобы создавать его с нуля. Вы можете использовать интерфейс Amplify Admin или интерфейс командной строки, чтобы включить вход с Apple и связать его с учетной записью разработчика Apple, а затем вы можете использовать библиотеки Amplify для реализации потока аутентификации Frontend!

Проверьте этот учебник Узнать больше.

3. Amplify Предварительный просмотр разработчика GEO

Знаете ли вы, что вы можете создавать карты с Amplify? Прямо сейчас Amplify Geo находится в режиме предварительного просмотра разработчика – вы можете создать карту, а затем добавить к ней маркеры и поиск на основе местоположения.

Чтобы создать карту, сначала создайте HTML -элемент, чтобы прикрепить его.

Затем вы можете использовать вспомогательные функции для создания карты с несколькими строками кода!

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. Хранилище данных Multi-Auth

AWS Amplify DataStore позволяет создавать онлайн и офлайн -доступные данные без дополнительного кода на вашем конце. Это очень полезно для многих Офлайн -шаблоны данных и мобильные приложения.

Он также имеет поддержку для добавления различных правил авторизации, чтобы различные пользователи могли быть разрешены или ограничены выполнением определенных действий. Например, вы можете хотеть, чтобы администраторы смогли удалять данные, постоянный пользователь, чтобы иметь возможность создавать данные, а затем неавтотиционировали пользователей для чтения данных. По состоянию на несколько месяцев назад DataStore поддерживает несколько типов авторизации, как этот пример!

Используя пользовательский интерфейс администратора, вы можете добавить различные правила авторизации для различных типов пользователей:

Если вы заинтересованы в полном учебном пособии о том, как интегрировать это в свое приложение, посетите этот учебник Анкет

5. Переменные окружающей среды и секреты

Вы можете создать функции AWS Lambda, используя Amplify, либо в пределах API REST, либо за его пределами. Теперь вы можете добавить переменные окружающей среды и секреты в свои функции – я использовал это для Создайте функцию, которая будет создавать учетную запись пользователя каждый раз, когда они покупали элемент с моего сайта с помощью 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. Admin UI Data Explorer

Как инженер -программист, я не могу сказать вам, сколько раз мне приходилось создавать вторичное приложение администратора для управления данными. Пользовательский интерфейс Amplify Admin решает эту проблему, автоматически генерируя для вас! Вы можете управлять данными приложений, используя его проводник данных. Вы можете выполнить все операции CRUD в данных и даже управлять пользователями вашего приложения!

Вот полный учебник по использованию пользовательского интерфейса администратора.

7. Посев данных

Чтобы продолжать работать с удивительными функциями пользовательского интерфейса администратора, вы также можете автоматически генерировать семенные данные для ваших приложений. Часто вам понадобятся тестовые данные, когда вы разрабатываете свое приложение, чтобы убедиться, что оно работает, как и было обещано. Вы можете автогенерировать эти данные с помощью пользовательского интерфейса администратора! Вы можете выбрать, сколько строк сгенерировать, а затем он будет использовать типы данных ваших полей для генерации данных!

8. DataStore Selective Sync and Sort

DataStore позволяет вашим данным быть доступным онлайн и офлайн. В браузере он хранит ваши данные в IndexedDB по умолчанию. При этом иногда каждый пользователь не нуждается в доступе ко всем данным, или только некоторые данные приложения должны быть доступны в автономном режиме. Вы можете настроить селективную синхронизацию, чтобы синхронизировать только некоторые данные локально.

Если вы хотите сохранить только данные, связанные с определенным идентификатором пользователя, вы можете настроить хранилище данных, подобное SO:

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. Усилить трепетание

Я буду первым, кто признает, что я настоящий веб -разработчик и действительно не имею мобильных знаний. Тем не менее, я очень рад Amplify выпустить поддержку Flutter. Флаттер допускает кроссплатформенную разработку, и, похоже, он набирает пар в сообществе.

Вот учебник о том, как начать с Amplify и Flutter!

10. Усилить контейнеры

Таким образом, Amplify уже имеет большую поддержку для без серверных функций и API GraphQL, но иногда вам нужно перенести существующее приложение, чтобы Amplify. Кроме того, иногда вам нужно иметь длительные задачи, которые не встроены в функции Lambda. Или вы хотите написать полное приложение Django или Rails, которое использует кучу других библиотек, которые могут плохо интегрироваться в функцию Lambda. Ну, хорошие новости! Amplify поддерживает контейнеры AWS Fargate! Вы можете развернуть все, что работает в контейнере Docker в Amplify.

Во-первых, вам нужно разрешить Amplify создавать API на основе контейнеров, работая Amplify Configure Project а потом:

? 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//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 развернуть! Вы можете настроить свой собственный DockerFile и принести свой собственный бэкэнд!

Вывод

Спасибо за проверку этих функций! Если у вас есть какие -либо отзывы о них, я бы хотел услышать. Следите за обновлениями, чтобы скоро появиться.

Оригинал: “https://dev.to/aws/10-new-aws-amplify-features-to-check-out-4291”

Читайте ещё по теме: