[Flutter로 개인 블로그 만들기] #2. Github Actions를 이용하여 CI/CD 구현하기

이전 포스트에서 Flutter Web을 Github Pages에 올리는 방법에 대해 작성했는데, 해당 방식의 단점이라고 하면 Web으로 빌드된 파일로만 처리해야해서 프로젝트 코드를 모두 올릴 수가 없어 관리가 어렵다는 것이 있습니다.

 

그래서 web 브랜치를 새로 만들어서 web 브랜치에는 빌드된 웹페이지 파일을 올려서 해당 branch로 Github Pages가 되게 하고, main 브랜치는 flutter 프로젝트 파일을 올리는 방식으로 진행합니다.

 

이것을 구현하기 위해 Github Actions를 이용할 예정입니다. 해당 툴을 이용하게 되면 이전처럼 일일이 빌드하고, 배포할 필요 없이 git에 코드를 push하는 것만으로 빌드, 테스트, 배포까지 되어 시간을 단축할 수 있다는 장점이 있습니다. 이러한 개념을 CI(지속적 통합)/CD(지속적 배포)라고 합니다.

 

CI/CD에 대한 개념은 직접 적는 것보다는 해당 글을 참고하시는 게 더 좋을 것 같아 참고 링크로 대신합니다.

https://www.redhat.com/ko/topics/devops/what-is-ci-cd

CI/CD(CI CD, 지속적 통합/지속적 배포): 개념, 툴, 구축, 차이

 

그러면 먼저 기존에 test용으로 이용했던 레포지토리를 제거하고 다시 새로운 레포지토리를 만들어보도록 하겠습니다.

 

테스트용 레포지토리 제거(이전 블로그를 따라하지 않았다면 생략)

해당 레포지토리 페이지에 들어가서 Settings 탭에 들어갑니다.

General 섹션 맨 밑으로 가게 되면 "Delete this repository"가 있는데 해당 버튼을 누르고 삭제하시면 됩니다.

 

Blog 레포지토리 생성

레포지토리를 생성하는데, 여기서 유의할 것은 github pages 뒤에 들어갈 path와 똑같이 작성해주셔야 합니다.

다음과 같이 레포지토리가 만들어졌다면 이제 기존에 이용했던 프로젝트를 git과 연결해주도록 해봅시다.

 

프로젝트 Git 세팅

우선 해당 포스팅에서는 git 설치에 관해서는 따로 얘기하진 않고 해당 링크로 대신합니다.

https://git-scm.com/book/ko/v2/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-Git-%EC%84%A4%EC%B9%98

Git - Git 설치

 

git이 설치되어있다는 가정하에 ide나 command로 해당 프로젝트 폴더로 들어가고 command에 다음과 같이 실행합니다.

git init

 

그 다음에 현재 있는 모든 파일을 git에 추가하여 commit해줍니다.

git add .
git commit -m "first init"

 

그리고 이제 Github 프로젝트와 연결해주는데 각자 git 주소가 달라 정확히는 Github 레포의 "or push an existing repository from the command line" 섹션의 코드를 그대로 하시면 됩니다. 

git remote add origin {Github 레포 git주소}
git branch -M main
git push -u origin main

 

그러면 이제 Flutter 프로젝트가 Github 레포에 올라가 있는 것을 확인할 수 있습니다.

 

Github Actions 세팅

이제 자동화를 위해 Github Actions를 세팅해줍시다.

Github Actions에 대한 정보는 해당 링크로 대체합니다.

https://docs.github.com/ko/actions

GitHub Actions 설명서 - GitHub Docs

 

Github Actions를 더 다양하게 이용하려면 Github Actions 관련 문법과 지원하는 기능들을 이해하고 있어야해서 이번 포스팅의 기능 이외에 더 다양한 경우(branch에 따라 다르게 하고 싶은 경우, flavor에 따라 다르게 하고 싶은 경우, iOS/Android 빌드 등)에는 Github Actions 문서를 참고해서 만들어보시면 됩니다.

추후 iOS/Android 빌드에 대해서는 따로 포스팅해보도록 하겠습니다.

이번 포스팅에서는 Web 빌드와 Github Pages 배포만을 구현해보도록 하겠습니다.

 

우선 조건은 다음과 같습니다.

1. main 브랜치에 push가 될 때 트리거가 되어야함.
2. 트리거 될 때 flutter build web 처리를 한다.
3. 빌드된 web 파일을 web 브랜치로 옮겨서 해당 파일로 Github Pages에 Deploy한다.

 

그런데 여기서 몇 가지가 추가되어야합니다.

Github Actions는 주로 가상 머신에서 동작하는데, 해당 머신에는 Flutter가 설치가 안되어있어 Flutter를 세팅해주는 기능도 추가해주고 혹시나 기존에 있는 cache도 있을수 있으니 관련 cache도 지워주고, pub도 새로 받아야 할겁니다.

또한 Github Repository에 access도 필요합니다.

그래서 몇몇 조건을 추가하면 순서가 다음과 같이 구현되어야합니다.

1. main 브랜치에 push가 될 때 트리거가 되어야함.
2. 트리거 될 때 Github Repository에 access를 해준다.
3. 그다음 flutter 세팅을 해준다.
4. flutter 세팅이 되면 먼저 기존 flutter pub 관련 캐시를 지워준다.
5. flutter pub을 다시 가져온다.
6. flutter pub을 가져왔다면, 이제 flutter web을 빌드한다.
7. 빌드된 web 파일을 web 브랜치로 옮겨서 해당 파일로 Github Pages에 Deploy한다.

이게 하나의 step이 되면 우리가 원하는 기능을 구현할 수 있게 될겁니다.

그러면 해당 step을 코드로 구현하면 다음과 같습니다.

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  build_web:
    name: Deploy Flutter Web to GitHub Pages
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - name: Github 레포지토리 세팅
        uses: actions/checkout@v4
      - name: Flutter 세팅
        uses: subosito/flutter-action@v2
        with:
          channel: stable
      - name: 캐시된 빌드, Pub 초기화
        run: flutter clean
      - name: Pub 새로 가져오기
        run: flutter pub get
      - name: 플러터 웹 빌드
        run: flutter build web --base-href "/blog/"
      - name: Github Pages 배포
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_branch: web
          publish_dir: ./build/web

 

해당 코드에 대해 하나씩 소개해드리도록 하겠습니다.

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

name: 해당 workflow의 이름

on: 트리거 처리

push: 푸시할 경우

branches: 해당 브랜치에

- main: main 브랜치

정리하면 "main브랜치에 푸시할 경우 트리거 처리한다."를 코드로 구현된 것입니다.

 

jobs:
  build_web:
    name: Deploy Flutter Web to GitHub Pages
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:

jobs: 실행할 job 리스트

build_web: job 아이디

name: job 이름

runs-on: 해당 job을 돌릴 runner. 여기서는 ubuntu 최신 버전 runner를 이용한다.

permissions: 권한 추가

"contents:write" : 컨텐츠 write 권한

steps: step 목록

현재까진 web만 빌드해도 되기에 기본적으로 Github에서 제공해주는 ubuntu-latest를 이용합니다. 하지만 iOS/macOS, Windows 빌드를 하려면 각각 Mac, Windows 러너가 필요합니다.

해당 프로젝트는 Public 레포지토리에서 진행하기 때문에 Runner에 대해 무료이나, Private 레포지토리에서는 유료이기에 돈이 든다는 부담감이 있으면 자기가 갖고 있는 로컬 머신을 이용한 Self-Hosted Runner를 이용하셔야합니다. 관련 정보는 해당 링크를 참고하시면 됩니다.

"contents:write" permission을 추가해야 Github Pages 배포할 때 새로운 branch를 만들고, 해당 branch에 파일을 넣을 수 있어 꼭 필요한 권한입니다.

 

      - name: Github 레포지토리 세팅
        uses: actions/checkout@v4

actions/checkout@v4를 이용하여 레포지토리 세팅을 해준다.

      - name: Flutter 세팅
        uses: subosito/flutter-action@v2
        with:
          channel: stable

subosito/flutter-action@v2를 이용하여 Flutter 세팅을 해주는데, stable 버전으로 설정해준다.

      - name: 캐시된 빌드, Pub 초기화
        run: flutter clean
      - name: Pub 새로 가져오기
        run: flutter pub get
      - name: 플러터 웹 빌드
        run: flutter build web --base-href "/blog/"

Flutter 관련 처리. Flutter 프로젝트를 clean한 후 다시 pub을 가져와 cache, build가 꼬이는 것을 방지해준다.

그리고 Flutter Web을 빌드한다.

      - name: Github Pages 배포
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_branch: web
          publish_dir: ./build/web

peaceiris/actions-gh-pages@v3를 이용하여 Github Pages를 배포한다.

원래 기본 branch가 있지만, 우리는 web으로 설정할 것이기에 publish_branch를 web으로 설정하고, 플러터 web을 빌드하면 ./build/web에 관련 파일들이 있기에 publish_dir로 해당 폴더로 설정해두고, github_token은 Github에서 제공하는 GITHUB_TOKEN을 연결해주면 된다.

 

그래서 프로젝트 파일의 .github/workflows 폴더를 새로 만들어주고, 새로운 yml파일을 만들어 위의 전체 코드를 넣어줍니다.

그리고 해당 변경사항을 commit한다음 push합니다.

git add .github\workflows\deploy_web.yml
git commit -m "add github action"
git push origin main

 

그러면 레포지토리의 Actions탭에 들어가면 해당 작업이 진행중인 것을 확인할 수 있다.

그리고 해당 이미지처럼 Deploy가 완료될 경우, 다시 Github Pages를 세팅합니다.

 

Settings 탭에 들어가 Pages 섹션을 누르고, Branch를 해당 브랜치로 설정해주고 save합니다.

그러면 이제 branch에서 Github Pages deploy가 됩니다.

deploy가 완료되면 해당 링크로 들어가 잘 작동하는지 확인해보면, 이미지처럼 잘 들어가질 것입니다.

Next?

이제 기초적인 세팅을 마췄고, 본격적으로 프로젝트 구조, 디자인, Routing, 상태관리 세팅을 진행하려 합니다. 아마 우선순위에 따라 만들어야할 것 같아서 어떤 걸 먼저 할지 고민입니다. 아마 상태관리 세팅하면서 프로젝트 구조를 세팅하지 않을까 싶습니다.

 

아니면 Github Actions를 Android/iOS에도 빌드하는 방법에 대해 다뤄보는 것도 좋을 것 같습니다. 대신 대부분의 회사들이 Private 레포지토리에 작업을 하는 경우가 많을텐데 기존 Runner를 이용하게 되면 비용이 발생하고, iOS까지 빌드하게 되면 제공해주는 Mac Runner 비용이 비싸 스타트업에서 쓰기 어려울 것입니다.

그래서 Self-Hosted Runner를 이용하여 회사에서 제공해주는 맥북이 있다면 그것을 로컬머신으로 이용하여 Github Actions를 처리하는 방법도 있는데, 이것에 대해 다뤄보는 것도 좋을 것 같습니다. 특히 Android, iOS 앱을 배포할 때는 각각 네이티브 기능과 Fastlane에 대해 다뤄야해서 정리해서 올리면 많은 도움이 되지 않을까 싶습니다.

 

[출처]

https://velog.io/@kdeun1/Github-Actions%EB%A1%9C-gh-pages-%EC%9E%90%EB%8F%99-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

Github Actions로 gh-pages 자동 배포하기

https://joeyhwang.tistory.com/19

GitHub : Flutter Web app을 GitHub Pages를 이용해 Deploy하기 1/2