AWSを基本からまとめてみた【AWS Amplify入門】

AWSAmplifyとは

公式サイト：AWS

• Web及びMobileアプリ開発のためのフレームワーク
• フロントエンドデベロッパーがAWSでフルスタックアプリケーションを簡単に作成できるサービス
• アプリケーションが必要とする一般的な技術基盤を簡単に構築できる

AWSAmplifyのメリット

• AWSのクラウドサービス上にモバイルアプリケーションを構築するための最も速く、簡単な方法。
• 利用者はクラウドサービスのバックエンドの構築をツールに任せ、アプリケーション実装に集中できる。
• ポピュラーなバックエンドの構成とそれを利用するためのフロントエンドの統合を自動で構築できる。

AWS Amplifyの機能

①Amplify CLI(バックエンドの構築)

対話的コマンドでバックエンドをインタラクティブに作成・管理

//Amplify CLI　コマンド例

npm i -g @aws-amplify/cli  //Amplify CLIのインストール
amplify configure  //CLIを使う為の設定（IAMユーザー作成等）
amplify init  //amplify init
amplify add<category>  //バックエン機能の追加（設定変更のみ）
amplify statusで確認　　//クラウドリソース・設定変更の確認
amplify push　　//リソースの作成や更新を行う
amplify pull　　//リソース状態をローカルに反映
amplify console  //amplify consoleを開く

②Amplify Libraries(バックエンドとの接続・機能実装)

OSSのクライアントライブラリアプリとAWSを統合

③Amplify UI　Components(フロントエンドの実装)

React,React Native,Vue,FlutterのためのUIライブライ

④Amplify Hosting(アプリケーションのデプロイ)

アプリをビルド、テスト、デプロイ、ホスティング

amplify add hosting  
//バックエンドにWebサイトをホストするためのリソースを追加

amplify publish
//フロントエンド・バックエンド両方をビルドして公開する

Amplify Studio(①②③)

GUI開発環境
バックエンドとの統合・管理機
最小限のコーディングでUI開発を加速

Amplify Console(④)

アプリのバックエンドとコンテンツ管理をするGUIツール

AWSを使用する

AWS アプリケーション

① aws amplifyを検索し、選択する

② 画面右上の『新しいアプリケーション』 ⇨
『ウェブアプリケーションをホスト』を選択する

③ 既存のコードから『Github』を選択し、『続行』を押す

④　最近更新されたリポジトリとブランチ『main』を選択し、『次へ』を押す
※ コードを編集している場合は、deplopにする場合もある

⑤ アプリケーションの構築とテストの設定は、何もせず、『次へ』を押す

⑥ 確認 画面は『保存してデプロイ』を押す

⑦ 作成したURLをクリックする

Amplifyの組み込み

① Amplifyの組み込み

//Amplify CLIをグローバルインストール
npm i @aws-amplify/cli@8.4.0
or
yarn global add @aws-amplify/cli@8.4.0

//インストールが出来ているか確認
yarn global list

//Amplify CLI を使用するための初期設定を開始する
amplify configure

※ Amazon Web Services Sign-inは特に何もせず消す


//Specify the AWS Region
? region:
> ap-northeast-1   を選択する

? user name: <プロジェクト名>

AWS画面

①『ルートユーザー』を選択し、『ルートユーザーの E メールアドレス』を入力する

②ユーザー詳細の設定の<プロジェクト名>を確認して、『次のステップ：アクセス権限』を押す

③アクセス許可の設定は、何もせず、『次のステップ：タグ』を押す

④タグの追加 (オプション)何もせず、『次のステップ：確認』を押す

⑤確認で、『ユーザーの作成』を押す

⑥成功を確認し、『アクセスキー ID』『シークレットアクセスキー』をメモする

※『アクセスキーID』と『シークレットアクセスキー』は念の為、『.CSVのダウンロード』を行う

Press Enter to continue 
『Enter』を押す

? accessKeyId: 『アクセスキーID』
? secretAccessKey:『シークレットアクセスキー』
? Profile Name: <プロジェクト名>

AWS画面

①『Backend environments』を選択し、初期化する

amplify init

? Enter a name for the project  //Defaultでよければ Enter
? Initialize the project with the above configuration?　Yes
? Select the authentication method you want to use: AWS profile
? Please choose the profile you want to use: <プロジェクト名>
 //初期化する
? Help improve ify CAmplI by sharing non sensitive configuration on
failures : yes

Authカテゴリの設定

amplify add auth   ## すでに設定の場合は、"amplify update auth"

? Do you want to use the default authentication and security configuration? 
    `Default configuration with Social Provider (Federation)`
? How do you want users to be able to sign in? 
    `Username`
? Do you want to configure advanced settings? 
    `No, I am done.`
? What domain name prefix you want us to create for you? 
    `(default)`
? Enter your redirect signin URI: 
    `http://localhost:3000/`
? Do you want to add another redirect signin URI 
    `No`
? Enter your redirect signout URI: 
    `http://localhost:3000/`
? Do you want to add another redirect signout URI 
    `No`
? Select the social providers you want to configure for your user pool: 
    `<choose your provider and follow the prompts to input the proper tokens>`

認証画面

yarn add @aws-amplify/ui-react aws-amplify

amplify add auth

Do you want to use the default authentication and security 
configuration? : Default configuration

How do you want users to be able to sign in? :
Do you want to configure advanced settings?: No, I am done.

amplify state
amplify push --y

DataStoreでCRUD機能を実装する

① aws-amplifyライブラリの追加

yarn add aws-amplify@^5.0.2

② AmplifyCLIを用いたAPIの追加

amplify add api

? Select from one of the below mentioned services: GraphQL
? Here is the GraphQL API that we will create. Select a setting to 
edit or continue     Name:<プロジェクト名>
? Provide API name: <プロジェクト名>
? Here is the GraphQL API that we will create.
Select a setting edit or continue: 
Authorizationodes:API key(default, expiration time: 7 days from now)
? Choose the default authorization type for the API: API key
? Enter a description for the API key: <プロジェクト名>Gql AuthKey
? After how many days from now the API key should expire: 365
? Here is the GraphQL API that we will create. Select a setting to
edit or continue: Disabled
? Enable conflict detection? Yes
? Select the default resolution strategy: Auto Merge
? Here is the GraphQL API that we will create. Select a setting to
edit or continue: Continue
? Choose a schema template:
Sigle object with fields(e.g., "Todo" with ID, name, description)
? Do you want to edit the schema now:yes

③ スキーマの定義

schema.graphql

//graphqlにミューテーションする時は『!』をする

type Todo @model {
  id: ID!
  title: String!
  content: String!
  isDone: Boolean!
}

④ スキーマが完了すると『amplify push』する

amplify push

?Are you sure you want to continue? :yes
? Do you want to generate code for your newly created GraphQL API
:yes
? Choose the code generation language target:typescript
? Enter the file name pattern of graphql queries, mutations and subscriptions:Enter
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions :yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] :2
? Enter the file name for the generated code:Enter

AWS画面

①『Amplify Studio』を選択し、Amplify Studioを『On』にする

②　URLをクリックし、ログインする

③ Set up のDataをクリックし、追加したデータと属性を確認する

参考サイト

AWS Amplifyとはなんなのか３行で表現する
【AWS Amplify入門】第1回：Amplifyの理解
【AWS入門】AWSを使ってReactアプリをデプロイしてみよう ~AWS Amplifyを使用~
【AWS Amplify入門】第4回：Amplifyの組み込み
【AWS Amplify入門】第5-1回：DataStoreを用いたCRUD機能の実装~前編~
【AWS Amplify入門】第5-2回：DataStoreを用いたCRUD機能の実装~後編~
【AWS Amplify】10分で理解！AWS Amplify【技術系VTuber】
IAMユーザーのマネジメントコンソールのログインを作成後に無効化してみた