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
250
拡張して使うServerless&Amplify/use-with-extending-serverless-and-amplify
fossamagna
0
990
JavaScript AST
fossamagna
0
1.7k
Mithrilの紹介/Introduce of Mithril
fossamagna
0
190
Electronで製造ラインアプリ開発/Business application by Electron
fossamagna
4
6.4k
Apps Scriptによるより高度な開発プロセス/More Advanced Development Process with Apps Script
fossamagna
3
2.1k
Other Decks in Programming
See All in Programming
ポケモンで学ぶiOS 16弾丸ツアー 🚅
giginet
PRO
1
610
What's new in Shopware 6.5
shyim
0
110
和暦を正しく扱うための暦の話
nagise
10
6.4k
フロントエンドで 良いコードを書くために
t_keshi
3
1.6k
あなたと 「|」 したい・・・
track3jyo
PRO
2
1.1k
レガシーフレームワークからの移行
ug
0
120
監視せなあかんし、五大紙だけにオオカミってな🐺🐺🐺🐺🐺
sadnessojisan
2
1.5k
低レイヤーから始める GUI
fadis
18
9.4k
爆速の日経電子版開発の今
shinyaigeek
2
620
Prácticas de Seguridad en Kubernetes
pablokbs
0
130
なぜRubyコミュニティにコミットするのか?
luccafort
0
310
Functional Data Engineering - A Blueprint for adopting functional principles in data pipeline
vananth22
0
180
Featured
See All Featured
Three Pipe Problems
jasonvnalue
89
8.9k
The Pragmatic Product Professional
lauravandoore
21
3.4k
The Brand Is Dead. Long Live the Brand.
mthomps
48
2.9k
Building Adaptive Systems
keathley
27
1.3k
Build your cross-platform service in a week with App Engine
jlugia
221
17k
Into the Great Unknown - MozCon
thekraken
2
290
Building Flexible Design Systems
yeseniaperezcruz
314
35k
A Tale of Four Properties
chriscoyier
149
21k
No one is an island. Learnings from fostering a developers community.
thoeni
12
1.5k
Stop Working from a Prison Cell
hatefulcrawdad
263
18k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
13
1.1k
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のライフサイクルに合わせて実行したいならプラグイン!