Firebase 호스팅: GitHub Actions를 통해 미리보기 및 배포

Angular 또는 Scully 애플리케이션 구축을 시작하고 어느 시점에서 동료, 친구, 가족 또는 고객을 초대하여 확인하고 싶습니다. Firebase Hosting을 사용하면 정적 또는 동적 웹 앱을 무료로 호스팅할 수 있습니다 💸. 미리 보기 및 라이브 채널에 Scully 앱(Angular 및 기타 웹 프레임워크와 함께 작동)을 배포하는 GitHub 워크플로를 설정하고 있습니다.

Firebase 🔥의 데모source code 및 hosted.

이것으로 바로 뛰어들기 전에 당신은

Firebase Account

GitHub Account 및 웹 앱용 개인 또는 공용 리포지토리

기존 웹 응용 프로그램을 사용하거나 Angular 10 with Tailwind CSS 또는 Jamstack: Angular + Scully + Tailwind CSS에 따라 새 웹 응용 프로그램을 만들어 시작하십시오.

시작하기

Firebase CLI 지원을 위해 v8.12.0에서 최소 preview channels을 설치하십시오.

# install firebase cli
npm install -g firebase-tools

# init firebase hosting
firebase init hosting
# hosting already setup, prepare GitHub workflow
firebase init hosting:github

CLI 프롬프트에 따라 Firebase 호스팅 및 GitHub 워크플로를 설정합니다.

Firebase 호스팅 설정

기존 Firebase 프로젝트를 선택하여 시작하거나 Firebase console에서 프로젝트를 생성하거나 CLI를 통해 새 프로젝트를 생성합니다.

다음으로 Firebase 호스팅에 업로드되는 index.html를 포함하여 웹 앱의 모든 파일이 포함된 공개 디렉터리를 입력합니다.

# Angular
dist/<project-name>

# Scully `outDir` specified in your scully.<project-name>.ts defaults to
dist/static

public 파일에서 언제든지 firebase.json 디렉토리를 변경할 수 있습니다.

다음 질문 "단일 페이지 앱으로 구성(모든 URL을/index.html로 다시 작성)?"에 답하십시오. Angular 앱(및 기타 단일 페이지 앱)의 경우 예, Scully 앱(및 기타 정적 사이트 앱)의 경우 아니요.

Firebase CLI가 automatic deploys에 대한 GitHub 저장소를 초기화하도록 합니다. Firebase CLI에서 여러 단계를 처리합니다.

Firebase 호스팅에 대한 배포 권한이 있는 Firebase 서비스 계정 생성

암호를 암호화하고 GitHub 저장소에 추가

GitHub 워크플로yaml 파일 생성

dist/static/404.html 및 dist/static/index.html를 덮어쓸 다음 두 질문에 대해 no를 입력하고 Scully에서 생성하도록 합니다.

GitHub 리포지토리를 선택하여 워크플로에 대한 비밀 토큰을 설정하고 빌드 스크립트를 입력하여 npm ci && npm run build:ci와 같이 Angular 및 Scully를 빌드합니다. Scully 빌드의 경우 다음 두 스크립트를 package.json에 추가하십시오.

"build:ci": "npm run build:prod && npm run scully:ci"
"scully:ci": "scully -- --host='0.0.0.0' --scanRoutes --serverTimeout=60000",

병합된 풀 리퀘스트에서 라이브 채널에 배포하려면 예를 선택하고 라이브 채널의 브랜치 이름을 입력합니다(예: main ).

GitHub 작업 흐름

Firebase CLI를 사용한 경우 이제 두 개의 워크플로가 있어야 합니다. 워크플로는 현재 알파 릴리스인 GitHub 작업Deploy to Firebase Hosting을 사용합니다.

풀 요청 시 미리 보기 채널에 배포하는 워크플로.github/workflows/firebase-hosting-pull-request.yml

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on PR
'on': pull_request
jobs:
  build_and_preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: 'npm ci && npm run build:ci'
      # Add additional build steps here
      # - run: ...
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
          projectId: your-firebase-project-id
          # default expire value 7 days
          # expires: 7d
        env:
          FIREBASE_CLI_PREVIEWS: hostingchannels

main 분기.github/workflows/firebase-hosting-merge.yml에 푸시할 때 라이브 채널에 배포하는 워크플로

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: 'npm ci && npm run build:ci'
      # Add additional build steps here
      # - run: ...
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
          channelId: live
          projectId: your-firebase-project-id
        env:
          FIREBASE_CLI_PREVIEWS: hostingchannels

라이브 채널에 배포하려면 channelId를 live로 설정해야 합니다. 비워 두면 작업에서 PR 분기 이름을 사용하여 새 미리 보기 채널을 만듭니다.

미리 보기 채널의 추가 옵션은 expires이며 기본값은 7일입니다. 미리 보기 채널의 expiration을 최대 30일로 변경합니다. 이는 h 시간, d 일 및 w 주 구문을 지원합니다(예: 19h , 30d , 3w ).

미리보기 및 라이브 채널

위의 GitHub 워크플로를 사용하여 풀 요청을 생성하면 GitHub 작업이 빌드를 시작하는 것을 볼 수 있습니다.



워크플로가 성공적으로 완료된 후 Firebase 작업은 이 PR에 대한 미리보기 URL이 포함된 댓글을 생성합니다.



변경 내용이 마음에 들지 않으면 웹 앱의 미리 보기를 보고 반복합니다. 다음은 Firebase 호스팅의 미리보기 채널에 있는 Scully 데모 블로그입니다.



마지막으로 풀 요청을 병합하여 라이브 채널에 대한 배포를 트리거합니다. 라이브 채널에서 Scully demo blog을 찾아보세요.

미리 보기 위해 웹 애플리케이션에 개선 사항을 제공하고, 동료나 고객에게 검토를 요청하고(👌❓) PR을 병합하여 변경 사항을 실시간 채널에 🚀 간단히 배포하는 것이 결코 쉬운 일은 아닙니다.