Add contact form backend and deployment guide
- Resend API 통합 (이메일 발송) - ContactForm 클라이언트 컴포넌트 생성 - API Route (/api/contact) 구현 - 입력 검증 및 에러 처리 - 성공/실패 메시지 표시 - 환경변수 설정 (.env.local, .env.example) - 배포 가이드 작성 (DEPLOYMENT.md) - Resend 설정 방법 - Vercel 배포 가이드 - 가비아 도메인 연결 방법 - 트러블슈팅 가이드 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
237
DEPLOYMENT.md
Normal file
237
DEPLOYMENT.md
Normal file
@@ -0,0 +1,237 @@
|
||||
# 🚀 배포 가이드
|
||||
|
||||
## 1️⃣ Resend 설정 (이메일 발송)
|
||||
|
||||
### 1단계: Resend 계정 생성
|
||||
1. [resend.com](https://resend.com) 접속
|
||||
2. "Sign Up" 클릭 → GitHub 계정으로 가입
|
||||
3. 무료 티어: 월 3,000건 (충분함!)
|
||||
|
||||
### 2단계: API Key 발급
|
||||
1. Dashboard → "API Keys" 메뉴
|
||||
2. "Create API Key" 클릭
|
||||
3. Name: `jaengseung-made-production`
|
||||
4. Permission: `Sending access`
|
||||
5. 생성된 키 복사 (한 번만 표시됨!)
|
||||
|
||||
### 3단계: 도메인 인증 (선택사항)
|
||||
**옵션 A: Resend 서브도메인 사용 (간단)**
|
||||
- `onboarding@resend.dev`에서 발송
|
||||
- 바로 사용 가능
|
||||
|
||||
**옵션 B: 커스텀 도메인 사용 (전문적)**
|
||||
1. Resend Dashboard → "Domains"
|
||||
2. "Add Domain" 클릭
|
||||
3. `jaengseung-made.com` 입력
|
||||
4. DNS 레코드 복사
|
||||
|
||||
**가비아 DNS 설정:**
|
||||
1. [가비아 My가비아](https://my.gabia.com) 로그인
|
||||
2. "도메인" → "jaengseung-made.com" 선택
|
||||
3. "DNS 정보" → "DNS 관리" 클릭
|
||||
4. Resend에서 제공한 레코드 추가:
|
||||
```
|
||||
Type: TXT
|
||||
Host: _resend
|
||||
Value: [Resend에서 제공한 값]
|
||||
|
||||
Type: MX
|
||||
Host: @
|
||||
Value: [Resend에서 제공한 값]
|
||||
Priority: 10
|
||||
```
|
||||
5. 저장 후 10~30분 대기
|
||||
6. Resend에서 "Verify" 클릭
|
||||
|
||||
### 4단계: 로컬 환경변수 설정
|
||||
`.env.local` 파일 수정:
|
||||
```bash
|
||||
RESEND_API_KEY=re_your_actual_api_key_here
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2️⃣ Vercel 배포
|
||||
|
||||
### 1단계: GitHub 연동 (권장)
|
||||
|
||||
**GitHub에 푸시:**
|
||||
```bash
|
||||
# GitHub에 새 저장소 생성 (jaengseung-made)
|
||||
git remote add github https://github.com/your-username/jaengseung-made.git
|
||||
git push github main
|
||||
```
|
||||
|
||||
**Vercel 배포:**
|
||||
1. [vercel.com](https://vercel.com) 가입 (GitHub 연동)
|
||||
2. "Add New Project" 클릭
|
||||
3. GitHub 저장소 선택: `jaengseung-made`
|
||||
4. Environment Variables 추가:
|
||||
- `RESEND_API_KEY`: [발급받은 키 붙여넣기]
|
||||
5. "Deploy" 클릭
|
||||
6. 배포 완료! (약 2분)
|
||||
|
||||
### 2단계: 도메인 연결 (jaengseung-made.com)
|
||||
|
||||
**Vercel 설정:**
|
||||
1. Vercel Dashboard → 프로젝트 선택
|
||||
2. "Settings" → "Domains"
|
||||
3. "Add Domain" 클릭
|
||||
4. `jaengseung-made.com` 입력
|
||||
5. DNS 설정 안내 확인
|
||||
|
||||
**가비아 DNS 설정:**
|
||||
1. [가비아 My가비아](https://my.gabia.com) 로그인
|
||||
2. "도메인" → "jaengseung-made.com" 선택
|
||||
3. "DNS 정보" → "DNS 관리" 클릭
|
||||
4. 기존 A 레코드 삭제 (있다면)
|
||||
5. 새 레코드 추가:
|
||||
|
||||
**방법 A: A 레코드 (권장)**
|
||||
```
|
||||
Type: A
|
||||
Host: @
|
||||
Value: 76.76.19.19
|
||||
TTL: 600
|
||||
```
|
||||
|
||||
**방법 B: CNAME 레코드**
|
||||
```
|
||||
Type: CNAME
|
||||
Host: @
|
||||
Value: cname.vercel-dns.com.
|
||||
TTL: 600
|
||||
```
|
||||
|
||||
**www 서브도메인 추가:**
|
||||
```
|
||||
Type: CNAME
|
||||
Host: www
|
||||
Value: cname.vercel-dns.com.
|
||||
TTL: 600
|
||||
```
|
||||
|
||||
6. 저장 후 10~30분 대기
|
||||
7. Vercel에서 자동으로 SSL 인증서 발급 (HTTPS)
|
||||
|
||||
### 3단계: 배포 확인
|
||||
- https://jaengseung-made.com 접속
|
||||
- 문의 폼 테스트 (실제 이메일 발송 확인)
|
||||
|
||||
---
|
||||
|
||||
## 3️⃣ 대안: Gitea + Vercel CLI 직접 배포
|
||||
|
||||
Vercel CLI로 직접 배포:
|
||||
```bash
|
||||
# Vercel CLI 설치
|
||||
npm install -g vercel
|
||||
|
||||
# 프로젝트 폴더에서 실행
|
||||
cd C:\Users\박재오\Desktop\workspace\jaengseung-made
|
||||
|
||||
# 로그인
|
||||
vercel login
|
||||
|
||||
# 배포
|
||||
vercel --prod
|
||||
|
||||
# 환경변수 추가
|
||||
vercel env add RESEND_API_KEY
|
||||
# [발급받은 키 붙여넣기]
|
||||
# Production, Preview, Development 모두 선택
|
||||
|
||||
# 재배포
|
||||
vercel --prod
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4️⃣ Synology NAS 배포 (비추천)
|
||||
|
||||
성능/안정성 이유로 비추천하지만, 원하시면:
|
||||
|
||||
### Docker로 배포
|
||||
1. `Dockerfile` 생성 (이미 있음)
|
||||
2. Docker 이미지 빌드:
|
||||
```bash
|
||||
docker build -t jaengseung-made .
|
||||
```
|
||||
3. 컨테이너 실행:
|
||||
```bash
|
||||
docker run -d -p 3000:3000 \
|
||||
-e RESEND_API_KEY=your_key \
|
||||
--name jaengseung-made \
|
||||
jaengseung-made
|
||||
```
|
||||
4. 포트 포워딩: 라우터에서 80 → NAS IP:3000
|
||||
5. 가비아 DNS: A 레코드를 공인 IP로 설정
|
||||
|
||||
**문제점:**
|
||||
- 느린 속도 (가정용 인터넷)
|
||||
- 다운타임 (정전, 재부팅)
|
||||
- HTTPS 수동 설정 필요 (Let's Encrypt)
|
||||
- 보안 관리 필요
|
||||
|
||||
---
|
||||
|
||||
## 5️⃣ 최종 체크리스트
|
||||
|
||||
### 배포 전
|
||||
- [ ] Resend 계정 생성 및 API Key 발급
|
||||
- [ ] `.env.local`에 API Key 설정
|
||||
- [ ] 로컬에서 문의 폼 테스트 (http://localhost:3000)
|
||||
- [ ] Git 커밋 및 푸시
|
||||
|
||||
### Vercel 배포
|
||||
- [ ] Vercel 계정 생성 (GitHub 연동)
|
||||
- [ ] 프로젝트 배포
|
||||
- [ ] 환경변수 추가 (RESEND_API_KEY)
|
||||
- [ ] 배포 URL에서 테스트
|
||||
|
||||
### 도메인 연결
|
||||
- [ ] Vercel에 도메인 추가
|
||||
- [ ] 가비아 DNS 설정 (A 레코드)
|
||||
- [ ] www 서브도메인 추가 (CNAME)
|
||||
- [ ] SSL 인증서 자동 발급 확인 (10~30분)
|
||||
- [ ] https://jaengseung-made.com 접속 확인
|
||||
|
||||
### 최종 테스트
|
||||
- [ ] 문의 폼 실제 발송 테스트
|
||||
- [ ] bgg8988@gmail.com으로 이메일 수신 확인
|
||||
- [ ] 모바일에서 접속 테스트
|
||||
- [ ] 모든 링크 동작 확인
|
||||
|
||||
### 마케팅
|
||||
- [ ] 크몽 서비스 등록 (포트폴리오 URL 첨부)
|
||||
- [ ] 숨고 프로필 생성
|
||||
- [ ] Google Search Console 등록
|
||||
- [ ] 메타 태그 확인 (이미 적용됨)
|
||||
|
||||
---
|
||||
|
||||
## 🆘 트러블슈팅
|
||||
|
||||
### 문의 폼이 작동하지 않아요
|
||||
1. `.env.local`에 `RESEND_API_KEY` 확인
|
||||
2. Vercel 환경변수 설정 확인
|
||||
3. Resend Dashboard에서 "Logs" 확인
|
||||
4. 브라우저 개발자 도구 → Network 탭 확인
|
||||
|
||||
### 도메인이 연결되지 않아요
|
||||
1. DNS 전파 대기 (최대 24시간, 보통 30분)
|
||||
2. DNS 전파 확인: https://dnschecker.org
|
||||
3. 가비아 DNS 설정 재확인
|
||||
4. Vercel Domain 상태 확인
|
||||
|
||||
### 이메일이 오지 않아요
|
||||
1. Resend Dashboard → "Logs" 확인
|
||||
2. 스팸 메일함 확인
|
||||
3. API Key 권한 확인 (Sending access)
|
||||
4. 도메인 인증 상태 확인 (커스텀 도메인 사용 시)
|
||||
|
||||
---
|
||||
|
||||
## 📞 지원
|
||||
|
||||
배포 관련 문의: bgg8988@gmail.com
|
||||
Reference in New Issue
Block a user