<div id="readability-page-1" class="page"><article><img src="data:image/webp;base64,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" alt="photo by Evan Jones on Unsplash">
저는 플러터 프로젝트에서 Firebase Hosting을 사용하고 있어요. 
이게 프로토타입이긴 하지만 로컬에서 빌드를 하고 배포를 제 손으로 하는 게 번거롭더라구요.
이 블로그도 글을 다 쓰고 <code>git push</code>를 할 때마다 GitHub Action으로 배포를 하고 있는데요. 
그래서 GitHub Action으로 플러터 웹도 배포하기로 했어요.
은근 어려울 줄 알았지만, 또 막상 해보면 어렵지 않았어요. 
먼저 설정해야 할 건 두개예요.
<ul>
<li><a href="https://firebase.google.com/docs/cli?hl=ko#install_the_firebase_cli" rel="noopener noreferrer" target="_blank">Firebase 설치</a></li>
<li><a href="https://firebase.google.com/docs/flutter/setup?hl=ko&amp;platform=ios" rel="noopener noreferrer" target="_blank">FlutterFire 설치</a></li>
</ul>
먼저 <a href="https://firebase.google.com/docs/hosting/frameworks/flutter?hl=ko" rel="noopener noreferrer" target="_blank">Flutter 웹 통합</a>에서 하라는대로 설정해서 플러터 프로젝트 내에 firebase hosting을 활성화해야 해요. 
저는 <a href="https://firebase.google.com/docs/hosting/frameworks/flutter?hl=ko#initialize_an_existing_project" rel="noopener noreferrer" target="_blank">기존 프로젝트 초기화</a> 부분에서 하라고 하는 설정 대신 <code>firebase.json</code>에 설정을 아래처럼 했어요.
<figure data-rehype-pretty-code-figure=""><pre tabindex="0" data-language="json" data-theme="github-dark-dimmed"><code data-language="json" data-theme="github-dark-dimmed"> "hosting": {
 "public": "build/web",
 "ignore": [
 "firebase.json",
 "**/.*",
 "**/node_modules/**"
 ],
 "frameworksBackend": {
 "region": "asia-east1"
 },
 "rewrites": [
 {
 "source": "**",
 "destination": "/index.html"
 }
 ]
 }</code></pre></figure>
그리고 <code>firebase init hosting:github</code>를 시작하면 <code>.github/workflows</code>에 파일 두개가 생성되는데요. 
저는 배포 설정을 <code>firebase-hosting-merge.yml</code>에 파일에 하기로 했어요.
사용하고 있는 비밀키가 있으니 <a href="https://docs.github.com/en/actions/security-for-github-actions/security-guides/using-secrets-in-github-actions" rel="noopener noreferrer" target="_blank">Using secrets in GitHub Actions</a> 여기 지시사항을 따라 사용하는 비밀키를 추가해 주세요. 저는 몇 개의 키를 사용하고 있어서 넣어줬어요. 
그리고 firebase_options.dart 파일 내용도 비밀키로 추가했어요. 이걸 액션에서 만들고 싶었는데 그러면 firebase, flutterfire도 설치해야 해서 간단하게 해결하기 위해 비밀키로 넣었어요.
이제 이번 글의 핵심인 action용 yml 파일을 볼게요.
<figure data-rehype-pretty-code-figure=""><pre tabindex="0" data-language="yml" data-theme="github-dark-dimmed"><code data-language="yml" data-theme="github-dark-dimmed">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" &gt; 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</code></pre></figure>
파일 내용 중에 Deploy to Firebase 부분은 <code>firebase init hosting:github</code> 명령했다면 자동으로 추가되어 있을 거라 따로 수정하지 않아도 괜찮아요.
빌드 단계 전에 아래와 같은 파일들이 있어야 해요. 
<code>ex) firebase_options.dart, *.freezed.dart, *.g.dart</code> 
그래서 저는 Decode firebase_option와 Build runner로 파일들을 만들어줬어요.
이 파일이 전체적으로 하는 일은 다음과 같아요.
<ol>
<li>배포 환경에서 Flutter를 설치하기</li>
<li>firebase_options.dart 만들기</li>
<li>의존성 설치</li>
<li>Code generator 동작</li>
<li>웹 빌드</li>
<li>Firebase에 배포</li>
</ol>
이렇게 하면 5분 정도 걸리지만 플러터를 웹으로 배포할 수 있어요. 
안전을 위해 <a href="https://docs.github.com/ko/authentication/securing-your-account-with-two-factor-authentication-2fa/accessing-github-using-two-factor-authentication#github-mobile%EB%A1%9C-%ED%99%95%EC%9D%B8" rel="noopener noreferrer" target="_blank">2FA</a>도 추가하길 바랄게요!
<blockquote>
위 내용에서 <a href="https://github.com/marketplace/actions/flutter-action" rel="noopener noreferrer" target="_blank">flutter action</a>으로 캐싱하는 부분을 지웠는데 필요하신 분들은 적용해 보세요! 
<code>flutter-version-file</code>은 저는 버전을 고정했기 때문에 이렇게 사용했어요. 
저랑 다른 분들은 이 부분을 바꾸셔야 할 거예요.
</blockquote>
<hr>
<blockquote><div>Presents are made for the pleasure of who gives them, not the merits of who receives them.</div>— Carlos Ruiz Zafon</blockquote></article></div>

이때의 나

sunhwang

GitHub Action으로 Flutter 웹 배포하기

GitHub Action으로 Flutter 웹 배포하기

댓글