화상 채팅 앱을 구축하는 방법
얼마 전, 이 멋진 Twilio 튜토리얼을 우연히 발견했습니다. Phil Nash가 React Hooks를 사용해 비디오 채팅을 만드는 방법을 설명하고 있었고, 그래서 저는 Back4app에서 실행해 보기로 했습니다. Back4app은 무료이고, 훌륭하며 Parse와 통합될 수 있기 때문입니다. 그 덕분에 무료 웹 호스팅(Back4app 서브도메인 포함)을 사용할 수 있고, 앱을 호스팅하며, 실시간 데이터 전송을 활용해 향후 채팅 기능도 추가할 수 있습니다.
이 게시물은 제가 그것을 작동시키기 위해 수행한 과정의 워크스루입니다.
Contents
먼저 해야 할 일
온라인에서 작동하기 전에 필의 글을 읽고 컴퓨터에서 작동하도록 하는 것이 좋습니다.
계속 진행하려면 NodeJS, React 및 Express에 대한 최소한의 지식이 필요합니다. 제가 수행한 단계와 그 이유를 설명해 드리겠지만, 이러한 기술에 익숙하지 않다면 왜 이러한 기술이 필요한지 정확히 이해하지 못할 수도 있습니다.
첫 단계 – 준비물
Phil의 글에 따르면 Node.js와 NPM이 설치되어 작동 중이어야 한다고 나와 있습니다. 제 시스템에는 이미 설치되어 있으므로 여러분도 설치되어 있는지 확인하세요.
또한 Twilio 계정이 필요하므로 무료 계정을 만들면 바로 사용할 수 있습니다.
두 번째 단계 – 시작하기
첫 번째 단계인 리포지토리 복제는 저에게는 효과가 없었습니다. 필이 말한 명령은 다음과 같습니다:
git clone -b twilio [email protected]:philnash/react-express-starter.git twilio-video-react-hooks
몇 가지 오류가 발생했지만 결국 저에게 효과가 있었던 것은 이 기능이었습니다:
git clone https://github.com/philnash/twilio-video-react-hooks.git
이 문제를 해결한 후에는 다른 명령이 잘 실행되었습니다:
cd twilio-video-react-hooks npm 설치
결과:
로컬에서 실행하는 경우 필의 글에서 설명한 대로 환경 파일을 설정해야 하지만, 여기서는 백4앱에서 실행하는 데 중점을 두었으므로 지금은 건너뛰겠습니다.
Twilio 계정의 TWILIO_API_KEY, TWILIO_API_SECRET 및 TWILIO_ACCOUNT_SID 값이 여전히 필요하지만 다른 위치에서 사용하겠습니다.
코드 약간 변경하기
아키텍처가 다르므로 몇 가지 주요 사항을 변경해야 합니다.
첫 번째는 NPM 모듈입니다. 위의 npm 설치 명령은 컴퓨터에 모듈을 설치하지만 Back4app에서는 Parse에게 모듈을 설치하도록 지시해야 합니다.
이를 수행하는 방법을 설명하는 훌륭한 튜토리얼이 있으니 여기에서 확인하세요.
결국 제 package.json 파일은 다음과 같이 완성되었습니다:
{"의존성": {"express-pino-logger": "*","twilio": "*"}}
Twilio 모듈을 최신 버전(‘*’는 최신을 의미)으로 설치하고 있음을 알 수 있습니다. 이 시점에서 왜 이렇게 하는지 의아해하실 수도 있는데, Parse에는 이미 스택에 Twilio 모듈이 빌드되어 있습니다:
그 이유는 바로 버전 관리 때문입니다. 호환성을 위해 모든 Parse 버전에는 특정 버전의 모듈 스택이 있으며, 이 모듈 스택은 특정 사례에서 작동할 수도 있고 작동하지 않을 수도 있습니다. 스택에 나열되지 않은 버전을 사용하려면 package.json 파일에 해당 버전을 지정하여 Parse가 올바른 버전을 설치하도록 할 수 있습니다.
구축해 봅시다
배포하려면 런타임에 최적화된 코드 버전을 만들어야 합니다. Phil의 글에서 그는 실행해야 한다고 말합니다:
npm 실행 개발
를 로컬 환경에서 실행할 수 있지만, 저희의 경우에는 프로젝트의 디렉토리 내부에서 실행합니다:
npm 실행 빌드
를 클릭하면 모든 에셋이 포함된 빌드라는 새 폴더가 생성됩니다:
그런 다음 빌드 폴더 내의 모든 콘텐츠를 클라우드 코드 섹션의 공개 폴더에 업로드합니다.
업로드하는 방법에는 여러 가지가 있습니다. 브라우저에서 수동으로 업로드할 수도 있지만, 저는 모든 것을 자동으로 배포하는 Back4app CLI를 선호합니다. 훨씬 빠르고 모든 것이 제자리에 있는지 확인할 수 있습니다.
결국 기본 구조는 다음과 같아야 합니다:
App.js 구성
수동으로 변경해야 하는 파일이 하나 있는데, 바로 프로젝트의 서버 디렉터리 내에 있는 index.js 파일입니다.
구문 분석은 index.js가 아닌 app.js라는 파일을 실행하도록 어렵게 구성되어 있으므로 해당 파일의 이름을 변경해 보겠습니다.
app.js라는 이름의 복사본을 만들고 원본의 이름을 app.js로 바꿀 수 있지만 결국에는 app.js라는 이름을 사용해야 합니다:
또한 해당 파일을 몇 가지 변경해야 합니다.
7번 라인에 다음과 같이 표시됩니다.
const app = express();
Parse에는 이미 Express가 로드되고 인스턴스화되어 있으므로 충돌이 발생합니다. 그 줄을 주석 처리해 보겠습니다:
또한 41~43번째 줄에는 다음과 같이 적혀 있습니다:
app.listen(3001, () =>)
console.log('Express 서버가 localhost:3001에서 실행 중입니다')
);
보안상의 이유로 Parse는 해당 포트를 열 수 없으므로 이 포트도 주석 처리해 보겠습니다:
또 다른 한 가지는 결국 express-pino-logger 모듈을 사용하지 않았기 때문에 4번째 줄과 10번째 줄을 주석 처리해 보겠습니다:
const pino = require('express-pino-logger')();
...
app.use(pino);
따라서 다음과 같이 표시됩니다:
이제 파일 맨 위를 보면 이 파일이 다른 두 개의 로컬 파일인 config와 토큰을 호출하는 것을 확인할 수 있습니다:
const config = require('./config');
...
const { videoToken } = require('./tokens');
이러한 로컬 파일을 app.js 파일과 함께 업로드해야 하므로 클라우드 폴더에 세 파일을 모두 업로드해 보겠습니다.
최종 구조는 다음과 같습니다:
코딩 부분 완료
이제 코드가 배포되었고 모든 것이 정상적으로 작동합니다. 이제 몇 가지 설정을 할 차례입니다.
필이 Twilio의 자격 증명으로 .env 파일을 설정해야 한다고 말한 부분을 기억하시나요?
Parse의 서버 설정 패널에 해당 섹션이 있습니다.
환경 변수 패널을 엽니다:
그리고 .env 파일에서와 마찬가지로 설정합니다:
Twilio 계정에서 해당 값을 검색할 수 있다는 점을 기억하세요:
웹 호스팅 구성
이제 서버 설정 창에서 웹 호스팅 및 실시간 쿼리 섹션으로 이동합니다:
웹 호스팅을 사용하도록 설정하고 애플리케이션에 back4app.io 하위 도메인을 설정합니다:
저장하면 바로 사용할 수 있습니다.
테스트
이제 애플리케이션을 테스트할 차례입니다.
브라우저에서 웹 호스팅에 설정한 URL로 이동합니다. 프로토콜로 HTTPS를 사용해야 한다는 점을 잊지 마세요.
카메라에 대한 액세스 권한을 요청할 것이므로 반드시 HTTPS를 사용해야 하며, 그렇지 않으면 오류가 발생합니다. 따라서 다음 주소로 이동하세요:
https://Your_Domain_Name.back4app.io
브라우저에서 카메라와 마이크 사용 권한을 요청할 것입니다. 해당 권한을 부여하면 화면에서 자신을 볼 수 있을 것입니다:
결론
Back4app에서 React 프로젝트를 만드는 것은 쉽고, 무료이며, 멋집니다. 약간의 재작업만 거치면 필의 프로젝트를 바로 실행할 수 있었습니다.
또한 안전하고 확장 가능하며 장애에 강하고 백업이 이미 설정되어 있는 등 Parse와 Back4app의 모든 이점을 누릴 수 있습니다.
Google로 로그인, Apple로 로그인, LinkedIn으로 로그인, 실시간 데이터 전송, 멋진 데이터베이스 허브와 연동하는 등의 Parse 기능으로 기능을 강화할 수도 있습니다.
강력한 성능과 다양한 기능, 그리고 최고의 장점: 소규모 앱을 실행할 수 있는 모든 기능이 무료로 제공됩니다.
