소개: Firebase 및 GitHub Actions를 사용한 자동 배포
수동 배포는 생산성과 안정성의 적입니다. 달릴 때마다
firebase deploy 터미널에서 인적 오류의 위험이 발생합니다.
빌드하거나, 잘못된 브랜치에서 배포하거나, 테스트를 건너뛰는 것입니다. 이 기사에서 우리는
완전히 자동화된 배포 시스템 Firebase 호스팅 e
GitHub 작업.
Firebase 호스팅은 다음을 제공하는 정적 및 동적 웹 애플리케이션을 위한 호스팅 플랫폼입니다. 글로벌 CDN, 자동 SSL 인증서, 끌어오기 요청용 미리보기 채널 및 즉각적인 롤백. GitHub Actions와 결합하면 기본으로 푸시할 때마다 자동으로 발생하는 워크플로가 생성됩니다. 프로덕션에 배포되며 각 Pull Request는 URL을 통해 액세스할 수 있는 미리보기를 생성합니다.
이 기사에서 배울 내용
- Firebase CLI를 구성하고 프로젝트를 초기화하는 방법
- 파일의 구조
firebase.json그리고 그 옵션 - Pull Request에 대한 자동 미리보기 채널을 생성하는 방법
- 프로덕션 배포를 위한 전체 워크플로
- 프로덕션 오류를 처리하기 위한 롤백 전략
- 맞춤 도메인을 설정하는 방법
- 캐싱 헤더 및 리디렉션 규칙
- Firebase 호스팅과 대안 비교
1. Firebase CLI 설정
첫 번째 단계는 Firebase CLI를 설치하고 구성하는 것입니다. 이 CLI는 주요 도구입니다. 터미널 및 CI/CD 파이프라인에서 Firebase와 상호작용합니다.
# Installare Firebase CLI globalmente
npm install -g firebase-tools
# Verificare l'installazione
firebase --version
# Login (apre il browser per l'autenticazione)
firebase login
# Per ambienti CI/CD, usare un token
firebase login:ci
# Questo genera un token da salvare come segreto GitHub
# Inizializzare Firebase nel progetto
firebase init hosting
초기화 중에 Firebase는 몇 가지 구성 질문을 합니다. 답변은 다음과 같습니다. Angular 프로젝트에 권장됩니다:
- 공개 디렉토리:
dist/my-app/browser(Angular 빌드 출력 폴더) - 단일 페이지 앱으로 구성: 예(모든 URL을 index.html로 다시 작성)
- GitHub를 사용하여 자동 빌드를 설정합니다. 예(워크플로 자동 구성)
- index.html 덮어쓰기: 아니요(우리는 우리 것을 사용합니다)
2. Firebase.json 구성
파일 firebase.json Firebase 호스팅 설정의 핵심입니다. 여기
Angular 프로젝트를 위한 완전하고 최적화된 설정:
{
"hosting": {
"public": "dist/my-app/browser",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "**/*.@(js|css)",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=31536000, immutable"
}
]
},
{
"source": "**/*.@(jpg|jpeg|gif|png|svg|webp|ico)",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=86400"
}
]
},
{
"source": "**/*.@(woff|woff2|ttf|eot)",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=31536000, immutable"
}
]
},
{
"source": "**",
"headers": [
{
"key": "X-Frame-Options",
"value": "SAMEORIGIN"
},
{
"key": "X-Content-Type-Options",
"value": "nosniff"
},
{
"key": "X-XSS-Protection",
"value": "1; mode=block"
},
{
"key": "Referrer-Policy",
"value": "strict-origin-when-cross-origin"
}
]
}
]
}
}
firebase.json의 주요 섹션
| 부분 | 범위 | 세부 사항 |
|---|---|---|
public |
제공할 파일 디렉터리 | Angular 빌드 출력과 일치해야 합니다. |
rewrites |
SPA 라우팅 | 모든 요청은 index.html로 리디렉션됩니다. |
headers |
캐싱 및 보안 | 해시된 자산, 글로벌 보안 헤더에 대한 적극적인 캐싱 |
ignore |
제외할 파일 | 구성 파일 및 숨겨진 디렉터리 |
리디렉션 규칙
Firebase 호스팅은 기존 URL을 처리하거나 HTTPS를 강제 적용하기 위해 HTTP 리디렉션을 지원합니다.
{
"hosting": {
"redirects": [
{
"source": "/old-blog/:slug",
"destination": "/blog/:slug",
"type": 301
},
{
"source": "/api/**",
"destination": "https://api.example.com/v1/:splat",
"type": 302
},
{
"source": "/docs",
"destination": "https://docs.example.com",
"type": 301
}
]
}
}
3. 끌어오기 요청 미리보기 채널
I 미리보기 채널 이는 Firebase 호스팅의 가장 강력한 기능 중 하나입니다. 각 끌어오기 요청은 변경 사항을 볼 수 있는 고유한 URL을 자동으로 가져옵니다. 병합 전. 전체 작업 흐름은 다음과 같습니다.
# .github/workflows/firebase-preview.yml
name: Firebase Preview Deploy
on:
pull_request:
branches: [main]
jobs:
build-and-preview:
name: Build and Deploy Preview
runs-on: ubuntu-latest
permissions:
checks: write
pull-requests: write
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Run tests
run: npx ng test --watch=false --browsers=ChromeHeadless
- name: Build application
run: npx ng build --configuration=production
- name: Deploy to Firebase Preview Channel
uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: ${{ secrets.GITHUB_TOKEN }}
firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
projectId: my-angular-project
expires: 7d
배포 후 해당 작업은 URL과 함께 Pull Request에 자동으로 주석을 추가합니다.
미리보기의. 매개변수 expires: 7d 자동 만료를 구성합니다.
7일 후 미리보기 채널입니다.
Firebase 서비스 계정을 얻는 방법
- 이동 Firebase 콘솔
- 프로젝트 > 프로젝트 설정 > 서비스 계정을 선택합니다.
- "새 개인 키 생성"을 클릭하세요.
- JSON 파일 다운로드
- 콘텐츠를 복사하고 명명된 GitHub 비밀로 추가하세요.
FIREBASE_SERVICE_ACCOUNT
4. 프로덕션의 배포 워크플로
프로덕션 워크플로는 분기에 푸시할 때만 실행됩니다. main 그리고 다음을 포함합니다
배포 전 모든 품질 검사:
# .github/workflows/firebase-production.yml
name: Firebase Production Deploy
on:
push:
branches: [main]
concurrency:
group: production-deploy
cancel-in-progress: false
jobs:
test:
name: Run Tests
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- run: npm ci
- run: npx ng lint
- run: npx ng test --watch=false --browsers=ChromeHeadless
build:
name: Build Application
runs-on: ubuntu-latest
needs: test
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- run: npm ci
- run: npx ng build --configuration=production
- uses: actions/upload-artifact@v4
with:
name: production-build
path: dist/
retention-days: 1
deploy:
name: Deploy to Production
runs-on: ubuntu-latest
needs: build
environment: production
steps:
- uses: actions/checkout@v4
- uses: actions/download-artifact@v4
with:
name: production-build
path: dist/
- name: Deploy to Firebase Hosting
uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: ${{ secrets.GITHUB_TOKEN }}
firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
channelId: live
projectId: my-angular-project
프로덕션 배포를 위한 동시성
설정을 참고하세요 cancel-in-progress: false 프로덕션 배포용.
이전 빌드를 삭제할 수 있는 CI와 달리 프로덕션 배포의 경우
상태를 방지하려면 새 배포를 시작하기 전에 현재 배포를 완료하는 것이 좋습니다.
일관성이 없습니다.
5. 롤백 전략
테스트 및 검토에도 불구하고 때로는 프로덕션 배포로 인해 문제가 발생하는 경우가 있습니다. Firebase 호스팅 여러 롤백 전략을 제공합니다.
Firebase 콘솔에서 롤백
Firebase 콘솔은 배포 기록을 유지합니다. 버전으로 롤백하려면 이전, 올라가다 호스팅 > 출시 내역 다음으로 "롤백"을 클릭하세요 원하는 버전으로. Firebase는 모든 파일을 보관하므로 이 프로세스는 즉각적으로 이루어집니다. CDN의 이전 릴리스.
CLI를 통한 롤백
# Elencare le release recenti
firebase hosting:releases:list --limit 10
# Fare rollback a una release specifica
firebase hosting:rollback --release RELEASE_ID
# Alternativa: clone di una release precedente
firebase hosting:clone SOURCE_SITE:SOURCE_CHANNEL TARGET_SITE:live
GitHub Actions를 통한 자동 롤백
# .github/workflows/rollback.yml
name: Emergency Rollback
on:
workflow_dispatch:
inputs:
commit-sha:
description: 'Commit SHA to rollback to'
required: true
type: string
reason:
description: 'Reason for rollback'
required: true
type: string
jobs:
rollback:
name: Rollback to Previous Version
runs-on: ubuntu-latest
environment: production
steps:
- name: Checkout specific commit
uses: actions/checkout@v4
with:
ref: ${{ inputs.commit-sha }}
- uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- run: npm ci
- run: npx ng build --configuration=production
- name: Deploy rollback version
uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: ${{ secrets.GITHUB_TOKEN }}
firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
channelId: live
projectId: my-angular-project
- name: Notify team
run: |
echo "Rollback completed"
echo "Commit: ${{ inputs.commit-sha }}"
echo "Reason: ${{ inputs.reason }}"
6. 사용자 정의 도메인 구성
Firebase 호스팅은 무료 SSL 인증서로 맞춤 도메인을 지원합니다. 과정 구성하려면 DNS 레코드를 통해 도메인 소유권을 확인해야 합니다.
구성 단계
- Firebase 콘솔 > 호스팅 > "맞춤 도메인 추가"로 이동합니다.
- 도메인을 입력하세요(예:
example.com) - Firebase는 등록기관에 설정할 DNS 레코드를 제공합니다.
- 확인을 위한 TXT 레코드와 라우팅을 위한 A 레코드를 추가하세요.
- DNS 전파를 기다립니다(최대 48시간, 일반적으로 1~4시간)
- Firebase는 SSL 인증서를 자동으로 발급합니다.
Record DNS da configurare:
# Verifica proprietà
TXT @ firebase-hosting-verification=xxxxxxxxxxxxx
# Routing al CDN Firebase
A @ 151.101.1.195
A @ 151.101.65.195
# Sottodominio www (opzionale)
CNAME www my-project.web.app
7. 최적화된 캐싱 헤더
올바른 캐싱 구성은 성능에 매우 중요합니다. Angular가 파일을 생성합니다.
이름에 해시 포함(예: main.abc123.js), 캐시할 수 있음
일년 내내. 파일 index.html 하지만 절대 외워서는 안 된다
해시된 파일에 대한 참조가 포함되어 있기 때문에 캐시에 있습니다.
{
"hosting": {
"headers": [
{
"source": "/index.html",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache, no-store, must-revalidate"
}
]
},
{
"source": "ngsw.json",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache"
}
]
},
{
"source": "**/*.@(js|css)",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=31536000, immutable"
}
]
},
{
"source": "**/*.@(jpg|jpeg|png|gif|svg|webp|avif|ico)",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=604800"
}
]
},
{
"source": "**/*.@(woff|woff2)",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=31536000, immutable"
}
]
}
]
}
}
8. 대안과의 비교
Firebase 호스팅이 Angular 애플리케이션 배포를 위한 유일한 옵션은 아닙니다. 비교는 다음과 같습니다. 가장 인기 있는 대안:
Firebase 호스팅과 대안
| 특성 | 중포 기지 | 베르셀 | 넷티파이 | AWS S3 + CloudFront |
|---|---|---|---|---|
| 설정 | 단순한 | 매우 간단함 | 매우 간단함 | 복잡한 |
| 무료 SSL | Si | Si | Si | 예(ACM) |
| 글로벌 CDN | Si | Si | Si | Si |
| 배포 미리보기 | Si | 예(자동) | 예(자동) | 수동 |
| 롤백 | 즉각적인 | 즉각적인 | 즉각적인 | 수동 |
| 무료 플랜 | 10GB 스토리지, 360MB/일 전송 | 100GB 대역폭 | 100GB 대역폭 | 종량제 |
| SSR 지원 | 예(Cloud Functions) | 예(기본) | 예(기능) | 예(Lambda@Edge) |
9. 로컬 배포 테스트
자동 배포를 구성하기 전에 로컬에서 Firebase 구성을 테스트하는 것이 유용합니다.
# Build dell'applicazione
npm run build
# Testare Firebase Hosting in locale
firebase emulators:start --only hosting
# Il sito sarà disponibile su http://localhost:5000
# Questo simula esattamente il comportamento di Firebase Hosting:
# - Rewrites SPA
# - Headers personalizzati
# - Redirect rules
# - Clean URLs
# Alternativa: serve direttamente la directory di build
firebase serve --only hosting
배포 전 체크리스트
- 프로덕션 빌드가 오류 없이 생성됩니다.
- 테스트는 모두 통과
- 파일
firebase.json올바른 디렉토리를 가리킨다 - 캐싱 헤더가 올바르게 구성되었습니다.
- 기존 URL 리디렉션이 적용되었습니다.
- 로컬 에뮬레이터가 사이트를 올바르게 표시합니다.
- Firebase 서비스 계정은 GitHub 비밀번호로 구성됩니다.
- 분기 보호 규칙이 활성화되었습니다.
결론
이 기사에서 우리는 완전히 자동화된 배포 시스템을 구축했습니다. Firebase 호스팅 및 GitHub 작업. Pull Request에 대한 미리보기 채널을 구성했습니다. 품질 관리를 통한 생산 워크플로, 긴급 상황 관리를 위한 롤백 전략, 최적화된 캐싱 및 보안 구성.
이 접근 방식의 가장 큰 장점은 신뢰입니다. 일단 구성되면 모든 변경 사항이 검토 및 테스트를 통과한 제품은 수동 개입이나 작업 없이 자동으로 배포됩니다. 오류 가능성. 문제가 발생하면 클릭 한 번으로 롤백할 수 있습니다.
다음 기사에서는 보안과 관련된 중요한 문제를 다룰 것입니다. 관리 CI/CD 파이프라인의 비밀, API 키, 서비스 토큰을 보호하는 방법 탐색 빌드 및 배포 프로세스 중 자격 증명.