Flutter Web, github.io에 deploy하기

💡 github.io로 호스팅을 하기 위해서는 개인 Token이 필요합니다.

Personal Token 발급방법

https://github.com/settings/profile 에 접속을 하시면 왼쪽 리스트에서 Developer Settings > Personal access token 으로 들어가주세요.

작업할 페이지 경로 : Settings > Developer Settings > Personal access token

들어가게 되면 우측에 Generate new token이 있습니다. 특정이름을 지정해주시고 Github에서 제공해주는 Key값을 다른 메모장에 복사 및 붙여넣기를 해주세요.

그런 다음에는 배포할 프로젝트가 있는 Repository로 이동을 해서 Settings > Secrets로 이동을 해서 아까 만들어준 token 이름과 key값을 복사 및 붙여넣기를 해줍니다.

저 같은 경우, 이름은 commit_secret으로 제 개인 Setting에서 발급받았고, 아래 사진은 배포할 프로젝트 Repository에서 Repository secrets를 설정해준 모습입니다.

Flutter Web으로 구현을 마친다음에 hosting을 github.io로 해보기로 했는데 flutter pub get 에서 pubspec.yml 파일을 찾을 수 없다는 오류가 계속 발생했습니다. 그래서 .yml 파일에 선언되어있는 workingDirectory를 계속해서 수정을 해봤지만 제대로 실행되지 않았습니다.

고맙게도 .yml 파일을 올려준 분이 계셨는데 나는 erickzanardo님의 GitHub Action을 사용하였습니다.

링크로 바로가기 👉

Action부터 따라하기

본인 workflow.yml 코드

name: Gh-Pages

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - uses: subosito/flutter-action@v1
      - uses: erickzanardo/flutter-gh-pages@v3
        with:
          workingDir: [ 'project 경로' ] 

저 같은 경우 build할 프로젝트 폴더가 다른 경로에 있었기 때문에

	with:
          workingDir: [ 'project 경로' ] 

를 추가해주었습니다.

/.github/workflows/ 안에 workflow.yml를 저장해주고 main으로 push하면 Github Repository에 들어가서 확인을 해보면 Actions란에서 현재 push한 .yml에 대해서 진행되고 있는 모습을 볼 수 있습니다. 상태는 Queued로 노란색으로 돌아가고 있을 겁니다.

위 사진처럼 완성이 되면 Repository 내에서

Settings > (왼쪽 리스트에서)Pages > Source

로 이동해서 Source 내 Branch를 gh-pages로 변경해주세요. 만약 Branch이름이 사진과 다르다면, 위에서 workflow.yml에서 맨 위에 적혀있는 name이 해당 Branch 이름이 될 것 입니다.

결과를 확인해보세요, 여기는 제 개인 포트폴리오입니다. 😁