GitHub Actions를 사용하여 Firebase에 배포

이것은 모든 병합에서 업데이트되는 Firebase을 사용하여 호스트되지 않은 프로젝트를 GitHub Actions 호스팅으로 가져오는 방법에 대한 빠른 가이드입니다. 멋진 코딩이 필요하지 않은 Firebase CLI만 사용할 것입니다!



시작하기 전에 몇 가지 가정:

웹사이트를 호스팅할 준비가 된 GitHub의 리포지토리(제 경우에는 새로운 Angular 앱 "ng new")

Firebase 계정

최신 버전Firebase cli이 설치되어 바로 사용 가능

이제 시작하겠습니다

먼저 Firebase으로 이동하여 새 프로젝트를 만듭니다. 기본 단계를 따르고, 프로젝트 이름을 추가하고, 원하는 경우 분석을 활성화하십시오.



이제 명령 창으로 이동하여 Firebase 및 GitHub 항목을 설정하겠습니다.

프로젝트 디렉토리에서 명령 창을 엽니다.

다음 명령을 입력합니다.

firebase init hosting:github

처음부터 끝까지 프로세스를 안내합니다.

이전에 만든 기존 Firebase 프로젝트를 사용하여 콘솔의 단계를 따릅니다.

GitHub 리포지토리에 대한 메시지가 표시되면 다음 "사용자 이름/리포지토리"를 입력하거나 제 경우에는

OliBlade/MyFirebaseApp

또한 사이트의 빌드 디렉토리와 빌드 명령(제 경우에는 "npm run build")을 입력하라는 메시지가 표시됩니다

.

모두 완료되면

이렇게 하면 Firebase 호스팅을 배포할 수 있는 권한이 있는 Firebase 프로젝트에 서비스 계정이 생성되었음을 출력에서 ​​확인할 수 있습니다. 또한 해당 서비스 계정의 JSON 키가 GitHub Secret 으로 GitHub 저장소에 업로드되었습니다.

파일에서 workflows 폴더에 몇 개의 YAML 파일이 있는 ".github"라는 폴더를 볼 수 있습니다. 이들을 살펴보면 새로 생성된 암호를 참조하고 Firebase 호스팅을 배포하기 위해 GitHub Action을 구성하는 방법을 볼 수 있습니다.

커밋 및 푸시

새 브랜치에서 이 작업을 수행하는지 여부는 중요하지 않지만 아마 해야 할 것입니다. 리포지토리로 이동하고 작업 탭을 클릭합니다. 프로젝트를 실행하고 빌드하는 작업을 볼 수 있습니다.



4단계는 FireBase에 배포됩니다. Firebase Console에서 새 프로젝트를 확인하면 새로 배포되고 호스팅된 앱이 표시됩니다.

이것은 이제 메인 브랜치에 병합될 때마다 라이브 FireBase 호스팅 웹사이트를 업데이트하고 이 GitHub 저장소의 모든 PR은 자체 미리보기 URL을 갖게 됩니다!

약간의 추가 읽기

이 게시물은 this Firebase documentation 을 많이 기반으로 하지만

약간의 연습을 해야겠다고 생각했습니다.

GitHub Secrets

GitHub Action

GitHub Action to deploy to Firebase hosting