Hosting과 배포

Firebase Hosting은 정적 파일과 SPA를 빠르고 안전하게 배포하는 서비스입니다. 전 세계 CDN과 HTTPS가 기본 제공되며, 명령 한 줄로 배포할 수 있습니다. 이번 강의에서는 초기 설정부터 배포, 커스텀 도메인, 환경 분리까지 다룹니다.

학습 목표

• firebase init hosting으로 호스팅을 설정한다.
• 앱을 빌드하고 firebase deploy로 배포한다.
• SPA 라우팅과 커스텀 도메인을 설정한다.
• 개발/운영 환경을 분리한다.

호스팅 초기화

CLI를 설치하고 로그인한 뒤 호스팅을 초기화합니다. 빌드 결과물 폴더(보통 dist 또는 out)를 공개 디렉터리로 지정합니다.

npm install -g firebase-tools
firebase login
firebase init hosting

초기화하면 firebase.json 설정 파일이 생성됩니다.

{
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [{ "source": "**", "destination": "/index.html" }]
  }
}

💡 TIP — rewrites에서 모든 경로를 /index.html로 보내면 SPA의 클라이언트 라우팅이 새로고침 시에도 깨지지 않습니다.

빌드와 배포

프레임워크 빌드를 먼저 실행해 정적 파일을 만든 뒤 배포합니다.

# 빌드 (예: Vite/Next export)
npm run build

# 배포
firebase deploy --only hosting

배포가 끝나면 https://프로젝트ID.web.app 주소로 접속할 수 있습니다.

미리보기 채널

배포 전에 미리보기 채널로 임시 URL을 만들어 검수할 수 있습니다. 일정 기간 뒤 자동 만료됩니다.

firebase hosting:channel:deploy preview

커스텀 도메인

콘솔의 Hosting → "커스텀 도메인 추가"에서 보유한 도메인을 연결합니다. 안내되는 DNS 레코드(A 또는 TXT)를 도메인 등록업체에 등록하면 검증 후 SSL 인증서가 자동 발급됩니다.

⚠️ 주의 — DNS 변경은 전파에 시간이 걸립니다. 도메인이 바로 연결되지 않아도 수십 분에서 수 시간 기다려야 할 수 있으니 성급하게 설정을 바꾸지 마세요.

환경 분리

개발과 운영을 분리하려면 프로젝트를 두 개 만들고 별칭으로 전환합니다. 배포 대상을 명확히 구분할 수 있습니다.

# 별칭 등록
firebase use --add        # dev, prod 별칭 지정

# 환경 전환 후 배포
firebase use prod
firebase deploy --only hosting

명령	역할
firebase init hosting	호스팅 설정 생성
firebase deploy	빌드 결과 배포
firebase hosting:channel:deploy	미리보기 채널 배포
firebase use	프로젝트(환경) 전환

요약

• firebase init hosting으로 공개 디렉터리와 firebase.json을 설정합니다.
• 빌드 후 firebase deploy --only hosting으로 배포합니다.
• SPA는 rewrites로 모든 경로를 index.html로 보냅니다.
• 미리보기 채널로 배포 전 임시 URL을 만들어 검수합니다.
• 커스텀 도메인은 DNS 등록 후 SSL이 자동 발급되며, 환경은 firebase use로 분리합니다.

연습문제

1. 호스팅 설정 파일의 이름과, 거기서 지정하는 핵심 항목은 무엇인가요?
2. SPA에서 새로고침 시 라우팅이 깨지지 않게 하려면 무엇을 설정하나요?
3. 배포 전 임시 URL로 검수하려면 어떤 명령을 쓰나요?
4. 개발과 운영 환경을 분리해 배포하려면 어떻게 전환하나요?

힌트 — 프로젝트를 여러 개 두고 별칭으로 가리키는 방식을 떠올려 보세요.