[AWS] IoT + React App + Amplify

지난 편에서 AWS IoT에 대해 알아보고 Node.js와 Python 앱을 돌려봤는데요, 여기에 AWS Amplify 기반의 React App을 추가해 봅시다.

AWS IoT는 X.509 인증서 기반으로 암호화하는데, React와 같은 웹앱의 경우에는 인증서 파일을 직접 접근할 수 없습니다. 예전에는 Javascript SDK 코드 안에 access key, secret access key를 넣었던 것 같은데, 이런 경우 프론트엔드 앱에 키가 하드코딩되어 유출될 수 있다는 우려 때문인지 SDK v3에서는 그런 API가 없어진 듯 합니다.

간단한 방법으로는 Node.js 백엔드 서버를 두고 백엔드 서버에서 인증서 파일을 읽어 AWS IoT 연결하고 프론트엔드와 별도의 웹소켓으로 연결하는 방법이 있겠으나, 중간에 릴레이를 한다는 것이 뭐랄까 비효율적인 느낌이 듭니다. Node.js에서 인증서 대신 .env 파일이나 환경변수를 통해 인증하는 방법도 있긴 한데, React 앱에서는 사용이 불가합니다.

다행히도 자격 증명 공급자 기능이 있는데요, AWS IAM/Cognito를 통해 권한 설정을 해둔 계정이 접속한 경우, 인증서 없이도 AWS IoT에 접근할 수 있게 해주는 기능입니다. 공식 튜토리얼을 보면 방대하고 복잡해 보이지만, 샘플 코드를 참고해서 따라해 보면 크게 어렵지 않습니다.

튜토리얼과 샘플 코드를 참고해서 쉽게 React 앱을 만들어 봅시다. AWS Amplify + React + AWS IoT 샘플 코드를 Python 샘플 앱과 잘 동작하는 것을 확인했습니다. 

 

Amplify PubSub

위 AWS Amplify + React + AWS IoT 샘플 코드는 aws-sdk와 aws-iot-device-sdk를 사용하는 예전 SDK v2이었는데,

Amplify에서 바로 사용할 수 있는 Amplify PubSub을 알아봅시다.

Step 1: Create IAM policies for AWS IoT

• IoT Core - Secure - Policies - Create - 정책을 하나 생성하고 iot* 권한을 줍니다.

Step 2: Attach your policy to your Amazon Cognito Identity

• 이 부분이 트릭키한데, AWS IoT에 연결할 Cognito Identity Id를 확인하는 방법은, 코드 상에서 찍거나 Cognito - Federated Identities - Identity browser 에서 확인합니다.
  • Amplify를 생성할 때 add auth 과정에서 이처럼 Cognito에 identitypool이 자동 생성되는데요, federated identities란, 자격 증명이라는 말로 어렵게 들리지만, 말 그대로 인증서? 열쇠? 같은 개념으로 이해하면 됩니다. 이것을 iot에 등록해주면 이 자격 증명을 얻은 상태에서 iot를 사용하게 해주겠다는 의미죠.

• Auth.currentCredentials().then((info) => {
        console.log(info.identityId);
  });

   
• 
• 그리고 나서 쉘 명령으로 위에서 identityId를 가져온 뒤 (콘솔에서 가져오는 방법은 없는 것 같은데 잘 모르겠네요...) 아래 명령으로 적용하면, AWS IoT - Secure - Policies - Targets - Policy targets에 Cognito Identity가 추가된 것을 볼 수 있습니다.
  • aws iot attach-policy --policy-name 'rubenPolicy' --target 'ap-northeast-2:~~~~~~'
  • aws-cli는 pip install awscli로 설치합니다.

Step 3: Allow the Amazon Cognito Authenticated Role to access IoT Services

• IAM - Roles에서 현재 Cognito에 해당하는 계정 맨 끝에 -autoRole로 끝나는 항목을 열고 Permissions policies - Add permissions - attach policies - AWSIotFullAccess를 찾아 추가합니다.

Troubleshoots

AWSIoTPythonSDK를 연결할 때 잘 안되거나 문제가 있을 때는 아래 사항을 검토해봅니다.

• AWS IoT 콘솔 - Secure - Policies에 정책이 있는가
• AWS IoT 콘솔 - Secure - Certificates에 해당 정책이 attach되어 있는가
  • certificates가 active인가
  • 앱에서 certificate를 잘 참조하는가

References

IoT Client - AWS SDK for JavaScript v3

 

AWS IoT의 Identity and Access Management - AWS IoT Core