Amplify CLIが作成するバックエンド

Transcript

1. Amplify CLIが作成するバックエンド
 @shonansurvivors

2. • 山原 崇史 (Takashi Yamahara)
 • JAWS-UG 初心者支部 運営メンバー 
 • 某Web系企業のSRE
 • Twitter : @shonansurvivors 
 自己紹介

3. Amplifyって何なん？
4. Amplifyって何なん？というのも・・・
 • 自分が普段仕事で関わる多くのWebアプリは以下のような構成
 
 
 
 
 • AmplifyによるWebアプリ構築の方法が全くイメージできていない

5. そこでAmplifyのチュートリアルにトライ
 • Amplify Docs (OSSであるAmplify CLIの公式)
 ◦ Getting started - Amplify Docs (https://docs.amplify.aws/start )
 ▪ チュートリアルの数が多い(Vue, React, Android, iOS etc.) 
 ▪ 英語のみ
 ▪ Vueのコードを編集するパートが少しわかりづらい (つまづきポイント) 
 • builders.flash (日本のAWS開発者向けWebマガジン)
 ◦ AWS AmplifyとVue.jsを使って、基本的な認証とCRUD操作ができるWebアプリケーションを作る (https://aws.amazon.com/jp/builders-flash/202008/amplify-crud-app/ )
 ▪ 日本語
 ▪ わかりやすい (特につまづくような箇所が無い) 
 

6. Todoアプリ作成の流れ(Vue版)
 No.
 実施内容
 コマンド
 1
 Vue CLI, Amplify CLIのインストール 
 npm i -g @vue/cli @aws-amplify/cli 
 2
 Vueプロジェクトのセットアップ 
 vue create { プロジェクト名 } 
 3
 Amplify CLIの初期設定 
 amplify configure
 4
 バックエンドの初期設定 
 amplify init
 5
 認証機能の作成
 amplify add auth
 6
 GraphQL APIとデータベースの作成 
 amplify add api
 7
 バックエンドのデプロイ 
 amplify push
 8
 フロントエンドの作成 
 npm i aws-amplify aws-amplify-vue等と各種js, Vueファイルの編集 
 9
 静的ファイルのホスティング 
 amplify add hosting (Amplifyコンソールからデプロイする方法もあり)
 10
 アプリケーションの公開 
 amplify publish 

7. 認証付きCRUDアプリのデプロイ完了

8. 主要コマンドが実施していることを紐解く
 No.
 実施内容
 コマンド
 1
 Vue CLI, Amplify CLIのインストール 
 npm i -g @vue/cli @aws-amplify/cli 
 2
 Vueプロジェクトのセットアップ 
 vue create { プロジェクト名 } 
 3
 Amplify CLIの初期設定 
 amplify configure
 4
 バックエンドの初期設定 
 amplify init
 5
 認証機能の作成
 amplify add auth
 6
 GraphQL APIとデータベースの作成 
 amplify add api
 7
 バックエンドのデプロイ 
 amplify push
 8
 フロントエンドの作成 
 npm i aws-amplify aws-amplify-vue等と各種js, Vueファイルの編集 
 9
 静的ファイルのホスティング 
 amplify add hosting (Amplifyコンソールからデプロイする方法もあり)
 10
 アプリケーションの公開 
 amplify publish 

9. amplify init

10. amplify add auth (&& amplify push)

11. amplify add api (&& amplify push)

12. amplify add hosting && amplify publish

13. Amplifyとは何だったのか？
14. まとめ
 
 
インフラ寄りエンジニアから見たAmplify所感
 • フロントエンドからインフラ構築＆デプロイまでの領域を1人でこなせる
 エンジニアは少ない(もちろん世の中には沢山存在するが相対的には)
 • 分業となるとコミュニケーションコスト等のオーバーヘッドもあるはず
 • 上記領域をフロントエンドエンジニア1人で完結可能なAmplifyは強力
 (特に高速でのMVPが求められる場面などは活かせそう)

15. ご静聴ありがとうございました