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


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


Amplifyって何なん？

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


そこで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/ )
 ■ 日本語
 ■ わかりやすい (特につまづくような箇所が無い) 
 


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 


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


主要コマンドが実施していることを紐解く
 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 


amplify init


amplify add auth (&& amplify push)


amplify add api (&& amplify push)


amplify add hosting && amplify publish


Amplifyとは何だったのか？

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


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