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

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

0b238801605070def81a98cfe8061aee?s=128

shonansurvivors

November 11, 2020
Tweet

Transcript

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


  2. • 山原 崇史 (Takashi Yamahara)
 • JAWS-UG 初心者支部 運営メンバー 


    • 千株式会社 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. ご静聴ありがとうございました