あめがえるのITブログ

頑張りすぎない。ほどほどに頑張るブログ。

AWS AmplifyのBackend(Storage(DynamoDB))を作成してみた


やること

AmplifyでDynamoDBを作成する

前提

コマンド実行環境はWindows11を使用

実践!

1.DynamoDB作成
1-1.PowerShellを開く
1-2.Amplifyのローカルフォルダへ移動
1-3.下記を実行

> amplify add storage
> amplify add storage
? Select from one of the below mentioned services: NoSQL Database ★NoSQLを選択

Welcome to the NoSQL DynamoDB database wizard
This wizard asks you a series of questions to help determine how to set up your NoSQL database table.

√ Provide a friendly name · dynamo3c6a94e5 ★デフォルトの名前を使用
√ Provide table name · dynamo3c6a94e5 ★デフォルトの名前を使用

You can now add columns to the table.

√ What would you like to name this column · aaa ★適当な名前のカラムを作成
√ Choose the data type · string ★カラムの属性を文字列に指定
√ Would you like to add another column? (Y/n) · no ★他追加はしないので、[No]

Before you create the database, you must specify how items in your table are uniquely organized. You do this by specifying a primary key. The primary key uniquely identifies each item in the table so that no two items can have the same key. This can be an individual column, or a combination that includes a primary key and a sort key.

To learn more about primary keys, see:
https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/HowItWorks.CoreComponents.html#HowItWorks.CoreComponents.PrimaryKey

Only one option for [Choose partition key for the table]. Selecting [aaa].
√ Do you want to add a sort key to your table? (Y/n) · no ★ソートキーはいったん作らないので、[No]

You can optionally add global secondary indexes for this table. These are useful when you run queries defined in a different column than the primary key.
To learn more about indexes, see:
https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/HowItWorks.CoreComponents.html#HowItWorks.CoreComponents.SecondaryIndexes

√ Do you want to add global secondary indexes to your table? (Y/n) · no  ★グローバルセカンダリーインデックスは作成しないので、[No]
√ Do you want to add a Lambda Trigger for your Table? (y/N) · no ★Lambdaのトリガーは設定しないので、[No]
✅ Successfully added resource dynamo3c6a94e5 locally

⚠️ If a user is part of a user pool group, run "amplify update storage" to enable IAM group policies for CRUD operations
✅ Some next steps:
"amplify push" builds all of your local backend resources and provisions them in the cloud
"amplify publish" builds all of your local backend and front-end resources (if you added hosting category) and provisions them in the cloud

1-4.下記を実行

> amplify push
> amplify push
√ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev

┌──────────┬─────────────────┬───────────┬───────────────────┐
│ Category │ Resource name   │ Operation │ Provider plugin   │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Storage  │ dynamo3c6a94e5  │ Create    │ awscloudformation │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Function │ amplify6d148998 │ No Change │ awscloudformation │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Api      │ api9bb60a4c     │ No Change │ awscloudformation │
└──────────┴─────────────────┴───────────┴───────────────────┘
√ Are you sure you want to continue? (Y/n) · yes

Deployment completed.
Deployed root stack amplify [ ======================================== ] 4/4
        amplify-amplify-dev-5fd03      AWS::CloudFormation::Stack     UPDATE_COMPLETE                Sun Jun 09 2024
        storagedynamo3c6a94e5          AWS::CloudFormation::Stack     CREATE_COMPLETE                Sun Jun 09 2024
        functionamplify6d148998        AWS::CloudFormation::Stack     UPDATE_COMPLETE                Sun Jun 09 2024
        apiapi9bb60a4c                 AWS::CloudFormation::Stack     UPDATE_COMPLETE                Sun Jun 09 2024
Deployed storage dynamo3c6a94e5 [ ======================================== ] 1/1
        DynamoDBTable                  AWS::DynamoDB::Table           CREATE_COMPLETE                Sun Jun 09 2024

Deployment state saved successfully.


2.作成確認
2-1.[AWS] - [DynamoDB]- [テーブル]

2-2.DynamoDBのデータベースが作成されていること


感想

CloudFormationで十分な気がする。
※裏でCloudFormationが動いているから余計に。。。

AWS AmplifyのFrontEndにBasic認証を追加してみた


やること

AmplifyのFrontEndにBasic認証を追加する

前提

AmplifyのFrontEndの設定が完了していること
※完了していない場合下記を行う
AWS Amplifyでフロントエンドアプリケーションを作成してみた - あめがえるのITブログ

実践!

1.Basic認証追加
1-1.[AWS] - [Amplify] - 該当のアプリケーション

1-2.[ホスティング] - [アクセスコンロトール] - [アクセスの管理]

1-3.下記を入力
 すべてのブランチのアクセスを管理:✅
 ユーザーネーム:任意
 パスワード:任意

1-4.[保存]

2.動作確認
2-1.接続URL確認
 2-1-1.[AWS] - [Amplify] - 該当のアプリケーション

 2-1-2.[ホスティング] - [ドメイン]のURLをクリック

2-2.Basic認証動作確認
 2-2-1.Basic認証画面が表示されること

 2-2-2.1-3で設定したユーザーネームとパスワードで認証を行い、FrontEndのページが表示されること


感想

Amplifyさん、GUIでやったりCLIでやったり、なんか統一性がないな。。。

AWS AmplifyでBackendのAPIGatewayにPathを追加

やること

事前にAmplifyで作成しているAPIGatewayにPathを追加する。

前提

AmplifyのBackendでAPIGatewayを作成していること
※作成していない場合は下記を行う
AWS AmplifyのBackend(api)を作成してみた - あめがえるのITブログ

実践!

1.cli-inputs.json修正
1-1.下記ファイルを開く

amplify\backend\<APIGatewayID>\cli-inputs.json

1-2.Pathを追加

{
  "version": 1,
  "paths": {
    "/items": {
      "name": "/items",
      "lambdaFunction": "amplify6d148998",
      "permissions": {
        "setting": "open"
      }
## ここから追加
    },
    "/test": {
      "name": "/test",
      "lambdaFunction": "amplify6d148998",
      "permissions": {
        "setting": "open"
      }
## ここまで追加
    }
  }
}

1-3.PowerShellを開き、Amplifyのローカルフォルダへ移動
1-4.下記を実行

> amplify push
> amplify push
√ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev

┌──────────┬─────────────────┬───────────┬───────────────────┐
│ Category │ Resource name   │ Operation │ Provider plugin   │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Api      │ api9bb60a4c     │ Update    │ awscloudformation │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Function │ amplify6d148998 │ No Change │ awscloudformation │
└──────────┴─────────────────┴───────────┴───────────────────┘
√ Are you sure you want to continue? (Y/n) · yes

Deployment completed.
Deploying root stack amplify [ ===========================------------- ] 2/3
        amplify-amplify-dev-5fd03      AWS::CloudFormation::Stack     UPDATE_COMPLETE_CLEANUP_IN_PR… Sun Jun 09 2024
        functionamplify6d148998        AWS::CloudFormation::Stack     UPDATE_COMPLETE                Sun Jun 09 2024
        apiapi9bb60a4c                 AWS::CloudFormation::Stack     UPDATE_COMPLETE                Sun Jun 09 2024
Deployed api api9bb60a4c [ ======================================== ] 5/5
        api9bb60a4c                    AWS::ApiGateway::RestApi       UPDATE_COMPLETE                Sun Jun 09 2024

Deployment state saved successfully.

REST API endpoint: https://wsj28k4844.execute-api.ap-northeast-1.amazonaws.com/dev

2.追加確認
2-1.[AWS] - [Amplify]
2-2.該当APIを選択
2-3.[リソース]
2-4.Pathが追加されていることを確認


感想

なるほど~

AWS AmplifyのBackend(api)を作成してみた


やること

AmplifyのBackendでAPIGatewayとLambdaを作成し、接続する。

前提

  • 事前にAmplifyのアプリケーションが作成されていること
  • 接続元の端末はWindows11を使用してます

実践!

1.amplify add apiコマンド実行
1-1.PowerShellを開く
1-2.amplifyローカルフォルダへ移動し、下記コマンドを実行

> amplify add api

1-3.対話形式で回答する

> amplify add api
? Select from one of the below mentioned services: REST ★RESTAPIを指定
√ Provide a friendly name for your resource to be used as a label for this category in the project: · api9bb60a4c ★デフォルト名を使用するためEnter
√ Provide a path (e.g., /book/{isbn}): · /items ★デフォルト名を使用するためEnter
Only one option for [Choose a Lambda source]. Selecting [Create a new Lambda function]. ★デフォルト名で、[Enter]
? Provide an AWS Lambda function name: amplify6d148998 ★デフォルト名で、[Enter]
? Choose the runtime that you want to use: NodeJS ★Node.jsを選択し、[Enter]
? Choose the function template that you want to use: Hello World ★とりあえず Hello Worldを選択し、[Enter]

✅ Available advanced settings: 
- Resource access permissions
- Scheduled recurring invocation
- Lambda layers configuration
- Environment variables configuration
- Secret values configuration

? Do you want to configure advanced settings? No ★追加設定は不要なので、[No]
? Do you want to edit the local lambda function now? No ★変更不要なので、[No]
✅ Successfully added resource amplify6d148998 locally.

✅ Next steps:
Check out sample function code generated in <project-dir>/amplify/backend/function/amplify6d148998/src
"amplify function build" builds all of your functions currently in the project
"amplify mock function <functionName>" runs your function locally
To access AWS resources outside of this Amplify app, edit the C:\amplify\amplify\backend\function\amplify6d148998\custom-policies.json
"amplify push" builds all of your local backend resources and provisions them in the cloud
"amplify publish" builds all of your local backend and front-end resources (if you added hosting category) and provisions them in the cloud
✅ Succesfully added the Lambda function locally
√ Restrict API access? (Y/n) · no ★APIアクセスを制限はしないので、[No]
√ Do you want to add another path? (y/N) · no ★追加パスは設定しないので、[No]
✅ Successfully added resource api9bb60a4c locally

✅ Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

1-4.下記を実行

amplify push
> amplify push
√ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev

┌──────────┬─────────────────┬───────────┬───────────────────┐
│ Category │ Resource name   │ Operation │ Provider plugin   │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Function │ amplify6d148998 │ Create    │ awscloudformation │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Api      │ api9bb60a4c     │ Create    │ awscloudformation │
└──────────┴─────────────────┴───────────┴───────────────────┘
√ Are you sure you want to continue? (Y/n) · yes

Deployment completed.
Deployed root stack amplify [ ======================================== ] 3/3
        amplify-amplify-dev-5fd03      AWS::CloudFormation::Stack     UPDATE_COMPLETE                Sun Jun 09 2024
        functionamplify6d148998        AWS::CloudFormation::Stack     CREATE_COMPLETE                Sun Jun 09 2024
        apiapi9bb60a4c                 AWS::CloudFormation::Stack     CREATE_COMPLETE                Sun Jun 09 2024
Deployed function amplify6d148998 [ ======================================== ] 3/3
        LambdaExecutionRole            AWS::IAM::Role                 CREATE_COMPLETE                Sun Jun 09 2024
        LambdaFunction                 AWS::Lambda::Function          CREATE_COMPLETE                Sun Jun 09 2024
        lambdaexecutionpolicy          AWS::IAM::Policy               CREATE_IN_PROGRESS             Sun Jun 09 2024
Deployed api api9bb60a4c [ ======================================== ] 5/5
        api9bb60a4c                    AWS::ApiGateway::RestApi       CREATE_IN_PROGRESS             Sun Jun 09 2024

Deployment state saved successfully.

REST API endpoint: https://wsj28k4844.execute-api.ap-northeast-1.amazonaws.com/dev


2.作成確認
2-1.APIGateway作成確認
 2-1-1.[AWS] - [APIGateway] - [API]
 2-1-2.APIが作成されていることを確認

2-2.Lambda作成確認
 2-2-1.[AWS] - [Lambda]
 2-2-2.関数が作成されていることを確認

2-3.Amplify確認
 2-3-1.[AWS] - [Amplify] - 該当アプリケーションを選択

 2-3-2.[dev]を選択

 2-3-3.[api]タブを選択。
  ※なにも表示されない。。。正解がわからない。。。


3.接続確認
3-1.amplify pushの最後に表示された[REST API endpoint]にpathを付与してブラウザから接続
※デフォルトpathは/items

https://wsj28k4844.execute-api.ap-northeast-1.amazonaws.com/dev/items

3-2.["Hello from Lambda!"]が表示されることを確認



感想

Amplifyに表示されないのは正解なのか。。。
まだAmplifyさんとは友達になれそうにない。。。

Amplifyコマンドの接続情報確認してみた


接続情報確認

amplify initでアプリケーションを作成するとカレントディレクトリにamplifyの構成情報が出力される。 ※カレントディレクトリ内の下記に接続情報が記載される。
.amplify/team-provider-info.json

team-provider-info.json
{
  "dev": {
    "awscloudformation": {
      "AuthRoleName": "amplify-amplify-dev-5fd03-authRole",
      "UnauthRoleArn": "arn:aws:iam::xxxxxxxxxxxx:role/amplify-amplify-dev-5fd03-unauthRole",
      "AuthRoleArn": "arn:aws:iam::xxxxxxxxxxxx:role/amplify-amplify-dev-5fd03-authRole",
      "Region": "ap-northeast-1",
      "DeploymentBucketName": "amplify-amplify-dev-5fd03-deployment",
      "UnauthRoleName": "amplify-amplify-dev-5fd03-unauthRole",
      "StackName": "amplify-amplify-dev-5fd03",
      "StackId": "arn:aws:cloudformation:ap-northeast-1:xxxxxxxxxxxx:stack/amplify-amplify-dev-5fd03/e79aa660-263c-11ef-ae8e-0e1da2fa3d49",
      "AmplifyAppId": "df8alfifdhdqf"
    },
    "categories": {
      "function": {
        "amplify6d148998": {
          "deploymentBucketName": "amplify-amplify-dev-5fd03-deployment",
          "s3Key": "amplify-builds/amplify6d148998-6771636b427370564275-build.zip"
        }
      },
      "api": {
        "api9bb60a4c": {}
      }
    }
  }
}

感想

Amplifyコマンドで現在接続しているアプリケーションを確認する方法がいまいちわからないので、間違わないように確認しましょう。。

Amplifyのアプリケーションを削除してみた


やること

Amplifyのアプリケーションを削除

前提

なにかしらのAmplifyのアプリケーションが作成されていること

実践!

1.Amplifyアプリケーション削除
1-1.[AWS] - [Amplify]
1-2.該当のアプリケーションを選択

1-3.左ペインの[アプリケーションの設定] - [全般設定]

1-4.[アプリの削除]

1-5.[Delete]を入力し、[アプリの削除]
 ※[削除]を入力しろと書いているが[delete]でないと反応しない。。。

1-6.アプリケーションが削除されたことを確認

感想

削除と書いているが[delete]でないと進めなかったので記事にしてみた。。

AWS Resource Explorerを使ってみた


AWS Resource Explorerとは

AWSのリソースを効率的に検索し、管理するためのツール。
この名前・このタグが含まれているリソースを知りたい、などの用途に使える。

サポートしているリソース

すべてのリソースをサポートしているわけではないので注意
docs.aws.amazon.com

料金

無料なのでバシバシ使いましょう。

やること

実践!

1.Resource Explorer有効化
1-1.[AWS] - [Resource Explorer]
 ※Resource (Access) Managerもあるが別物なので注意
1-2.[Resource Exploree をオンにする]

1-3.下記を入力
 アグリゲータインデックスリージョン:インデックスを作成するリージョン
 ※いったんよく使うリージョンでOK


1-4.[Resource Exploree をオンにする]

1-5.すべて[成功]となったら、[リソース検索に進む]
 ※検索できるまで少し時間がかかる。

2.検索
2-1.クエリの検索窓で検索したい文字列を入力し、リソースが検索できることを確認

2-2.タグ検索 ※今回はタグの値が[test]のものを検索する
 2-2-1.クエリの検索窓をクリックし、[Tags] - [Tag Value]を選択

 2-2-2.[Tag Value =]を選択

 2-2-3.クエリの検索窓に[test]と入力

 2-2-4.タグの値が[test]のものが検索できたことを確認


感想

消し忘れたリソースを探す場合に使えそう。