チェックアウトする10新しいAWS増幅機能

AWSで私のチームは、新しい機能のトンをリリースしているAWS Amplify これまでよりよく.私が個人的に興奮している、そして、それがあなたの開発ワークフローを速める過去1年で発表される10のものは、ここにあります!

1 .次にJSサポート
次.JSはJavaScriptのフレームワークの最新かつ最大です.両方のstatic site generation and server-side rendering , それはあなたのサイトをより多くのPerformantあなたの顧客のためのより良い経験につながるになります.増幅は、次のサポートを追加しました.あなたは、ホスト側を増幅するためにサーバー側でレンダリングされた増加した静的な再生されたアプリケーションを配備することができて、バックエンド資源を拡大して、あなたがデータをレンダリングするサーバー側のライブラリを使用することができます.
にgetServerSideProps , 例えば、withSSRContext 機能を使用すると、ブラウザの代わりにサーバー上で実行するJavaScriptコードを増幅することができます.

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

次に、展開する必要があるのは以下の通りです.

Create an AWS account あなたがすでに1を持っていないならば.

移動するthe Amplify Console

オレンジをクリックconnect app ボタン.

選択GitHub にFrom your existing code メニュー、および

あなたが作成したGithubレポの名前を入力してください(自動化すべきです).をクリックnext

ビルドの設定が自動化されますので、クリックするだけでnext でConfigure build settings

クリックSave and deploy .

カスタム設定は必要ありませんLambda@Edgeシーンの背後にある関数は、サーバー側のレンダリングを行う.
あなたがアプリケーションでこれを実装する方法についての完全なチュートリアルを読みたいならば、check this out!

アップルとのサイン
多くの開発者は、ユーザーが彼らのあらかじめ作成されたアップルアカウントをゼロから1つを作成するのを使用することができるように、“アップルとのサイン”を統合する必要があります.あなたはアップルとのサインを可能にし、アップルの開発者アカウントにそれを結ぶために、Amplify Admin UIまたはコマンドラインインターフェイスを使用することができますし、フロントエンド認証の流れを実装するためにAmplifyのライブラリを使用することができます!

チェックアウトthis tutorial もっと学ぶ.

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

を増幅する方法についての詳細を読むことができますin the docs .

4 .データストアマルチ認証
AWSを増幅Datastoreは、オンラインでオフラインで利用可能なデータをあなたの最後に余分なコードを作成することができます.これは多くのために非常に有用ですoffline data patterns とモバイルアプリ.
また、別のユーザーが許可することができますまたは特定のアクションを実行から制限されるように、さまざまな認証規則を追加するためのサポートをしています.たとえば、adminsはデータを削除することができ、通常のユーザがデータを作成することができ、その後、認証されていないユーザがデータを読むことができます.数ヶ月前の時点で、Datastoreはその例のような複数の種類の認証をサポートしています.
Admin UIを使用すると、異なる種類のユーザーに異なる認証規則を追加できます.

あなたがあなたのアプリにこれを統合する方法についての完全なチュートリアルに興味があるならば、チェックしてくださいthis tutorial .

環境変数と秘密
Amplifyを使用してAWSラムダ関数を作成することができます.今、環境変数と秘密をあなたの関数に加えることができますcreate a function that would create a user account every time they bought an item from my site with 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

管理者データエクスプローラ
ソフトウェアエンジニアとして、私はデータを管理するために会社の使用のためのセカンダリ管理アプリを作成しなければならなかった何回を伝えることができない.Amplify Admin UIはあなたのための自動生成によってこの問題を解決します!データエクスプローラーを使用してアプリケーションデータを管理できます.あなたは、データ上のすべてのcrud操作を実行することができますも、あなたのアプリケーションのユーザーを管理する!

Here's a full tutorial on using the Admin UI.

データシーディング
素晴らしい管理UI機能を続けるには、また、自動的にあなたのアプリケーションのシードデータを生成することができます.多くの場合、それは約束通りに動作していることを確認するアプリケーションを開発しているときにデータをテストする必要があります.このデータをadmin UIで自動生成できます.どのように多くの行を生成するを選択することができますし、データを生成するフィールドのデータ型を使用します!


データストア選択的同期とソート
Datastoreはあなたのデータをオンラインでオフラインで利用できるようにします.ブラウザではデフォルトでindex xdbにデータを格納します.それは、時々、各ユーザーがすべてのデータへのアクセスを必要としないか、またはアプリケーションのデータの一部だけがオフラインで利用できるようにする必要があります.あなたは、ローカルのデータの一部を同期するだけで選択的な同期を設定することができます.
特定のユーザーIDに関連付けられたデータを格納したい場合は、次のようにデータストアを設定できます.

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

また、データをソートするためのサポートがあります!したがって、すべてのユーザーをアルファベット順にリストしたい場合は、以下のように質問を書くことができます.

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

Here's DataStore's full documentation.

増幅フラッタ
私は、私が本当のウェブ開発者で、本当に携帯知識がないことを認める最初です.それが言われて、私は本当にフラッターの増幅リリースサポートに興奮している.フラッタは、クロスプラットフォームの開発を可能にし、それがコミュニティで蒸気を拾っているようだ.
Here's a tutorial on how to get started with Amplify and Flutter!

容器包装
だからすでに増幅Serverless関数とGraphql APIの偉大なサポートがありますが、時には増幅するために、既存のアプリケーションを移行する必要があります.また、時々、ラムダ関数によく統合されない長期にわたるタスクを必要とすることもあります.または、あなたはラムダ関数によく統合されないかもしれない他のライブラリの束を使用する完全なdjangoまたはrailsアプリを書きたい.まあ、良いニュース!増幅AWS Fargateコンテナをサポート!Exampler内でDockerコンテナ内で実行するものを展開できます.
まず、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/<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 展開する!独自のDockerFileを設定することができますし、独自のバックエンドをもたらす!

結論
これらの機能をチェックアウトしていただきありがとうございます!あなたがそれらに関するフィードバックがあるならば、私は聞きたいです.より多くの近日公開予定😃.