[AWS] IVS chat을 활용한 라이브 스트리밍 채팅 구성 (3)

 

AWS IVS

 

 

실습이 길수도 있는데 정말 금방 구축할 수 있어요!

한단계씩 차근차근 해봅시다!

0단계: 도구 설치

1. AWS CLI 설치: AWS를 명령어로 제어하는 도구입니다.
   • 설치 링크에서 다운로드 후 설치하세요.
   • 설치 후 터미널(CMD)에 aws configure를 입력해서, 발급받은 Access Key ID와 Secret Access Key를 입력해 로그인 상태를 만듭니다.
2. AWS SAM CLI 설치: 이 예제는 'SAM'이라는 도구를 씁니다. 복잡한 인프라를 코드 몇 줄로 만들어주는 도구입니다.
   • 설치 링크를 참고해 설치하세요.

   # Node.js는 버전 관리가 용이한 NVM(Node Version Manager)
   # SAM CLI 설치 파일 다운로드 및 압축 해제
   curl -L "https://github.com/aws/aws-sam-cli/releases/latest/download/aws-sam-cli-linux-x86_64.zip" -o "aws-sam-cli-linux-x86_64.zip"
   unzip aws-sam-cli-linux-x86_64.zip -d sam-installation
   
   # 설치 실행
   sudo ./sam-installation/install
   
   # 설치 확인
   sam --version

   
   
3. Node.js 설치: 웹 화면(프론트엔드)을 실행하기 위해 필요합니다. (LTS 버전 권장)
   

   # NVM 설치 스크립트 실행
   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
   
   # NVM 활성화 (터미널 재접속 없이 바로 반영)
   . ~/.nvm/nvm.sh
   
   # Node.js LTS 버전 설치
   nvm install --lts
   
   # 설치 확인
   node -v
   npm -v

   
   
   
4. Git 설치: GitHub에서 코드를 다운로드받기 위해 필요합니다.
   

   # 시스템 업데이트
   sudo dnf update -y
   
   # Git 설치
   sudo dnf install git -y
   
   # 설치 확인
   git --version

   
   
   

 

 

---

1단계: 코드 가져오기 & 백엔드(서버) 배포

1. 코드 다운로드

git clone <https://github.com/aws-samples/amazon-ivs-chat-web-demo.git>
cd amazon-ivs-chat-web-demo

 

2. 서버리스 폴더로 이동

우리는 먼저 AWS에 서버(Lambda, DynamoDB 등)를 만들어야 합니다. 그 코드는 serverless 폴더에 있습니다.

cd serverless

 

3. 빌드 (준비)

코드를 실행 가능한 상태로 만듭니다.

sam build

• (성공 시 Build Succeeded라고 뜹니다)

4. 배포 (AWS에 업로드)
이 명령어가 핵심입니다. AWS에 실제 자원을 생성합니다.

sam deploy --guided

 

5. 설정 질문 답변하기 (중요)

위 명령어를 치면 여러 질문이 나옵니다. (괄호 안이 추천 답변입니다)

 

 

질문 (설정 항목)	의미 (쉬운 설명)	추천 값
Stack Name	"프로젝트 폴더 이름" AWS에는 수많은 자원이 생성됩니다. 이 채팅 서버와 관련된 것들을 Stack이라는 하나의 박스에 담아 관리합니다. 나중에 지울 때 이 박스(Stack)만 지우면 됩니다.	ivs-chat-demo (알아보기 쉬운 이름)
AWS Region	"서버 위치(국가)" 서버가 물리적으로 어디에 있을지 정합니다. 한국 사용자 대상이라면 서울에 있어야 속도가 빠릅니다.	ap-northeast-2 (서울 리전 코드)
Confirm changes...	"미리보기 할까요?" 실제로 만들기 전에 무엇이 변경되는지 목록을 보여줄지 묻는 겁니다.	y (Yes)
Allow SAM CLI IAM role creation	"권한 자동 생성 허용" 가장 중요합니다. "SAM 도구가 내 대신 AWS에 권한(Role)을 만들어도 될까요?"라고 묻는 겁니다. 이게 없으면 서버가 작동하지 않습니다.	y (Yes)
Save arguments to...	"설정 저장할까요?" 지금 대답한 이 설정들을 파일(samconfig.toml)로 저장해둘지 묻습니다. 그래야 나중에 배포할 때 또 안 물어봅니다.	y (Yes)

 

 

---

2단계: 프론트엔드(웹 화면) 실행

이제 채팅 화면을 띄워서 방금 만든 서버와 연결할 차례입니다.

1. 웹 폴더로 이동 새로운 터미널 창을 열거나, 기존 창에서 폴더를 이동합니다.

cd ../web-ui

(만약 경로를 못 찾겠다면 amazon-ivs-chat-web-demo/web-ui 폴더로 이동하면 됩니다)

 

2. 라이브러리 설치

npm install

 

3. 설정 파일 수정 (연결 고리)

• web-ui 폴더 안에 있는 .env 파일을 찾으세요. (없다면 .env.local 혹은 src/config.js 같은 설정 파일이 있는지 확인합니다. 이 리포지토리의 경우 보통 src/config.js 파일이 있거나, .env 파일을 새로 만들어야 할 수도 있습니다.)

nano src/config.js

• 가장 쉬운 방법: src/config.js 파일을 열어서 코드를 직접 수정합니다.
• 1단계 마지막에 메모해둔 ApiURL과 WebSocketURL을 찾아 붙여넣습니다.

// 예시: src/config.js
export const API_URL = "<https://복사한주소>...";
export const WEBSOCKET_URL = "wss://복사한주소...";

 

 

4. AWS 명령어로 채팅방 직접 만들기

터미널에 아래 명령어를 복사해서 붙여넣으세요. 서울 리전에 my-chat-room이라는 이름의 채팅방을 하나 만듭니다.

aws ivschat create-room \\
  --name "my-chat-room" \\
  --region ap-northeast-2

• 결과: 화면에 arn:aws:ivschat:ap-northeast-2:... 로 시작하는 긴 문자열이 나올 겁니다.
• 할 일: 그 arn 전체를 복사해서 메모장에 적어두세요. 이게 바로 우리가 찾던 CHAT_ROOM_ID입니다.

5.웹 설정 파일(config.js) 최종 수정

이제 web-ui/src/config.js 파일을 열어서 아래 세 항목을 정확하게 채워넣으세요.

nano src/config.js

[수정할 내용]

// 1. CHAT_REGION: 지역 이름만 정확히 입력
export const CHAT_REGION = "ap-northeast-2";

// 2. API_URL: 방금 로그에 뜬 새로운 주소로 교체 (마지막 /Prod/ 확인)
export const API_URL = "<https://c7st8vothj.execute-api.ap-northeast-2.amazonaws.com/Prod/>";

// 3. CHAT_ROOM_ID: 1단계에서 명령어로 만든 그 arn 주소 붙여넣기
export const CHAT_ROOM_ID = "arn:aws:ivschat:ap-northeast-2:377682373321:room/방아이디";

• 저장: Ctrl + X -> Y -> Enter

6.실행 및 확인

npm start

이제 브라우저(http://IP주소:3000)를 새로고침하고 들어가 보세요.

• 성공 증거: 화면 우측 하단에 Waiting to connect... 대신 Connected 또는 채팅 입력창이 활성화되면 모든 세팅이 끝난 것입니다!

 

 

---

3단계: 테스트 해보기

1. 브라우저 화면에 채팅창이 떴나요?
2. 사용자 이름을 입력하고 입장합니다.
3. 채팅을 쳐봅니다. "안녕하세요"
4. 성공 확인: 내가 쓴 글이 화면에 바로 뜨고, DynamoDB(AWS 콘솔)에 데이터가 쌓인다면 성공입니다!