[Flutter] Github pages로 flutter web 배포하기 및 CI/CD관리

 

 

github pages로 flutter web을 배포해봅시다

 

1. Github repository 생성

---

먼저, 코드를 저장할 github repository를 생성해야합니다.

 

 

위 사진처럼의 New를 눌러 새로운 repository를 생성해줍시다.

 

레파지토리 Name은 나중에 웹사이트의 Url에 꼭 들어가기 때문에 신중하게 정해주세요!

아래의 create repository를 누르면 정상적으로 새로운 repository가 생성될것 입니다.

 

2. Flutter project 생성

---

다음으로는, github web을 배포할 flutter project를 생성해줘야합니다.

 

터미널에 아래 명령어를 치고 chrome에 flutter web을 실행시켜봅시다.

 

flutter channel stable
flutter upgrade
flutter config --enable-web
flutter create my_flutter_web_app
cd my_flutter_web_app
flutter run -d chrome

 

순서대로 쳤을때, chrome이 정상적으로 실행되면 제대로 셋팅이 된거입니다.

 

3. Flutter project와 git repository 연결

---

flutter web과 repository를 생성했으면 이제 연결을 해야합니다.

 

flutter project를 생성한 경로에서 터미널에 아래 명령어들을 차례대로 입력해줍시다.

 

cd my_flutter_project
git init
git add .
git commit -m "Initial commit"
git remote add origin <github 레파지토리 링크>
git push -u origin master

 

아래 명령어들을 차례대로 입력하고, repository에 정상적으로 파일이 올라갔으면 셋팅 완료입니다.

 

4.gh-pages 설정

---

4번째로 gh-pages 설정입니다.

 

프로젝트 폴더에서 아래 사진처럼 .github/workflows/build-deploy.yml 파일을 만들어줍니다.

(이름은 크게 중요하지 않습니다)

 

 

그리고 아래 코드와 같이 build-deploy.yml 내용을 작성해줍시다

 

name: Deploy Flutter Web App to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout
      uses: actions/checkout@v4

    - name: Setup Flutter
      uses: subosito/flutter-action@v2
      with:
        flutter-version: '3.10.6' # 사용하는 Flutter 버전으로 변경

    - name: Install Dependencies
      run: flutter pub get

    - name: Build Web
      run: flutter build web --release

    - name: Add .nojekyll
      run: echo > build/web/.nojekyll

    - name: Deploy to GitHub Pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.MY_SECRET_KEY_NAME }} # repository에서 사용할 시크릿 키 이름
        publish_dir: build/web
        publish_branch: gh-pages

 

코드에 대해서 간단히 설명한다면

build-and-deploy 내부

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

steps 내부

name : 실행할 로직의 이름
uses : 사용할 라이브러리 이름과 버전 명시
with : 옵션 설정

 

입니다.

 

위의 과정을 간단하게 설명한다면,  먼저 우분투에서 레포지토리 소스를 가져온다음 플러터셋팅을 합니다.

그리고 web으로 빌드한 다음 gh페이지에 배포하는겁니다.

 

그리고 사람들은 gh-pages를 통해 배포된 저희의 앱을 볼수 있게 되는겁니다.

 

MY_SECRET_KEY_NAME 같은 경우는 이름을 마음대로 지정해도 됩니다!

다음 파트에서 secret key에 대해 설명드리겠습니다.

 

정상적으로 완료되었으면 브랜치에 push가 될때 자동으로 액션이 돌아가게 될겁니다.

 

5. index.html 수정

---

처음에 github repository를 만들때, 이름이 배포할웹의 url에 들어간다고 했었죠?

 

그에 관련해서 index.html을 수정해줘야합니다.

다른게 아니라 base href안에 /<자신의 레자피토리 이름>/을 넣어주면 됩니다.

<base href = "/<자신의 레파지토리 이름>/">

 

 

 

수정을 완료한뒤, 터미널에 아래 명령어를 입력해주십시다.

flutter build web --release

 

위의 명령어는 로컬 환경에서 web 빌드를 시도하여 문제가 있는지 확인하는 명령어입니다.

이 명령어를 실행하면, build/web 이라는 폴더가 만들어지는데 이 폴더가 제대로 만들어졌는지 꼭 확인해야합니다.

 

 

6. repository secret key 설정

---

거의 막바지 단계입니다.

 

생성한 repository에서 build-deploy.yml 파일에서 입력했던 secret key를 생성해줘야합니다.

 

먼저, github에서 settings을 들어간다음, 아래사진처럼

Developer settings -> Tokens(classic) -> Generate new Token (classic)을 눌러서 새로운 secret키를 생성해줍니다.

(여기서 secret키 이름은 아무거나 하셔도 괜찮습니다!)

그런 다음, 아래의 repo와 workflow는 꼭 체크해주세요.

 

 

secret키를 생성했으면, 새성된 secret key를 복사하고 repository로 가서 settings를 눌러줍시다.

 

 

 

 

그런 다음, Secrets and variables / Actions 탭에서 New repository secret을 만들어줍니다.

 

여기서 만드는 repository secret의 이름 반드시 build-deploy.yml 파일의 secrets.[repositroy secrets이름]과 일치해야합니다.

 

 

 

 

7. pages 설정 및 웹 배포 확인

---

마지막 단계입니다.

 

아래의 사진과 같이 repository settings에서 Pages 탭에서

gh-pages, /(root)로 셋팅해주고 Save를 눌러줘야 합니다.

 

 

여기서 gh-pages가 없는 분들도 있을텐데, 그런경우에는 한번 pr로 main에 merge하면 gh-pages가 뜰겁니다.

merge를 하고도 gh-pages가 안뜬다면 Actions에서 실패한 항목이 있는지 살펴봅시다.

 

 

 

본론으로 넘어와서 Save를 누른다면 github Actions가 돌아가게 됩니다.

github Actions에 check 표시가 뜬다면 이렇게 정상적으로 배포가 되있는것을 확인할수 있습니다.

 

 

링크를 눌러보면 이렇게 정상적으로 배포가 된것을 확인해볼수 있네요~

 

 

글이 조금 길었네요.

모두 즐거운 개발하세요~!