Next.js 데모 참조
Next.js 데모 소스는 GitHub에 있어요.
fly launch는 Dockerfile
과 fly.toml 설정 파일을 만들어 줘요. 앱을 변경했을 때 npx @flydotio/dockerfile을 실행해 업데이트된 Dockerfile을 만들 수 있어요.
각 요소들이 어떻게 조합되는지 살펴볼게요:
- 원래 web-dictaphone 앱은 Next.js 앱 디렉터리에 배치돼요:
app/dictaphone.js에 JavaScript가 들어 있어요.app/globals.css에 스타일시트가 들어 있어요.app/page.js에 HTML이 들어 있어요.
server.js와app/audio/[name]/route.js에 서버 구현이 들어 있어요.- PostgreSQL 접근에는 pg 모듈을 사용해요.
데이터베이스 접근은
DATABASE_URL시크릿을 통해 이루어져요. 이 모듈은 저수준이라 이 데모에는 충분하지만, 대부분의 최신 Node.js 앱은 ORM을 사용해요. - Tigris 접근에는 AWS SDK for JavaScript
를 사용해요. 연결을 설정하는 데 다음 시크릿이 사용돼요:
AWS_ACCESS_KEY_ID,AWS_ENDPOINT_URL_S3,AWS_REGION,AWS_SECRET_ACCESS_KEY,BUCKET_NAME. - express-ws 모듈은 WebSocket 지원에 사용돼요.
- redis 모듈은
Redis 접근에 사용돼요.
REDIS_URL시크릿이 데이터베이스 접근에 사용돼요.
로직의 핵심 포인트:
app/page.js는 홈 페이지를 담당해요. 모든 클립 데이터는 웹 소켓에서 옵니다.app/dictaphone.js는 여러 지점에서 Fetch API를 사용해 서버 요청을 하도록 수정되었어요. 삭제와 이름 변경 동작은 React JSX 홈 페이지 뷰에서 참조할 수 있도록 분리되어 있어요.server.js에는 WebSocket 코드가 들어 있고, 나머지는 Next.js가 렌더링하도록 위임해요.pubsub.js에는 Redis 인터페이스가 들어 있어요. 순환 의존성을 피하기 위해 서버에서 분리되었어요.app/audio/[name]/route.js에는 오디오 클립에 대한 GET, PUT, DELETE 요청에 응답을 만드는 로직이 들어 있어요.app/page.js에는 웹 소켓의 클라이언트 구현이 들어 있어요.WHISPER_URL시크릿이 설정되면,PUT요청 시 오디오 클립이 Whisper 서버로 전달되고, 응답이 PostgreSQL 데이터베이스를 업데이트하는 데 사용돼요. 이 코드는app/audio/[name]/route.js에 있어요.
출처: 문서