Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Amplifyで始めるサーバレス開発/serverless-development-starting-with-amplify
MURAKAMI Masahiko
November 30, 2020
Programming
0
1.4k
Amplifyで始めるサーバレス開発/serverless-development-starting-with-amplify
MURAKAMI Masahiko
November 30, 2020
Tweet
Share
More Decks by MURAKAMI Masahiko
See All by MURAKAMI Masahiko
Using custom function template with AWS Amplify
fossamagna
1
200
拡張して使うServerless&Amplify/use-with-extending-serverless-and-amplify
fossamagna
0
920
JavaScript AST
fossamagna
0
1.7k
Mithrilの紹介/Introduce of Mithril
fossamagna
0
170
Electronで製造ラインアプリ開発/Business application by Electron
fossamagna
4
6.3k
Apps Scriptによるより高度な開発プロセス/More Advanced Development Process with Apps Script
fossamagna
3
2.1k
Other Decks in Programming
See All in Programming
CSE360 Tutorial 07
javiergs
PRO
0
100
プロダクトのタイプ別 GraphQL クライアントの選び方
shozawa
0
5.4k
Baseline Profilesでアプリのパフォーマンスを向上させる / Improve app performance with Baseline Profiles
numeroanddev
0
250
I/O Extended 2022 in Android ~ Whats new in Android development tools
pluu
0
560
エンジニアによる事業指標計測のススメ
doyaaaaaken
1
190
engineer
spacemarket
0
2.3k
チームでカレーを作ろう!アジャイルカレークッキング
akitotsukahara
0
850
Java初心者が知っておくべきプログラミングのこと - JJUG CCC 2022 Spring
kishida
5
550
Node-RED 3.0 新機能紹介
utaani
0
140
リアルタイムボイスチェンジャーMMVCとVITSの紹介
stealthinu
0
110
パターンマッチングを学んで新しいJavaの世界へ!Java 18までの目玉機能をおさらいしよう / Java 18 pattern matching
ihcomega56
3
410
Imperative is dead, long live Declarative! | Appdevcon
prof18
0
110
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
269
11k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.3k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
The Invisible Customer
myddelton
110
11k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.3k
Adopting Sorbet at Scale
ufuk
63
7.6k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.5k
Become a Pro
speakerdeck
PRO
3
840
Stop Working from a Prison Cell
hatefulcrawdad
261
17k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
940
A Tale of Four Properties
chriscoyier
149
21k
What the flash - Photography Introduction
edds
62
10k
Transcript
Amplifyで始める サーバレス開発 ESM MEETUP!! 2020-11-27 村上雅彦
村上雅彦 a.k.a @fossamagna
Amplifyとは
Amplifyとは “スケールするモバイルアプリ およびウェブアプリを最速で 構築する方法”
Amplifyの構成 CLI:Amplifyでアプリを構築するためのツール チェーン Cloud Services:アプリのバックエンド Framework:モバイル、Web向けの各SDK Developer Tools:CI/CD, ホスティング、モバイ ルデバイスのテスト環境
Amplifyのはじめ方 1. フロントエンドのプロジェクト作成 2. Amplify CLIでクラウドサービス(バックエンドリソース)を追加 3. Amplify CLIでクラウドに反映 4.
フロンドエンドからクラウドサービスを利用するコードを追加
Amplifyのはじめ方 (ストレージとしてS3を追加する場合) $ npx vue create my-project # Vue.jsのプロジェクト作成 $
amplify init # Amplifyプロジェクトの初期化 $ amplify storage add # ストレージを追加 $ amplify push # 追加したリソースをクラウドに反映
Amplifyのはじめ方 (Vue.jsで画像をS3にアップロードする場合) <template> <input type="file" accept="image/png" @change="upload" /> </template> <script
lang="ts"> import { defineComponent } from 'vue'; import { Storage } from 'aws-amplify'; export default defineComponent({ setup() { const upload = async (e: Event) => { const input = e.target as HTMLInputElement; const file = input && input.files ? input.files[0] : null; if (!file) return; const result = await Storage.put(file.name, file); # S3にアップロード console.log(result); }; return { upload } } }); </script>
Amplifyのカテゴリー • auth (Amazon Cognito) • storage (Amazon S3 &
Amazon DynamoDB) • function (AWS Lambda) • api (AWS AppSync & Amazon API Gateway) • analytics (Amazon Pinpoint) • hosting (Amazon S3 and Amazon CloudFront distribution) • notifications (Amazon Pinpoint) • interactions (Amazon Lex) • predictions (Amazon Rekognition, Amazon Textract, Amazon Translate, Amazon Polly, Amazon Transcribe, Amazon Comprehend, and Amazon SageMaker)
awesome list • dabit3/awesome-aws-amplify: Curated list of AWS Amplify Resources
• watilde/awesome-aws-amplify-ja: 日本語で書かれているAWS Amplifyのツール、チュートリアル、記事などのリンク集
Amplifyのカスタマイズ • Amplifyは多くの機能を提供している • 活発に開発されていて頻繁に新機能追加もある • だたし、自分の要件に100%あうとはかぎらない • 足りない部分はカスタマイズできるようになっている
Amplifyのカスタマイズ方法 • 既存カテゴリーのテンプレート編集 • カスタムCloudFormationスタックの追加 • プラグイン
既存カテゴリーのテンプレート編集 (Lambdaに環境変数を渡す場合) { "Parameters": { "RoleArn": { "Type": "String", "Default":
"<default role ARN>" } } … "Resources": { "LambdaFunction": { "Type": "AWS::Lambda::Function", "Properties": { "Environment": { "RoleArn": { "Ref": "RoleArn" } } } } } } { "EndpointURL": "<role ARN override>" } parameters.json lambda-template.json
カスタムCloudFormationスタックの追加 1. CloudFormationテンプレートファイルの追加する 2. amplify/backend/backend-config.jsonの編集する 3. CLIに追加したリソースを認識させる
カスタムCloudFormationスタックの追加 (CloudFront署名付きURLで画像共有する事例) • S3にアップロードされたファイル に対してCloudFrontの署名付き URLを発行 • S3バケット、LambdaはCLIで生 成したリソースを利用
CloudFormationテンプレートファイルの追加 { "AWSTemplateFormatVersion": "2010-09-09", "Description": "Private content resource stack creation
using Amplify CLI", "Parameters": { "storageMediaContentBucketName": { "Type": "String", "Default": "storageMediaContentBucketName" }, }, "Resources": { "PrivteContentCloudFrontDistribution": { "Type" : "AWS::CloudFront::Distribution", "DependsOn" : [ "OriginAccessIdentity" ], …. } } amplify/backend/<category>/<resource-name>/<cloudformation-template.json/yml>として配置する
amplify/backend/backend-config.jsonの編集 { "privatecontent": { "usercontent": { "service": "CloudFront", "providerPlugin": "awscloudformation",
"dependsOn": [ { "category": "storage", "resourceName": "MediaContent", "attributes": [ "BucketName" ] } ] } }, "storage": { "MediaContent": { "service": "S3", "providerPlugin": “awscloudformation" } }
CLIに追加したリソースを認識させる amplify env checkout <current-env-name> を実行して追加したリソー スをCLIに認識させる
Amplify CLIプラグイン • Amplify CLIはプラグインとして構成されている • プラグインには4つのタイプがある ◦ category ◦
provider ◦ frontend ◦ util
Amplify CLIプラグインの作成 • プラグインの雛形を生成するコマンドが用意されてる ◦ amplify plugin init ◦ プラグインの名前やタイプなどいくつかの質問に答えると雛形コード
が生成される
Amplify CLIプラグインの構成 プラグインのディレクトリ構成 |_my-amplify-plugin/ |_commands/ # サブコマンド | |_help.js |
|_version.js | |_event-handlers/ # プラグインライフサイクルイベントのハンドラ | |_handle-PostPush.js | |_handle-PrePush.js | |_amplify-plugin.json # プラグインのメタ情報 |_index.js # プラグインエントリーポイント |_package.json
Amplify CLIプラグインの実装例 (CloudFront署名付きURLで画像共有する事例) • CloudFrontを構成するためのプ ラグイン • タイプはcategory • カスタムCloudFormationスタック
のテンプレート作成、 backend-config.jsonの編集が プラグインの仕事
Amplify CLIプラグイン実装のヒント • https://github.com/aws-amplify/amplify-cliのソースが実装の参考 になる • サードパーティプラグインのソースも参考になる • amplify-cli/packages/amplify-cli/src/extensions/amplify-help ers
配下にはプラグインを実装するのに有用なメソッドがそろっている
Amplify CLIのカスタマイズのまとめ • カスタムCloudFormationスタック ◦ 本来、追加したいCloudFormationスタックとbackend-config.jsonの編集 のみでカスタマイズできる • プラグイン ◦
複数のリソースを追加するような場合は作業が楽で間違いを起こしにくい。汎 用的なら他プロジェクトでも使える(OSSにしたりもできる) ◦ amplify cliのライフサイクルに合わせて実行したいならプラグイン!