Flutter 웹 앱을 Firebase에 호스팅하는 방법은 찾아보면 꽤 다양하다.
firebase를 사용하는 방법이 제일 간단해보였는데, 안타깝게도 정적 웹이 아닌지라 이 방법은 적절하지 않다. (물론 Function 연결하면 가능함)
대신 github page를 사용해서 배포해보기로 했다.
로컬 동작
간단하게 이름과 목표를 작성하고, sns에 공유하는 앱이다. 엄청 간단하다.
대신 외부 라이브러리를 써서 env에 시크릿을 사용했다.
github workflow 생성
프로젝트 루트에 .github/workflows 디렉터리를 만들고, 하위에 publish.yaml 파일을 생성한다.
깃헙 프로젝트에는 .env 파일이 올라가지 않으므로, env 파일을 생성해야 한다. 필요한 값은 github 시크릿으로 주입한다. 그외에 플러터에 빌드하고 깃헙 페이지를 배포한다.
name: Publish to GitHub Pages
on:
push:
branches: [ master ]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4.1.1
- name: Setup Flutter
uses: subosito/flutter-action@v2.12.0
with:
flutter-version: '3.16.5'
- name: Create .env file
run: |
echo "SOT2_URL=${{ secrets.SOT2_URL }}" > .env
echo "EMAIL_LOGGING_URL=${{ secrets.EMAIL_LOGGING_URL }}" >> .env
echo "KAKAO_SHARE_APP_KEY=${{ secrets.KAKAO_SHARE_APP_KEY }}" >> .env
echo "KAKAO_SHARE_JS_KEY=${{ secrets.KAKAO_SHARE_JS_KEY }}" >> .env
env:
SOT2_URL: ${{ secrets.SOT2_URL }}
EMAIL_LOGGING_URL: ${{ secrets.EMAIL_LOGGING_URL }}
KAKAO_SHARE_APP_KEY: ${{ secrets.KAKAO_SHARE_APP_KEY }}
KAKAO_SHARE_JS_KEY: ${{ secrets.KAKAO_SHARE_JS_KEY }}
- name: Build Web
run: flutter build web --release
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3.9.3
with:
github_token: ${{ secrets.MY_SECRET_KEY_NAME }}
publish_dir: ./build/web
깃허브에 푸시하고 워크플로우가 성공하기를 기다린다.
설정에서 브랜치를 gh-pages로 선택하고 저장하면 웹사이트가 배포된다.
혹시라도 배포한 사이트에서 assets가 안 보인다면?! assets를 절대 경로로 변경해주시라.
flutter:
uses-material-design: true
assets:
- assets/icons/comment.svg
- assets/icons/twitter-alt.svg
- assets/images/dailytrackerpreview.png
- .env
# 실제 사용
SvgPicture.asset('assets/icons/comment.svg')
참고 자료
'내가 만든 실습🍪 완전 삽질했지' 카테고리의 다른 글
| Google Cloud Function으로 간단하게 로그 남기기 (1) | 2023.12.29 |
|---|---|
| CloudType, PlanetScale, Docker을 이용한 FastAPI 웹 서버 구축하기 (0) | 2023.06.29 |
