Amplifyを使いこなす
チームでの開発
環境を共有する
Amplify CLIで操作をした際に自動で作成されるteam-provider-info.json
に環境ごとのCloudFormationスタックの情報が記載されている。
チームで同じ環境をいじりたいときにはこれがリポジトリで管理されていないとひも付けが出来ない。
{
"dev": {
"awscloudformation": {
"AuthRoleName": "multenvtest-20181115101929-authRole",
"UnauthRoleArn": "arn:aws:iam::132393967379:role/multenvtest-20181115101929-unauthRole",
"AuthRoleArn": "arn:aws:iam::132393967379:role/multenvtest-20181115101929-authRole",
"Region": "us-east-1",
"DeploymentBucketName": "multenvtest-20181115101929-deployment",
"UnauthRoleName": "multenvtest-20181115101929-unauthRole",
"StackName": "multenvtest-20181115101929",
"StackId": "arn:aws:cloudformation:us-east-1:132393967379:stack/multenvtest-20181115101929/fc7b1010-e902-11e8-a9bd-50fae97e0835"
}
},
"master": {
"awscloudformation": {
"AuthRoleName": "multenvtest-20181115102119-authRole",
"UnauthRoleArn": "arn:aws:iam::345090917734:role/multenvtest-20181115102119-unauthRole",
"AuthRoleArn": "arn:aws:iam::345090917734:role/multenvtest-20181115102119-authRole",
"Region": "us-east-1",
"DeploymentBucketName": "multenvtest-20181115102119-deployment",
"UnauthRoleName": "multenvtest-20181115102119-unauthRole",
"StackName": "multenvtest-20181115102119",
"StackId": "arn:aws:cloudformation:us-east-1:345090917734:stack/multenvtest-20181115102119/3e907b70-e903-11e8-a18b-503acac41e61"
}
}
}
ソーシャルIDP
必要な設定
- ソーシャルIDPの使用設定
- リダイレクトURLの設定
- ソーシャルIDP側(Google, Facebook等)の設定
- Cognito側の設定
- アプリケーション側の設定
ソーシャルIDPの使用設定
以下の記事などを参考に設定する。
必要な設定としては
リダイレクトURLの設定
ソーシャルIDP側で認証を行った後にリダイレクトされるURLを設定しないと動作しない。
注意点はソーシャルIDP側とCognito側双方で設定が必要な点。(複数環境を使用したい場合はアプリケーション側でも考慮が必要)
ソーシャルIDP側の設定
Google、Facebook等の認証後のリダイレクト設定を行う。
基本的に各社のDeveloperサイトからブラウザ上で設定を行えばOK。
Googleの場合だと以下のイメージで「承認済みのリダイレクトURI」に追加すればOK
Cognito側の設定
方法1: ローカル(Amplify CLI)
Amplify CLIでamplify update auth
からリダイレクトURLの設定を変更することができる。
開発フローによるが、設定変更をそのままローカルからamplify push
で適用してもいいし、Amplify Consoleによる自動デプロイのワークフローを組んでいるのなら、後述される変更をコミットしてプッシュすれば自動でデプロイされる。
Using service: Cognito, provided by: awscloudformation
What do you want to do? Add/Edit signin and signout redirect URIs
Which redirect signin URIs do you want to edit? https://prod.xxxxxxxxxx.amplifyapp.com/
? Update https://prod.xxxxxxxxxx..amplifyapp.com/ https://staging.xxxxxxxxxx.jp/
Do you want to add redirect signin URIs? Yes
Enter your new redirect signin URI:
>> The value must be a valid URI with a trailing forward slash. HTTPS must be used instead of HTTP unless you are using localhost.
% amplify update auth
Please note that certain attributes may not be overwritten if you choose to use defaults settings.
You have configured resources that might depend on this Cognito resource. Updating this Cognito resource could have unintended side effects.
Using service: Cognito, provided by: awscloudformation
What do you want to do? Add/Edit signin and signout redirect URIs
Which redirect signin URIs do you want to edit? https://prod.xxxxxxxxxx..amplifyapp.com/
? Update https://prod.xxxxxxxxxx..amplifyapp.com/ https://staging.xxxxxxxxxx..jp/
Do you want to add redirect signin URIs? No
Which redirect signout URIs do you want to edit? https://prod.xxxxxxxxxx..amplifyapp.com/
? Update https://prod.xxxxxxxxxx..amplifyapp.com/ https://staging.xxxxxxxxxx..jp/
Do you want to add redirect signout URIs? Yes
Enter your new redirect signout URI: https://staging.xxxxxxxxxx..jp/
? Do you want to add another redirect signout URI No
Successfully updated auth resource xxxxxxxxxxxxxxx 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
Successfully updated resource xxxxxxxxxxxxxxx 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
以下の3ファイルが差分として検出される。リダイレクトURLの設定値自体はparameters.json
に追加されている。
% git status
...
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git restore <file>..." to discard changes in working directory)
modified: amplify/backend/auth/xxxxxxxxxxxxxx/xxxxxxxxxxxxxx-cloudformation-template.yml
modified: amplify/backend/auth/xxxxxxxxxxxxxx/parameters.json
modified: amplify/team-provider-info.json
方法2: Admin UI
Admin UIのAuthenticationからでも設定ができるみたい
アプリケーション側の設定
複数コールバックURLの対応がAmplify Authではされていないので、複数の環境を作成したときに正常に処理を行うにはアプリケーション側で対応が必要。
(参考: Amplify auth は複数のコールバックURLに対応していない)
GitHub IssuesのAllowing multiple redirectSignIn/redirectSignOut urls breaks federated authに記載されている以下の解決策で問題なさそう。
import awsmobile from './aws-exports';
const { host } = window.location;
// Fix issues with multiple redirect urls.
// Try to figure out which one to use...
if (awsmobile.oauth.redirectSignIn.includes(',')) {
const filterHost = url => new URL(url).host === host;
awsmobile.oauth.redirectSignIn = awsmobile.oauth.redirectSignIn
.split(',')
.filter(filterHost)
.shift();
awsmobile.oauth.redirectSignOut = awsmobile.oauth.redirectSignOut
.split(',')
.filter(filterHost)
.shift();
}
export default awsmobile;
Amplify Consoleでのデプロイ時の対応
ローカルでビルド、デプロイ(amplify publish
、amplify push
)を行っているときには気が付かなかったが、Amplify Consoleで実施すると以下のエラーがでる。
2021-02-21T03:58:26.110Z [INFO]: [31mauth headless is missing the following inputParams facebookAppIdUserPool, facebookAppSecretUserPool, googleAppIdUserPool, googleAppSecretUserPool, loginwithamazonAppIdUserPool, loginwithamazonAppSecretUserPool[39m
以下のページを参考に環境変数に値を設定すればOK
CIでの実行
Amplify CLIにはHeadeless Modeがあり、CIからの実行時には基本的にこの仕組みを使う
注意点
- チームでの開発に記載した通り、同じ環境(CloudFormation Stack)を利用するには
team-provider-info.json
をリポジトリ管理の対象にする必要がありそう?- 最初のデプロイ時はローカルで作業する必要がある?
- 最新のAmplify CLI(
@aws-amplify/cli@4.41.2
)を使用して試したところ、Error: File at path: '/samplepath/amplify/.config/local-env-info.json' does not exist
というエラーが出た- 以下のIssueに書かれている通り
4.40.0
を使うようにしたらエラーが出なくなった -
I have the same issue with 4.41.2 when running amplify init on a project created by a colleague that I cloned from a git repo. Using 4.40.0 as suggested by @smithi1 fixed the issue.
https://github.com/aws-amplify/amplify-cli/issues/5931#issuecomment-762265781
- 以下のIssueに書かれている通り
参考資料
Hostingの選択肢
Webサイトのホスティングする場合には以下2つの選択肢がある。
- Amplify Console
- S3 + CloudFront
Amplify Consoleも実際に作成されるリソースはS3 + CloudFrontだが、管理はAWS側で行われるためこちら側でリソースの操作、設定ができない(コンソールにそもそも出てこない)。
そのため、WAFを使う場合にはS3 + CloudFrontしか選択肢がない。
参考資料
チュートリアル等
-
AMPLIFY SNS WORKSHOP
- AWS公式のチュートリアル。TwitterライクなSNSの開発を通じてAmplifyの使い方を学ぶ。フレームワークはReact