# Drop

계정과 설치 없이 6자리 코드 또는 QR로 두 기기를 연결해 텍스트와 파일을 주고받는 웹 앱입니다. 브라우저가 지원되는 Windows, macOS, Linux, Android, iOS에서 동작합니다.

## 블로그

`/blog`에서 제품 사용 가이드를 볼 수 있습니다. 글 제목·본문·URL은 `src/blog.js`, 편집형 레이아웃은 `public/blog.css`에서 관리합니다. 새 글을 추가하면 `public/sitemap.xml`에도 해당 URL을 등록합니다. 블로그 광고는 기존 `ADSENSE_CLIENT_ID`와 `ADSENSE_SLOT_ID`를 사용하며, 데스크톱은 글 옆에, 모바일은 본문 흐름에 표시됩니다. 광고 재고가 없으면 해당 광고 영역을 숨깁니다.

## 전송 방식

- WebRTC 데이터 채널을 우선 사용해 기기 간 직접 전송합니다.
- 직접 연결이 늦거나 불가능하면 Socket.IO 서버 릴레이로 자동 전환합니다.
- 파일은 청크 단위로 보내며, 서버 디스크에는 저장하지 않습니다.
- 연결 코드와 세션은 메모리에만 있고 설정된 시간 뒤 만료됩니다.

## 로컬 실행

Node.js 20 이상이 필요합니다.

```bash
npm install
npm run dev
```

브라우저에서 `http://localhost:8300`을 엽니다. 같은 네트워크의 모바일 기기에서는 PC의 LAN IP와 같은 포트로 접속할 수 있습니다. 카메라 QR 접속과 WebRTC를 인터넷에서 안정적으로 쓰려면 HTTPS가 필요합니다.

## 환경변수

루트의 `.env`는 로컬과 서버가 같은 키와 값을 사용합니다. 실제 `.env`는 Git에 포함되지 않으며, 자동 배포가 추적 가능한 `.env.example`을 서버의 `/var/www/front/drop/.env`로 매번 복사해 두 환경을 동일하게 유지합니다.

- `PORT`: 앱 포트
- `DOMAIN`: 운영 호스트. 기본값은 `drop.officialsite.kr`
- `PAIR_CODE_TTL_SECONDS`: 연결 전 코드 유효시간
- `ACTIVE_SESSION_TTL_SECONDS`: 연결된 방의 최대 유효시간
- `MAX_FILE_SIZE_MB`: 한 파일의 최대 크기
- `STUN_URLS`: 쉼표로 구분한 STUN URL
- `TURN_URLS`, `TURN_USERNAME`, `TURN_CREDENTIAL`: 다른 네트워크 간 연결 성공률을 높이는 TURN 설정
- `PUBLIC_ORIGIN`: 선택값. QR에 넣을 외부 HTTPS 주소(예: `https://drop.example.com`)

## 자동 배포

`live` 브랜치 푸시 시 테스트를 통과한 뒤 서버의 `/var/www/front/drop` 클론을 해당 브랜치로 갱신합니다. 새 버전은 비활성 PM2 blue/green 슬롯(`8301`/`8302`)에서 먼저 실행되고 헬스체크가 통과한 경우에만 `drop-router:8300`이 새 연결을 전환합니다. 검증이 실패하면 기존 슬롯을 유지해 자동 롤백하며, 이전 슬롯은 다음 배포까지 warm rollback 및 기존 WebSocket 연결 드레인 대상으로 남습니다. GitHub 저장소에 다음 Actions secrets를 등록합니다.

- `SERVER_HOST`
- `SERVER_USER`
- `SERVER_SSH_KEY`
- `SERVER_PORT`

서버에는 Node.js 20 이상, PM2, `curl`이 설치되어 있어야 하며 배포 사용자가 `/var/www/front/drop`에 쓸 수 있어야 합니다. `drop-blue`와 `drop-green`은 각각 `127.0.0.1:8301`, `127.0.0.1:8302`에서 교대 실행되고 `drop-router`만 `127.0.0.1:8300`에서 Apache 요청을 받습니다. Apache가 외부 HTTPS와 WebSocket을 처리하며 DNS A/AAAA 레코드는 서버를 가리켜야 합니다.

### Apache 최초 설정

저장소의 `deploy/apache/drop.officialsite.kr.conf`를 서버의 `/etc/apache2/sites-available/drop.officialsite.kr.conf`에 복사한 뒤 한 번만 실행합니다.

```bash
sudo a2enmod proxy proxy_http proxy_wstunnel headers ssl
sudo cp /var/www/front/drop/deploy/apache/drop.officialsite.kr.conf /etc/apache2/sites-available/drop.officialsite.kr.conf
sudo a2ensite drop.officialsite.kr.conf
sudo apache2ctl configtest
sudo systemctl reload apache2
sudo certbot --apache -d drop.officialsite.kr --redirect
```

Certbot이 만든 443 가상 호스트에서도 `/socket.io/` 프록시의 `upgrade=websocket` 설정이 유지되어야 합니다. HTTPS 가상 호스트의 `X-Forwarded-Proto`와 `X-Forwarded-Port`는 각각 `https`, `443`이어야 합니다.