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

Transcript

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

   @shonansurvivors

   

   View Slide

2. ● 山原 崇史 (Takashi Yamahara)

   ● JAWS-UG 初心者支部 運営メンバー 

   ● 某Web系企業のSRE

   ● Twitter : @shonansurvivors 

   自己紹介

   

   View Slide

3. Amplifyって何なん？
   

   View Slide

4. Amplifyって何なん？というのも・・・

   ● 自分が普段仕事で関わる多くのWebアプリは以下のような構成

   

   

   

   

   ● AmplifyによるWebアプリ構築の方法が全くイメージできていない

   

   View Slide

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/ )

   ■ 日本語

   ■ わかりやすい (特につまづくような箇所が無い) 

   

   

   View Slide

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 

   

   View Slide

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

   

   View Slide

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 

   

   View Slide

9. amplify init

   

   View Slide

10. amplify add auth (&& amplify push)

    

    View Slide

11. amplify add api (&& amplify push)

    

    View Slide

12. amplify add hosting && amplify publish

    

    View Slide

13. Amplifyとは何だったのか？
    

    View Slide

14. まとめ

    

    
インフラ寄りエンジニアから見たAmplify所感

    ● フロントエンドからインフラ構築＆デプロイまでの領域を1人でこなせる

    エンジニアは少ない(もちろん世の中には沢山存在するが相対的には)

    ● 分業となるとコミュニケーションコスト等のオーバーヘッドもあるはず

    ● 上記領域をフロントエンドエンジニア1人で完結可能なAmplifyは強力

    (特に高速でのMVPが求められる場面などは活かせそう)

    

    View Slide

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

    View Slide