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
人生が変わる日、今日かも。 / Today Could Change Everything.
jagaimogmog
0
4.3k
Nstock QAの旅 / nstock-qa-jouerney
jagaimogmog
2
150
「引き算」で高めるアジリティ / Enhancing Agility through Subtraction
jagaimogmog
4
290
Spring Bootと行レベルセキュリティではじめるマルチテナントアーキテクチャ / Multi-tenant architecture using Row-Level Security
jagaimogmog
4
2.2k
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jagaimogmog
3
610
久しぶりのコミュニティイベントがスクフェス神奈川でよかった/Good to see you Scrum Fest Kanagawa
jagaimogmog
1
670
シードスタートアップがデザインシステムをちいさくはじめてみた / Design System Small Start
jagaimogmog
1
3.8k
AWS Amplify の概要 について簡単なおさらい/AWS Amplify Overview in brief
jagaimogmog
1
1.4k
Starutp.fm AWSでアプリ開発に集中するためのインフラ選定/Starutp.fm How to Focus on App Development using AWS
jagaimogmog
5
1.1k
Other Decks in Technology
See All in Technology
SmartHR プロダクトエンジニア求人ガイド_2025 / PdE job guide 2025
smarthr
0
130
日経電子版 for Android の技術的課題と取り組み(令和最新版)/android-20250423
nikkei_engineer_recruiting
0
420
クォータ監視、AWS Organizations環境でも楽勝です✌️
iwamot
PRO
1
320
アセスメントで紐解く、10Xのデータマネジメントの軌跡
10xinc
1
440
意思決定を支える検索体験を目指してやってきたこと
hinatades
PRO
0
210
コスト最適重視でAurora PostgreSQLのログ分析基盤を作ってみた #jawsug_tokyo
non97
0
440
4/16/25 - SFJug - Java meets AI: Build LLM-Powered Apps with LangChain4j
edeandrea
PRO
2
120
SnowflakeとDatabricks両方でRAGを構築してみた
kameitomohiro
1
430
バクラクの認証基盤の成長と現在地 / bakuraku-authn-platform
convto
1
620
SDカードフォレンジック
su3158
1
630
Devinで模索する AIファースト開発〜ゼロベースから始めるDevOpsの進化〜
potix2
PRO
8
3.5k
4/17/25 - CIJUG - Java Meets AI: Build LLM-Powered Apps with LangChain4j (part 2)
edeandrea
PRO
0
120
Featured
See All Featured
KATA
mclloyd
29
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
104
19k
The Invisible Side of Design
smashingmag
299
50k
Optimizing for Happiness
mojombo
377
70k
Producing Creativity
orderedlist
PRO
344
40k
Designing for humans not robots
tammielis
252
25k
For a Future-Friendly Web
brad_frost
176
9.7k
How STYLIGHT went responsive
nonsquared
99
5.5k
GraphQLとの向き合い方2022年版
quramy
46
14k
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!