Amplifyを使ってみた｜なぐり書きメモ
AWS Amplifyドキュメント:
https://docs.aws.amazon.com/amplify/index.html
AWS amplify
AWS Amplify enables developers to develop and deploy cloud-powered mobile and web apps. The Amplify Framework is a comprehensive set of SDKs, libraries, tools, and documentation for client app development. The Amplify Console provides a continuous delivery and hosting service for web applications.
AWS Amplifyはクラウドを使ったモバイルアプリやウェブアプリの開発や、デプロイする開発者に手助けする。
ホスティングサービスがあって簡単にデプロイできる。 しかもCI、CD機能があるのでpushするだけで自動で最新のバージョンをデプロイできるようになる。 Amplify Consoleがそれらの機能を担っている。
githubなどリポジトリの連携が必要。 ものによってはroleが必要。
ホスティングだけを試したいならこの記事がわかりやすかった。
【Amplify入門】ReactもVue.jsも使わないシンプルな静的サイトを構築する | DevelopersIO
今の所のイメージ
ユーザーが触るフロントエンド側のアプリケーション（単純なhtmlのみのサイトまたはjavascriptも構成するサイト、vue, reactなどのjavascriptフレームワークを使用したwebアプリケーション、android,ios,flutterなどのモバイルアプリケーション）のデプロイ機能を担う(Amplify console)。
フロントエンドに対し、バックエンドは柔軟に決めることができそう。 amplifyでバックエンド機能を提供する他(amplify CLI)、開発者がバックエンドを作成しフロントと連携できる。 amplifyでバックエンドを作る場合は、amplify CLIを使い、AWSのリソースを作成し、バックエンド機能を作っていく。amplify CLIを使うと、複雑なAWSのマネージド・サービスをコンソールの質問形式に答えるだけで希望するサービスが使える利便性がある。
構成要素
- Amplify CLI
- Amplify Framework
- Amplify Console
Amplify CLI
ドキュメント：https://docs.amplify.aws/cli/auth/overview
The Amplify Command Line Interface (CLI) is a unified toolchain to create AWS cloud services for your app. Let’s go ahead and install the Amplify CLI.
Amplify CLIのインストール
npm install -g @aws-amplify/cli
Get started - Installation - Amplify Docs
amplify statusコマンドについて このコマンドはカレントディレクトリに依存しているらしく、カレントディレクトリがどこであるかでコマンド結果が変わる。 amplifyディレクトリを含むカレントディレクトリで有効に機能することは確認している。
Amplify CLIを使うにはnpmでインストールする。そして amplify add authをやると認証機能を追加することができる。
Configure the Amplify CLI
amplify configure
ローカルにAmplifyCLIをセットアップするにあたり、AWSアカウントとローカルのAmplifyCLIをつなげる調整をする。
To set up the Amplify CLI on your local machine, you have to configure it to connect to your AWS account.
https://docs.amplify.aws/cli/start/install#configure-the-amplify-cli
amplify のバックエンドを削除する場合にはどのようにすればよいか？ Amplify CLIでやるのか、Amplify コンソールを使うのか
ソーシャル認証の実装（amplify CLI）
https://docs.amplify.aws/lib/auth/social/q/platform/js
フロントエンドの実装（vuejs）
amplify delete
amplify delete //結果 ? Are you sure you want to continue? This CANNOT be undone. (This would delete all the environments of the project from the cloud and wipe out all the local files created by Amplify CLI) Yes ⠋ Deleting resources from the cloud. This may take a few minutes... Deleting env:dev
amplify deleteコマンドはすべての環境とamplify CLIによって作られたローカルファイルの削除をやってくれるようだ。
smplify variables
Environment variables are key-value pairs that are available at build time. These configurations can be anything, including the following: Database connection details Third-party API keys Different customization parameters Secrets
ビルドするときに使うkey-valueのペアのことを環境変数といい、これはamplify consoleで設定する。
環境変数の設定
環境変数はamplify consoleで設定する https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/environment-variables.html#setting-env-vars
環境変数の利用
環境変数の利用はamplify consoleで設定する
ソーシャルサインインの設定方法
googleの認証を通したいときにエラーになてしまったのでいかが必要だとわかった。
amplify authの機能でログイン
ログインが成功するとローカルストレージにいろんな項目が保存される事がわかった。
UserAttributes: [{Name: "sub", Value: "d8b66bc8-6fb8-4107-bbe6-bf856484b59b"}, {Name: "email_verified", Value: "true"},…]
0: {Name: "sub", Value: "d8b66bc8-6fb8-4107-bbe6-bf856484b59b"}
1: {Name: "email_verified", Value: "true"}
2: {Name: "phone_number_verified", Value: "false"}
3: {Name: "phone_number", Value: "+81090********"}
4: {Name: "email", Value: "******@gmail.com"}
Username: "d8b66bc8-6fb8-4107-bbe6-bf856484b59b
