🙆

Amplifyでプレビュー機能を有効化してみた話

2023/09/09に公開

AWS

Amplify

tech

はじめに

Amplifyのプレビュー機能、ブランチごとに環境を作って動作確認できるなんて・・
業務なんかでは、ステージング環境が少なくて、自分達で自由に扱えなかったなんてことがあったけど、これならいいね！こんな環境が欲しかった！というわけで、このプレビュー機能を堪能するべく、実際にやってみたお話です。

まずはプレビュー機能の設定

さっそくやってみましょう。
まずは、設定から。

Amplifyのページにあるアプリの設定 > プレビューから、プレビューを有効化ボタンをクリックします。

Github アプリケーションをインストールしてプレビューを有効化の画面が表示されるので、GitHun アプリケーションをインストールボタンをクリックします。
すると、Githubの画面に遷移するので、まだ未インストールの人はここで、アプリをインストールしてください。

developを選択して管理ボタンをクリックします。

develop ブランチのプレビュー設定を管理画面にて、プルリクエストのプレビューにチェックを入れ、プルリクエストのプレビュー - バックエンド環境は、すべての ...にしてみました。
最後に確認ボタンをクリックします。

これで設定は完了です。

ちょうどいいからついでに、Authenticatorも。

Amplify環境を最初にこしらえてありまして、これから、認証機能を追加してみたいと思います。
まずはローカルにて認証機能を追加していきます。

amplify add auth
Using service: Cognito, provided by: awscloudformation

 The current configured provider is Amazon Cognito.

 Do you want to use the default authentication and security configuration? Def
ault configuration
 Warning: you will not be able to edit these selections.
 How do you want users to be able to sign in? Email or Phone Number
 Do you want to configure advanced settings? No, I am done.
✅ Successfully added auth resource mylibrary8a675d6c 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

⚠️ You have enabled SMS based auth workflow. Verify your SNS account mode in the SNS console: https://console.aws.amazon.com/sns/v3/home#/mobile/text-messaging
If your account is in "Sandbox" mode, you can only send SMS messages to verified recipient phone numbers.

状態を確認してみます。
Authが追加されたことが確認できました。

amplify status

    Current Environment: dev

┌──────────┬───────────────────┬───────────┬───────────────────┐
│ Category │ Resource name     │ Operation │ Provider plugin   │
├──────────┼───────────────────┼───────────┼───────────────────┤
│ Auth     │ mylibrary8a675d6c │ Create    │ awscloudformation │
└──────────┴───────────────────┴───────────┴───────────────────┘

追加できたので、Amplify環境に取り込むためにamplify pushを実行します。

amplify push
⠧ Fetching updates to backend environment: dev from the cloud.⠋ Building resou
✔ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev

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


Deployment completed.
Deploying root stack mylibrary [ ====================---------------
        amplify-mylibrary-dev-94433    AWS::CloudFormation::Stack     UPDAT
        authmylibrary8a675d6c          AWS::CloudFormation::Stack     CREAT
Deployed auth mylibrary8a675d6c [ ==================================
        UserPool                       AWS::Cognito::UserPool         CREAT
        UserPoolClientRole             AWS::IAM::Role                 CREAT
        UserPoolClient                 AWS::Cognito::UserPoolClient   CREAT
        UserPoolClientWeb              AWS::Cognito::UserPoolClient   CREAT
        IdentityPool                   AWS::Cognito::IdentityPool     CREAT
        IdentityPoolRoleMap            AWS::Cognito::IdentityPoolRol… CREAT

Deployment state saved successfully.


Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
No AppSync API configured. Please add an API
✔ Synced UI components.

これで、認証機能が追加されました。
あとは、実装をしていくのみです。
App.tsxを下記のように修正します。

import React from 'react';
import './App.css';
import { Authenticator, Flex, WithAuthenticatorProps, withAuthenticator } from '@aws-amplify/ui-react'

export function App({ signOut, user }: WithAuthenticatorProps) {
  return (
    <Flex direction="column" justifyContent="center">
      <Authenticator>
        {({ signOut, user }) => (
          <main>
            <h1>Hello {user?.username}</h1>
            <button onClick={signOut}>Sign out</button>
          </main>
        )}
      </Authenticator>
    </Flex>
  );
}

export default withAuthenticator(App);

実装はこれで完了。
では、まずはローカルで動作確認をしてみましょう。

ログイン画面が立ち上がるようになったので、Create Accountタブから、EMail、電話番号、パスワードを入力してCreate Accountボタンをクリックします。