Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Amplify Updates at Amplify Meetup #02
Search
Jaga
November 27, 2020
Technology
0
3.2k
Amplify Updates at Amplify Meetup #02
Amplify Meetup #02で、Amplify Meetup #01からのアップデートに関してお話しした際の資料です。Amplify MeetupのConnpassは
こちら
Jaga
November 27, 2020
Tweet
Share
More Decks by Jaga
See All by Jaga
Nstock QAの旅 / nstock-qa-jouerney
jagaimogmog
2
120
「引き算」で高めるアジリティ / Enhancing Agility through Subtraction
jagaimogmog
4
240
Spring Bootと行レベルセキュリティではじめるマルチテナントアーキテクチャ / Multi-tenant architecture using Row-Level Security
jagaimogmog
4
1.8k
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jagaimogmog
3
560
久しぶりのコミュニティイベントがスクフェス神奈川でよかった/Good to see you Scrum Fest Kanagawa
jagaimogmog
1
490
シードスタートアップがデザインシステムをちいさくはじめてみた / Design System Small Start
jagaimogmog
1
3.5k
AWS Amplify の概要 について簡単なおさらい/AWS Amplify Overview in brief
jagaimogmog
1
1.3k
Starutp.fm AWSでアプリ開発に集中するためのインフラ選定/Starutp.fm How to Focus on App Development using AWS
jagaimogmog
5
1.1k
AmplifyによるGraphQL API開発 / GraphQL Development Using Amplify @Serverless Meetup#19
jagaimogmog
0
1.2k
Other Decks in Technology
See All in Technology
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
140
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
800
型チェック 速度改善 奮闘記⌛
tocomi
1
180
Application Development WG Intro at AppDeveloperCon
salaboy
0
210
マルチモーダル / AI Agent / LLMOps 3つの技術トレンドで理解するLLMの今後の展望
hirosatogamo
39
13k
DynamoDB でスロットリングが発生したとき_大盛りver/when_throttling_occurs_in_dynamodb_long
emiki
1
480
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
210
Mastering Quickfix
daisuzu
1
320
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.9k
OS 標準のデザインシステムを超えて - より柔軟な Flutter テーマ管理 | FlutterKaigi 2024
ronnnnn
1
320
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
1
1k
LINEヤフーにおけるPrerender技術の導入とその効果
narirou
1
360
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Side Projects
sachag
452
42k
Site-Speed That Sticks
csswizardry
0
40
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Scaling GitHub
holman
458
140k
A better future with KSS
kneath
238
17k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
Being A Developer After 40
akosma
87
590k
Building Your Own Lightsaber
phodgson
103
6.1k
What's in a price? How to price your products and services
michaelherold
243
12k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
120
Transcript
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Jaga (Daisuke Nagayama) 2020/11/27 Amplify Updates AWS Amplify Meetup#02
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Jaga (Daisuke Nagayama) @jagaimogmog Startup Solutions Architect Amazon Web Service Japan K.K. > Health Care Startupでエンジニア・事業開発 > AWSでStartupの技術⽀援・Mobile Amazon Chime SDK AWS Amplify Amazon Pinpoint
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Amplify Meetup #01 以降*の主要アップデート 10/17 Amplify CLI で Cognito User Pools & Identity Pools を インポート可能に 8/31 Amplify CLI がプロジェクト単位でのリソースのタグづけをサポート 9/1 Amplify Android が RxJava をサポート 8/17 Amplify iOS が Swift Combine をサポート 8/20 Amplify Flutter の Developer Preview が利⽤可能に * 2020/7/31 以降 9/15 Amplify JavaScript が SSR をサポート 11/22 Amplify CLI で S3 バケットと DynamoDB テーブルをインポート可能に 11/4 Amplify Console が Performance Mode をサポート
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Amplify CLI Updates
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Amplify CLI で S3 バケットと DynamoDB テーブルをインポート可能に • 既存アプリの S3 バケット・DynamoDB テーブルを Amplify でつく るアプリでも使いたい • Amplify を使う⼀⽅で、S3 バケットや DynamoDB テーブルは Amplify 外のライフサイクルで管理したい • Cognito 認証ユーザーに S3/DynamoDB アクセス⽤の IAM の権限設 定が必要 • インポート した DynamoDB テーブルは APIカテゴリの REST API や function カテゴリの Lambda 関数からはアクセス可能な⼀⽅、API カ テゴリの GraphQL API で利⽤する DynamoDB としては利⽤不可 https://aws.amazon.com/blogs/mobile/use-an-existing-s3-bucket-for- your-amplify-project/ ユースケース 注意点 Amplify CLI v4.30.0 (10/17)
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Cognito User Pools & Identity Pools を Amplify CLI でインポート可能に ユースケース • 既存アプリのユーザー基盤をAmplifyで つくるアプリでも使いたい • 既存アプリを徐々に Amplify に移⾏し ていきたい • Amplify を使う⼀⽅で、重要なユーザー 基盤は Amplify の外のライフサイクル で管理したい https://aws.amazon.com/blogs/mobile/use-existing-cognito-resources-for-your-amplify-api-storage-and-more/ Amplify CLI v4.33.0 (11/22)
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Amplify CLI がプロジェクト単位でのリソースの タグづけをサポート 概要 • Amplify CLI v4.28.0 以降で、プロジェクト 単位でのリソースへのタグ付け機能が利⽤可 能に • 請求時の計算の簡略化 使い⽅ • tags.json の配列に追加することで最⼤50ま でのタグを使⽤可能 • {project-env} と {project-name} 変数は $ amplify push 時に代⼊される 注意事項 • 4.28.0 以前のバージョンで作成されたプロ ジェクトの場合、tags.json ファイルを⼿動 で作成する必要あり $ amplify push https://docs.amplify.aws/cli/usage/tags Amplify CLI v4.28.0 (8/31)
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Amplify Flutter Developer Preview
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Amplifiy Flutter Developer Preview (1) • 現状 Auth, Storage, Analytics の3カテゴ リが使⽤可能 • 将来的には API (REST/GraphQL), DataStore, Predictions, Escape Hacthe が実装予定 • Preview のため本番環境での利⽤は⾮推奨 https://aws.amazon.com/blogs/mobile/announcing-aws-amplify-flutter-developer-preview/ Amplify Flutter (8/20)
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Amplifiy Flutter Developer Preview (2) • Dart インタフェースから Platform Channels を通じて Amplify iOS, Android を呼び出す • 将来的には Amplify iOS/Android でなく、Dartで完結するライブラ リ機能も実装可能なデザイン https://aws.amazon.com/blogs/mobile/announcing-aws-amplify-flutter-developer-preview/ Amplify Flutter (8/20)
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Amplifiy Flutter Developer Preview (3) • Tutorial: https://docs.amplify.aws/start/q/integration/flutter • Workshop: https://aws.amazon.com/jp/getting-started/hands- on/build-flutter-app-amplify/ • Document: https://docs.amplify.aws/lib/q/platform/flutter • GitHub Repository: https://github.com/aws-amplify/amplify-flutter Amplify Flutter (8/20)
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Server Side Rendering (SSR) Support
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Single Page Application (SPA) の構成 Web/Mobile .js .html .css / フロントエンド エンジニアのためのAWSアーキテクチャ より⼀部引⽤ 認証情報は クライアント側で ハンドリングする
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Server Side Rendering (SSR)の構成 Web/Mobile / ページを作成 フロントエンド エンジニアのためのAWSアーキテクチャ より⼀部引⽤ 認証情報をレンダリングサーバ側で ハンドリングする必要がある
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Static Site Generator (SSG) を⽤いた構成 Web/Mobile / フロントエンド エンジニアのためのAWSアーキテクチャ より⼀部引⽤ 認証が必要なコンテンツを SSG することはないため ビルト時に認証情報をハンドリングする必要はない
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Amplify JavaScript が SSR をサポート (1) • Amplify JavaScript は認証情報の トークンをクライアントサイドでハ ンドリングするため、サーバーサイ ドでの利⽤が難しかった • Amplify JavaScript v3.1.0 以降、 Next.js/Nuxt.js で SSR 利⽤時で も Auth や API が動くように • SEO や OGP, 速報性が必要なアプ リケーションなど SSR が必要なケ ースでも Amplify が利⽤可能に Amplify JS v3.1.0 (9/3) https://aws.amazon.com/blogs/mobile/ssr-support-for- aws-amplify-javascript-libraries/
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Amplify JavaScript が SSR をサポート (2) • Next.js では Render ⽤関数(左図 Movies )は props 引数を受け取り レンダリングを⾏う • あらかじめビルドしておく (SSG) 場合は、getStaticProps 関数を 呼び出すことで、props の中⾝を定 義できる Amplify JS v3.1.0 (9/3) https://aws.amazon.com/blogs/mobile/ssr-support-for- aws-amplify-javascript-libraries/
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Amplify JavaScript が SSR をサポート (2) • Amplify.configureでssr:trueを指定 • ユーザーアクセス時に動的に SSR す る場合、Render ⽤関数に渡す引数 を getServerSideProps 関数で定 義することで動的に props の⽣成と レンダリングを⾏う • getServerSideProps 関数内で、 Amplify の提供する withSSRContext 関数に context 変数を渡すことによって、認証情報 をリクエストに含めてくれる API オ ブジェクトを取得できる Amplify JS v3.1.0 (9/3) https://aws.amazon.com/blogs/mobile/ssr-support-for- aws-amplify-javascript-libraries/
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Amplify JavaScript が SSR をサポート (3) Amplify JS v3.1.0 (9/3) • GitHub Repository: https://github.com/aws-amplify/amplify-flutter • Blog: https://aws.amazon.com/blogs/mobile/ssr-support-for-aws-amplify- javascript-libraries/ • Document: https://docs.amplify.aws/lib/ssr/q/platform/js • Workshop: https://github.com/dabit3/next.js-amplify-workshop • Deploy (Serverless Framework): https://github.com/serverless-nextjs/serverless- next.js • Deploy (Amplify Console) PFR: https://github.com/aws-amplify/amplify- console/issues/412
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Amplify iOS/Android Updates
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Amplify iOS が Swift Combine を サポート • Amplify iOS 1.1 以降で全ての⾮同期 API が Swift Combine をサポート • 以前は⾮同期呼び出しに標準コールバ ックのみをサポートしていたがコール バック地獄になりがち • Combine をサポートしたことでリア クティブプログラミングが可能に https://aws.amazon.com/blogs/mobile/using-swift-combine-with-aws-amplify/ Amplify iOS v1.1 (8/12)
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Amplify Android が RxJava を サポート • Amplify Android 1.3.0 以降で全て の⾮同期 API がRxJavaをサポート • 以前は⾮同期呼び出しに標準コール バックのみをサポートしていたがコ ールバック地獄になりがち • RxJava をサポートしたことでリア クティブプログラミングが可能に https://aws.amazon.com/blogs/mobile/using-rxjava-with-aws-amplify-android-library/ Amplify Android v1.3.0 (9/1)
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Amplify Console Updates
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Amplify Console - Perfomance Mode • CDNのエッジキャッシュがより⻑い時間保存され、ホスティング応 答のパフォーマンスが向上する • コードの変更が反映されるまで10分程度の時間を要するようになる Amplify Console > アプリの設定 > 全般 デプロイが即時的である必要がなく、応答速度が重要なワークロードに最適 https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/ttl.html#Performance-mode Amplify Console (11/4)
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Amplify Console – Custom Header (1) • Custom Header を設定することで HTTP レスポ ンスに任意の HTTP ヘッダをつけることが可能 • 以前は コンソール上の “build設定の追加” やソー スコード内の “amplify.yml” により指定する形式 だったが、コンソール上の “Custome Headers” とソースコード内の customHttp.ymlが推奨に https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/custom-headers.html Amplify Console (10/28)
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Amplify Console – Custom Header (2) • Custom HeaderによってHTTPSの強制、 クロスサイトスクリプティング (XSS)攻撃 の防⽌、クリックジャッキングの対策が可 能 • ドキュメントに上記攻撃の対策を⾏うため のサンプルが記載 https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/custom- headers.html#example-security-headers Amplify Console (10/28)
© 2020, Amazon Web Services, Inc. or its Affiliates. All
rights reserved. Thank you!