[Angular 마스터하기] Day 19 - 배포하기, 내 앱을 세상에!

이제와서 시작하는 Angular 마스터하기 - Day 19 “완성한 앱을 세상에 공개해봅시다! 🌍”

오늘 배울 내용

• 빌드 프로세스
• GitHub Pages 배포
• Netlify/Vercel 배포
• 환경 변수 설정

---

1. 프로덕션 빌드

# 프로덕션 빌드
ng build

# 결과물은 dist/ 폴더에 생성됨

빌드 옵션:

• 코드 압축 (minification)
• Tree shaking
• AOT 컴파일

---

2. GitHub Pages 배포

# angular-cli-ghpages 설치
npm install -g angular-cli-ghpages

# 빌드 및 배포
ng build --base-href="/프로젝트명/"
ngh --dir=dist/프로젝트명/browser

---

3. Netlify 배포

1. Netlify 사이트 접속
2. GitHub 저장소 연결
3. 빌드 설정:
   • Build command: ng build
   • Publish directory: dist/프로젝트명/browser

---

4. 환경 변수

// environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000'
};

// environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://api.example.com'
};

// 사용
import { environment } from '../environments/environment';

@Injectable()
export class ApiService {
  apiUrl = environment.apiUrl;
}

---

📝 정리

배포 플랫폼

• GitHub Pages (무료, 정적)
• Netlify (무료, CI/CD)
• Vercel (무료, 빠름)
• Firebase Hosting

체크리스트

• 프로덕션 빌드를 할 수 있나요?
• GitHub Pages에 배포할 수 있나요?
• 환경 변수를 설정할 수 있나요?

---

📚 다음 학습

• 이전: Day 18: 테스팅 기초
• 다음: Day 20: 실전 프로젝트 - Todo 앱 완성

---

“배포는 개발의 완성입니다!” 🌍