Open5

Amplifyを使いこなす

nabetsunabetsu

チームでの開発

環境を共有する

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"
        }
    }
}
nabetsunabetsu

ソーシャル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 publishamplify 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

nabetsunabetsu

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というエラーが出た

参考資料

nabetsunabetsu

Hostingの選択肢

Webサイトのホスティングする場合には以下2つの選択肢がある。

  • Amplify Console
  • S3 + CloudFront

Amplify Consoleも実際に作成されるリソースはS3 + CloudFrontだが、管理はAWS側で行われるためこちら側でリソースの操作、設定ができない(コンソールにそもそも出てこない)。
そのため、WAFを使う場合にはS3 + CloudFrontしか選択肢がない。

参考資料

nabetsunabetsu

チュートリアル等

  • AMPLIFY SNS WORKSHOP
    • AWS公式のチュートリアル。TwitterライクなSNSの開発を通じてAmplifyの使い方を学ぶ。フレームワークはReact