fluter는 크로스플랫폼 프레임워크로 web호스팅이 가능합니다.

action 설정하기

먼저 github 액션을 설정하기위해 루트에 .github 폴더를 만들고, 그 안에 workflow폴더를 또 만들어줍니다.

그 후에 .yml파일을 하나 만들어줍니다.(이름은 크게 중요하지 않지만 추후 다른 action들도 들어갈 수 있으니 구분을 위해 잘 지어주세요)

그리고 아래와 같이 yml파일을 작성해줍니다.

name: Deploy Flutter Web App to GitHub Pages

on:
  push:
    branches:
      - main  # 또는 Flutter 앱의 소스 코드가 있는 브랜치 이름

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.13.0' # 사용하는 Flutter 버전으로 변경

    - 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 }} # repository에서 사용할 시크릿 키 이름
        publish_dir: ./build/web

깃헙 액션을 간단히 설명하면

최상위

runs-on : 실행 환경
steps : 아래 내용을 순차적으로 실행

steps 내부

name : 실행할 로직의 이름입니다. 아무렇게나 지어도 됩니다.
uses : 사용할 라이브러리 이름과 버전 명시
with : 옵션 설정

이정도로 이해하면 될 것 같습니다.

위 과정을 거치면
1. 우분투에 해당 레포지토리 소스를 가져오고
2. 플러터를 설치하고 실행시키고
3. web으로 빌드하고
4. gh페이지에 배포하게됩니다.

uses 뒤에 오는 라이브러리들은 구글링을 통해 최신버전을 확인해주세요(23.11.24 기준 최신 버전으로 작성됨)

그리고 해당 액션이 실행될 브랜치와 사용한 flutter버전을 적어주시고

앞으로 사용할 github secret key의 이름을 적어주세요(현재 시점에서는 자유롭게 지어도 됩니다.)

여기까지 완료되었으면 이제 정해놓은 브랜치에 push가 되면 자동으로 액션이 돌아가게 됩니다.

Reopsitory만들기

그럼 이제 github으로 가셔서 레포지토리를 생성해주세요

gh-page로 배포한 url은 github닉네임/레포지토리이름 으로 배포되기때문에 레포지토리 이름을 잘 지어주셔야합니다.

Flutter 설정하기

flutter run -d chrome

위 명령어를 통해 web으로 정상적으로 작동하는지확인이 끝났으면 루트에 web 폴더에 index.html파일을 열어줍니다.

<base href="$FLUTTER_BASE_HREF">

해당 부분을 아래와같이 본인 /레포지토리 이름/으로 변경해줍니다.

<base href="/flutter-web-ghpage/">

github에 push

프로젝트를 github원격 레포로 푸쉬한 후 깃헙 페이지에서 액션탭을 가면 아래와같이 액션이 실행되고 있습니다.

클릭해서 상세 내용을 보다보면 아래와 같이 에러가 납니다.

위의 yml파일에서 작성했던 시크릿키를 아직 입력하지 않아서 발생한 에러입니다.

https://github.com/settings/tokens

위 url로 접속해줍니다.

generate new token을 누르고 클래식 토큰을 클릭합니다.

위와 같이 repo 와 workflow에 체크해주신뒤 발급받습니다.

발급받은 키를 복사한 뒤 다시 레포지토리로 이동합니다.

레포지토리의 세팅 탭으로 이동 한 뒤

좌측 Security 탭에 Secrets and variables 탭에서 Actions를 클릭해줍니다.

Repository secrests에서 new repository secret버튼을 클릭해줍니다.

Name에는 꼭 yml파일에 작성했던 이름과 동일한 이름을 적어주고 Key에는 위에서 복사했던 시크릿키를 붙여넣기 해줍니다.

위와 같이 키 등록이 완료되었으면 다 시 레포지토리의 Actions탭으로 이동해줍니다.

이동 후 실패한 액션을 클릭한 뒤 re run jobs 를 클릭해줍니다.

액션이 정상적으로 실행되면 위와 같이 자동으로 배포가 진행됩니다.

배포가 완료되면 위처럼 Code탭에서 확인 가능하고

https://{본인 아이디}.github.io/{레포지토리 이름}/

으로 배포된걸 확인하실 수 있습니다.