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
100
「引き算」で高めるアジリティ / Enhancing Agility through Subtraction
jagaimogmog
4
230
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
550
久しぶりのコミュニティイベントがスクフェス神奈川でよかった/Good to see you Scrum Fest Kanagawa
jagaimogmog
1
480
シードスタートアップがデザインシステムをちいさくはじめてみた / Design System Small Start
jagaimogmog
1
3.4k
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
都市伝説バスターズ「WebアプリのボトルネックはDBだから言語の性能は関係ない」 - Kaigi on Rails 2024
osyoyu
16
8.5k
サーバーサイドのデータプレーンプログラミング 〜 NVIDIA Blue Field / DOCA 〜
ebiken
PRO
1
240
Railway Oriented Programming を オニオンアーキテクチャに適用する by kotlin-result / Railway Oriented Programming in Onion Architecture by kotlin-result
yuitosato
2
240
オニオンアーキテクチャで実現した 本質課題を解決する インフラ移行の実例
hryushm
13
2.8k
サイロ化した金融システムを、packwerk を利用して無事故でリファクタリングした話
coincheck_recruit
3
3.5k
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
17
2.9k
リファクタリングへの耐性が高いモデルベースの統合テストの紹介 / Model-Base Integration Test for Refactoring
yuitosato
5
1.5k
ネット広告に未来はあるか?「3rd Party Cookie廃止とPrivacy Sandboxの効果検証の裏側」 / third-party-cookie-privacy
cyberagentdevelopers
PRO
1
110
グローバル展開を見据えたサービスにおける機械翻訳プラクティス / dp-ai-translating
cyberagentdevelopers
PRO
1
120
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
21
6.1k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
49k
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
180
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
The Pragmatic Product Professional
lauravandoore
31
6.3k
How to Ace a Technical Interview
jacobian
275
23k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Music & Morning Musume
bryan
46
6.1k
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!