전제 조건

Node.js 설치

npm을 통해 @angular/cli 설치

로컬에 Git 설치

Visual Studio Code(선택적 IDE)

GitHub 계정

구글 계정

1. 각도 앱 만들기

cmd에서 다음 명령을 실행합니다. ng new angular-firebase-demo


cmd에서 프로젝트로 이동하여 ng serve를 실행합니다. 컴파일이 성공할 때까지 기다려야 합니다.



이제 각도 앱에 액세스할 수 있습니다. 브라우저를 열고 http://localhost:4200를 씁니다.

2. Firebase 프로젝트 생성

Firebase console으로 이동하여 Google 계정으로 로그인합니다.
Add project를 클릭합니다.



프로젝트 이름을 적고 계속을 클릭하십시오.



Google Analytics를 비활성화하고 Create project를 클릭합니다.



Firebase 프로젝트가 생성되면 계속을 클릭합니다.



이제 Firebase 프로젝트에 액세스할 수 있습니다.

3. Angular 앱에서 Firebase 구성

다음 명령npm install -g firebase-tools을 사용하여 Firebase CLI를 전역적으로 설치합니다.

다음 명령을 사용하여 Firebase 계정에 로그인합니다. firebase login .

Firebase 프로젝트를 만든 Google 계정을 선택합니다.



Google 계정에 액세스하려면 Firebase CLI를 허용하세요.





다음 명령을 사용하여 프로젝트를 초기화합니다. firebase init
프로젝트를 초기화하면 몇 가지 질문을 받게 됩니다.

Firebase CLI 기능: 호스팅

프로젝트 설정: 기존 프로젝트 사용(Angular Firebase 데모)

공개 디렉터리: dist/angular-firebase-demo

단일 페이지 앱으로 구성: 예

GitHub로 자동 빌드 및 배포 설정?: 아니요

index.html 덮어쓰기: 아니요

IDE에서 프로젝트를 열고 package.json 파일에 다음 스크립트를 추가합니다. "build:prod": "ng build --prod" .



그런 다음 npm run build:prod 명령을 사용하여 해당 스크립트를 실행합니다.

결과적으로 dist 폴더가 생성됩니다. 그리고 그 안에 컴파일된 파일이 있습니다.



이 명령을 사용하여 프로덕션 준비 앱을 Firebase 호스팅에 배포합니다. firebase deploy .



이제 앱이 Firebase에 배포되었으며 Hosting URL을 사용하여 액세스할 수 있습니다.



.gitignore 파일에 다음 줄을 추가합니다. /.firebase

4. GitHub에서 리포지토리 생성 및 GitHub Actions 구현

GitHub로 이동하여 리포지토리를 만듭니다. 이 저장소는 공개 또는 비공개일 수 있습니다.



그런 다음 프로젝트 디렉토리의 CMD에서. 다음 git 명령을 사용합니다.

자식 초기화

git 원격 추가 원본https://github.com/cristofima/AngularFirebaseDemo.git

자식 분기 -M 메인

자식 추가 .

git commit -m "데모 프로젝트"

git push -u 원점 메인

GitHub에서 Angular 앱을 Firebase에 배포하려면 FIREBASE_TOKEN이 필요합니다. Firebase CI용 토큰을 생성합니다.



이제 GitHub 리포지토리에서 설정 > 비밀로 이동합니다.


New repository secret를 클릭하고 Firebase 토큰을 추가합니다.



마지막으로 작업으로 이동하여 워크플로를 설정합니다.



다음 YAML 파일을 복사합니다.

name: CI

on:
  push:
    branches:
    - main

jobs:
  firebase-deploy:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@master
    - uses: actions/setup-node@master
      with:
        node-version: '12.x'
    - run: npm install
    - run: npm run build:prod
    - uses: w9jds/firebase-action@master
      with:
        args: deploy --only hosting
      env:
        FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

파일을 커밋합니다.



모든 것이 정확하다면. Firebase에 성공적으로 배포된 것을 확인할 수 있습니다.



이제 코드에서 수행하는 모든 커밋이 Firebase에 자동으로 배포됩니다.