10분만에 자동배포 프로세스 만들기

김민창·2024년 12월 31일

Firebase github

얼마전에 AI로 어플을 직접 만든 이후, 이것저것 만들어보는 취미가 생겼다.
따봉 GPT야 고마워~
그러다보니 로컬에서 관리하기엔 한계도 있고... 무엇보다도 빌드-배포를 직접하는게 귀찮다!!

Github

솔직히 나는 깃헙에 손이 잘 안간다.

매일매일 공부를 하며 잔디관리를 하는분도 계시긴하지만, 뭔가 의무감처럼 느껴지는 느낌이랄까 🧐

이번에 혼자 어플을 만들며 놀다보니, 사내와 같이 특정 브랜치에 올리기만하면 자동배포가 되는 그런 환경을 구축하고싶다! 라는 생각이 들었다.

그리고 내가 배포할때 사용했었던 firebase에서는 아주 쉽게 해당 기능을 쓸수있다!

as-is

그러니깐 여태까지는 Firebase 공식문서를 확인하면서 손수 배포를 진행했는데, 그 과정은 간략하게 다음과 같다

# Flutter 패키지 설치
flutter pub get
# Flutter 웹으로 빌드
flutter build web
# Firebase 배포
firebase deploy

쓰고나니깐 간단하긴한데 오탈자 하나 수정하고나서 저 과정을 맨날 해야하는게 쉽지않다 ...

to-be

배포할 어플 뚝딱

일단 간단하게 페이지 하나 뚝딱 만들어보자.
뚝딱

Firebase 홈페이지

배포할 프로젝트는 만들었고, Firebase 홈페이지에서 프로젝트를 만들자!
Firebase 홈페이지
이름도 내가 원하는걸 지정해보고
분석 예... 해주십시오
기본계정으로 뚝딱
하면 만들어준다!

Firebase와 내 어플을 연결하자!

배포할 내 어플의 루트폴더로 다시가서 다음과 같은 명령어를 치자!
firebase init
그럼 다음과 같은 화면이 나올텐데 천천히 해석하면 알아들을수 있다. ~~물론 나는 해석안하고 넘겨서 github에서 자동배포는 나중에 알았다~~
우리는 배포용으로 사용하니 Hosting 선택
우리는 Firebase 홈페이지에서 프로젝트를 만들고 왔기 때문에 Use an existing project 선택
이후 입맛에 맞게 선택 몇개하다보면 다음과 같은 문항이 나온다.
Github 자동배포.. 해주십시오...

github 배포될 프로젝트 만들기

github에서 사용자 인증을 하고 다음과 같이 github repository를 달라고 한다.
그렇담 github가서 하나 뚝딱 만들자
방금 만든 github 주소를 넣어주면 배포되기전 빌드를 하겠냐고 물어봐준다.
빌드가 필요하다면 넣어주자!
예... 이것도 부탁드립니다.
어느 브랜치에 될때인지 지정해주기
여기까지 하면 뭔가 다된것처럼 보인다!

자동으로 생성된 파일들 커스텀하기

루트폴더에 생성되어있는 .github/workflow 를 살펴보자
두가지 파일이 생성되어있는데, 이것들을 내 프로젝트에 맞게 커스텀해줘야한다.
Flutter 를 사용하며 내게 필요한 빌드 과정들을 jobs.build_and_deploy.steps 에서 순차적으로 변경해준다.

# firebase-hosting-merge.yml
name: Deploy to Firebase Hosting on merge
on:
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      # Flutter 설치
      - name: Set up Flutter
        uses: subosito/flutter-action@v2
        with:
          flutter-version: '3.27.1'

      # Flutter 패키지 설치
      - name: Install dependencies
        run: flutter pub get

      # Flutter 웹 빌드
      - name: Build Flutter Web App
        run: flutter build web

      # Firebase Hosting 배포
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_PANG_DEPLOY_TEST }}
          channelId: live
          projectId: pang-deploy-test

그리고 하나더 루트에 생성된 firebase.json 도 수정이 필요할수 있다!
나같은경우는 flutter 를 웹으로 빌드하기때문에 build/web 하위를 배포해야한다

# firebas.json
{
  "hosting": {
    "public": "build/web", # 수정
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}