Phoenix 데모 참조 (Phoenix demo reference)
Phoenix 딕타폰(dictaphone) 데모가 어떻게 구성되어 있는지 안내하는 참조 문서예요. fly launch가 생성하는 Dockerfile과 fly.toml을 바탕으로 각 파일과 라이브러리가 어떤 역할을 하는지, 주요 로직 포인트를 정리해 드립니다.
출처: 문서
본문
Phoenix 데모 소스는 GitHub에 있어요.
fly launch는 Dockerfile과 fly.toml 설정 파일을 제공합니다.
각 부분이 어떻게 조합되는지:
- 원조 web-dictaphone 앱은 애플리케이션 전체에 퍼져 있어요.
assets/js/dictaphone.js에 JavaScript가 들어 있어요.assets/css/dictaphone.css에 스타일시트가 들어 있어요.priv/static/favicon.ico에 이미지가 들어 있어요.lib/dictaphone_web/live/dictaphone.html.heex에 HTML이 들어 있어요.
lib/dictaphone_web/live/dictaphone.ex와lib/dictaphone_web/controllers/audio_controller.ex가 서버 구현을 담당합니다.- Ecto.Adapters.Postgres가 PostgreSQL 접근에 사용됩니다. 데이터베이스 접근은
DATABASE_URL시크릿을 통해 이루어져요. - ExAws.S3가 Tigris 접근에 사용됩니다. 연결을 설정하는 데 다음 시크릿이 사용돼요:
AWS_ACCESS_KEY_ID,AWS_ENDPOINT_URL_S3,AWS_REGION,AWS_SECRET_ACCESS_KEY,BUCKET_NAME. - Phoenix.LiveView 모듈이 WebSocket 지원에 사용됩니다.
- Phoenix.PubSub.Redis가 Redis 접근에 사용됩니다. 데이터베이스 접근에는
REDIS_URL시크릿이 사용돼요.
주요 로직 포인트:
lib/dictaphone_web/live/dictaphone.html.heex에 홈 페이지가 들어 있어요.- assets/js/dictaphone.js는 다음을 위해 수정되었어요.
- Fetch API를 사용해 클립 업로드
- 삭제에 Click Events 사용
- 이름 변경 작업에 Client Hooks 사용, WebSocket 코드, 나머지 렌더링은 Next.js에 위임.
lib/dictaphone_web/live/dictaphone.ex에 Redis 인터페이스가 들어 있어요. 순환 의존성을 피하기 위해 서버에서 분리되었습니다.app/audio/[name]/route.js에 브라우저 클라이언트와 redis pubsub 양쪽의 이벤트에 응답하는 로직이 들어 있어요.lib/dictaphone_web/controllers/audio_controller.ex에 오디오 클립의GET과PUT에 대한 서버 접근이 들어 있어요.WHISPER_URL시크릿이 설정되면PUT요청으로 오디오 클립이 Whisper 서버로 전달되고, 응답이 PostgreSQL 데이터베이스를 업데이트하는 데 사용됩니다. 코드는lib/dictaphone_web/controllers/audio_controller.ex에 있습니다.