저는 플러터 프로젝트에서 Firebase Hosting을 사용하고 있어요.
이게 프로토타입이긴 하지만 로컬에서 빌드를 하고 배포를 제 손으로 하는 게 번거롭더라구요.

이 블로그도 글을 다 쓰고 git push를 할 때마다 GitHub Action으로 배포를 하고 있는데요.
그래서 GitHub Action으로 플러터 웹도 배포하기로 했어요.

은근 어려울 줄 알았지만, 또 막상 해보면 어렵지 않았어요.
먼저 설정해야 할 건 두개예요.

• Firebase 설치
• FlutterFire 설치

먼저 Flutter 웹 통합에서 하라는대로 설정해서 플러터 프로젝트 내에 firebase hosting을 활성화해야 해요.
저는 기존 프로젝트 초기화 부분에서 하라고 하는 설정 대신 firebase.json에 설정을 아래처럼 했어요.

 "hosting": {
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "frameworksBackend": {
      "region": "asia-east1"
    },
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }

그리고 firebase init hosting:github를 시작하면 .github/workflows에 파일 두개가 생성되는데요.
저는 배포 설정을 firebase-hosting-merge.yml에 파일에 하기로 했어요.

사용하고 있는 비밀키가 있으니 Using secrets in GitHub Actions 여기 지시사항을 따라 사용하는 비밀키를 추가해 주세요. 저는 몇 개의 키를 사용하고 있어서 넣어줬어요.
그리고 firebase_options.dart 파일 내용도 비밀키로 추가했어요. 이걸 액션에서 만들고 싶었는데 그러면 firebase, flutterfire도 설치해야 해서 간단하게 해결하기 위해 비밀키로 넣었어요.

이제 이번 글의 핵심인 action용 yml 파일을 볼게요.

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Set up Flutter
        uses: subosito/flutter-action@v2
        with:
          channel: stable
          flutter-version-file: pubspec.yaml
      - name: Decode firebase_option
        run : echo "$firebase_options_dart" > lib/firebase_options.dart
        env:
          firebase_options_dart: ${{secrets.파일용 비밀키}}
      - name: Install dependencies
        run: dart pub get
      - name: Build runner
        run: dart run build_runner build --delete-conflicting-outputs
      - name: Build for the web
        run: flutter build web --wasm
      - name: Deploy to Firebase
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.Firebase가 자동으로 추가한 비밀키 }}'
          firebaseServiceAccount: '${{ secrets.Firebase가 자동으로 추가한 비밀키 }}'
          projectId: 연결된 firebase 프로젝트 ID
          channelId: live

파일 내용 중에 Deploy to Firebase 부분은 firebase init hosting:github 명령했다면 자동으로 추가되어 있을 거라 따로 수정하지 않아도 괜찮아요.

빌드 단계 전에 아래와 같은 파일들이 있어야 해요.
ex) firebase_options.dart, *.freezed.dart, *.g.dart
그래서 저는 Decode firebase_option와 Build runner로 파일들을 만들어줬어요.

이 파일이 전체적으로 하는 일은 다음과 같아요.

1. 배포 환경에서 Flutter를 설치하기
2. firebase_options.dart 만들기
3. 의존성 설치
4. Code generator 동작
5. 웹 빌드
6. Firebase에 배포

이렇게 하면 5분 정도 걸리지만 플러터를 웹으로 배포할 수 있어요.
안전을 위해 2FA도 추가하길 바랄게요!

위 내용에서 flutter action으로 캐싱하는 부분을 지웠는데 필요하신 분들은 적용해 보세요!
flutter-version-file은 저는 버전을 고정했기 때문에 이렇게 사용했어요.
저랑 다른 분들은 이 부분을 바꾸셔야 할 거예요.

Presents are made for the pleasure of who gives them, not the merits of who receives them.

— Carlos Ruiz Zafon