Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

shonansurvivors

November 11, 2020
Tweet

More Decks by shonansurvivors

Other Decks in Technology

Transcript

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


    • 某Web系企業のSRE
 • Twitter : @shonansurvivors 
 自己紹介

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

  3. 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 

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