Amplify 초기화

1. Amplify CLI 설치

npm install -g @aws-amplify/cli

2. Amplify 환경설정

amplify configure

위와 같은 명령어를 실행시키면 region과 user name을 물어봅니다.

한국에서 서비스할 것이라면 region은 ap-northeast-2(서울)이 좋겠죠.
user name원 원하는 이름으로 설정해 줍니다.

user name까지 입력하면, 인터넷 브라우저가 열리면서 AWS IAM 사용자 생성 페이지로 바로 연결됩니다.

AWS Management Console 엑세스에 체크해 주시고, 콘솔 비밀번호까지 입력해 주세요.

중간에 권한설정이 나오는데 나중에 변경할 수 있으니 다음을 눌러 일단 넘어가 줍니다.

이렇게 사용자를 생성하고 나면 사용자의 보안 정보(credencials)를 csv 파일로 받을 수 있습니다.

생성될 때 한 번만 다운로드 받을 수 있으니 잘 보관해야 합니다.
csv 파일을 열어보면 Access key id와 Secret Access key가 있습니다.
콘솔로 돌아와서 이 두 개의 키를 입력해 줍니다.

마지막으로 Profile Name을 입력하는데, Profile은 지금까지 설정한 내용들의 프리셋이라고 보면됩니다.

이렇게 프리셋의 이름을 설정하는 이유는 나중에 보면 알겠지만 다수의 Profile을 저장해 놓고, 프로젝트마다 서로 다른 Amplify 설정 파일을 생성하기 위해서 입니다.

왜 IAM 사용자를 생성해야 하나요?

AWS 홈페이지에 루트 사용자로 로그인하지 않고, 프로그램에서 AWS 계정 설정을 변경하려면, IAM에서 사용자로서 인증을 받은 후 권한까지 부여받아야 합니다.

Amplify CLI는 접속해서 AWS 서비스를 생성하고 연결하는 프로그램입니다.

따라서 이 작업을 수행하기 위해서 IAM 사용자를 생성하고, 권한을 부여해야지 Amplify CLI가 해당 IAM 사용자의 Access key id와 Secret Access key를 사용하여 AWS 설정을 변경합니다.

3. IAM 사용자 권한 설정

Amplify에서 넘어갔던 IAM 사용자 권한을 설정해 줍시다.

Amplify가 AWS 설정을 변경할 때 이전에 생성했떤 IAM 사용자로서 접속하기 때문에, 사용자 생성뿐만 아니라 권한 부여까지 해 주어야 합니다.

필요한 권한은 다음과 같습니다.

Amplify
직접 만들어주어야 합니다.
API GateWay
보통 Lambda와 함께 Rest API 요청을 처리하기 위해 사용되는데 Amplify Auth에 왜 필요한지는 모르겠습니다.
이 권한이 없으면 Amplify 초기화가 진행되지 않습니다.
Lmabda
AWS 서버리스 서비스입니다. 그런데 Amplify Auth에는 왜 필요한지 모르겠네요.
CloudFormation
Amplify에 의해 생성될 AWS 서비스들의 설정을 CloudFormation에서 한 번에 정의할 수 있고, 생성 및 연동(프로비저닝)까지 할 수 있습니다.
나중에 로컬에서 생성된 Amplify 설정 파일들을 AWS와 동기화시킬 때(amlify push) CloudFormation이 먼저 업데이트되고 나서 해당 CloudFormation의 스택의 내용이 나머지 서비스들에 적용됩니다.
Cognito Identity
Cognito User Pools
AWS의 인증 서비스입니다.
SNS
이메일 또는 문자 인증을 위해 필요한 권한입니다.
IAM
IAM에서 Role을 얻을 수 있는 권한이 필요합니다.
Role은 방금 생성한 IAM의 사용자외 비슷한 개념입니다.
정책이 붙어 있어서 할 수 있는 것과 할 수 없는 것(권한)을 정의할 수 있습니다.
정책은 주로 동적으로 생성된 객체에 적용됩니다. 예를 들어 Cognito 설정 중에 인증된 사용자와 인증되지 않은 사용자의 Role을 따로 정의할 수 있습니다. 여기선 Ampllify가 알아서 설정해 주기 때문에 굳이 몰라도 됩니다.
S3
CloudFormation 스택이 S3 버킷에 저장됩니다.

Amplify, Cognito User Pools, Cognito Identity, API GateWay의 FullAccess 정책(권한)은 없길래 직접 만들었습니다.

다음 포스트에서 정책을 직접 만드는 방법에 대해 알아보겠습니다.

4. Amplify 설정 파일 생성

프로젝트 경로에서 터미널을 열어 아래와 같은 명령어를 실행시켜 줍니다.

amplify init

프로젝트/환경 이름은 원하는 대로 설정하면 됩니다.

마지막에 Profile을 설정할 때 방금 만든 Profile을 선택해 줍니다.

5. Amplify 인증 설정 파일 생성

프로젝트 경로에서 터미널을 열어 아래와 같은 명령어를 실행시켜 줍니다.

amplify auth add

security configuration을 Default configuration으로 설정했습니다.

설정 옵션으로 Default configuration with Social Provider(Federation)으로 설정하여 구글, 페이스북같은 소셜 로그인 설정도 한 번에 할 수 있지만, 나중에 따로 설정해 주도록 하겠습니다.

6. 배포

프로젝트 경로에서 터미널을 열어 아래와 같은 명령어를 실행시켜 줍니다.

amplify push

그럼 amplify 폴더의 내용이 CloudFormation의 연결된 스택에 저장되고, 해당 스택의 내용대로 AWS 서비스가 생성되고 연결된다.

Amplify에 의해 생성된 CloudFormation 스택에는 인증에 필요한 AWS 서비스 뿐만 아니라, IAM 역할 등 세세한 것까지 모두 정의되어 있기 때문에 이제 프로젝트 안에서 실제로 개발자가 할 일은 Amplify 객체를 사용하여 Cognito의 인증 기능을 사용하는 것 뿐이다.

이제 Cognito를 확인해 보면 User Pool이 생성되어 있는 것을 확인할 수 있을 것입니다.

그리고 src/aws-exports.js 파일에 Amplify 모듈에서 제공하는 객체가 접근할 AWS Cognito의 접근 정보가 담겨 있는 것도 확인할 수 있습니다.

const awsmobile = {
    "aws_project_region": "<region>",
    "aws_cognito_identity_pool_id": "<identity_pool_id>",
    "aws_cognito_region": "<region>",
    "aws_user_pools_id": "<user_pools_id>",
    "aws_user_pools_web_client_id": "<user_pools_web_client_id>",
    "oauth": {}
};


export default awsmobile;

나중에 Google 로그인을 추가하기 위해서 "oauth"를 수정해 주어야 합니다. 다음 포스트에서 다뤄보겠습니다.

7. 프로젝트에 Amplify 설치

프로젝트 경로에서 터미널을 열어 아래와 같은 명령어를 실행시켜 줍니다.

yarn add aws-amplify aws-amplify-react

8. 프로젝트에서 Amplify 사용

이제부터 정말 간단하게 인증 기능을 구현할 수 있습니다.

아래 5개의 Auth 객체의 메소드만 있으면 대부분의 인증 기능을 구현할 수 있습니다.

인스타그램 클론코딩에 아래 5개의 메소드를 적용해 보겠습니다.

import Amplify from 'aws-amplify'
import aws_exports from './aws-exports';
Amplify.configure(aws_exports);

import { Auth } from 'aws-amplify';

Auth.signIn(userName.value, password.value); // 로그인
Auth.signOut(); // 로그아웃

Auth.signUp({password: password.value,
             username: userName.value ,
             attributes: {
                  email: email.value,
                  given_name: firstName.value,
                  family_name: lastName.value
             }
}); // 회원가입

Auth.confirmSignUp(userName.value, secret.value); // secret 코드 전송

Auth.currentAuthenticatedUser(); // 현재 인증된 사용자 정보 얻기

이제 리액트와 리액트 카테고리의 인스타그램 클론 인증 포스트에서 위의 코드를 사용해 보겠습니다.

참조

저작자표시 비영리 변경금지

'AWS > Amplify' 카테고리의 다른 글

AWS Amplify란? (0)	2020.05.11

Joondong2 기술블로그

Amplify 초기화

1. Amplify CLI 설치

2. Amplify 환경설정

왜 IAM 사용자를 생성해야 하나요?

3. IAM 사용자 권한 설정

4. Amplify 설정 파일 생성

5. Amplify 인증 설정 파일 생성

6. 배포

7. 프로젝트에 Amplify 설치

8. 프로젝트에서 Amplify 사용

참조

'AWS > Amplify' 카테고리의 다른 글

티스토리툴바

Amplify 초기화

1. Amplify CLI 설치

2. Amplify 환경설정

왜 IAM 사용자를 생성해야 하나요?

3. IAM 사용자 권한 설정

4. Amplify 설정 파일 생성

5. Amplify 인증 설정 파일 생성

6. 배포

7. 프로젝트에 Amplify 설치

8. 프로젝트에서 Amplify 사용

참조

'AWS > Amplify' 카테고리의 다른 글

'AWS/Amplify' Related Articles

티스토리툴바