9. Flutter web CI/CD 적용

 

참고자료

 

Netlify Actions - GitHub Marketplace

 

[DevOps] Netlify에 CloudFlare DNS 연동하기

 

---

 

진행과정

Dockerfile과 build.sh를 통해서 개발 환경을 구축 하였다.

그리고 build 버그를 해결 했으므로, 배포 환경을 구축 하였다.

 

Domain 확보

새로운 도메인을 구매하려고 하였으나, 현재 카드를 분실한 상태라 결제를 할 수 없다..

어쩔 수 없이, 다른 용도로 구입했던 다른 도메인을 임시로 사용한다.

 

---

Netlify 세팅

 

 

Static web hosing 서비스를 제공한다. 소규모 프로젝트에 대해서는 무료로 사용할 수 있다.

정적웹이라 할 지어도, CSR을 통해서 동적인 웹을 생성할 수 있어서 정적웹으로도 대부분 충분할 것이다.

 

이 서비스는 github와 연결하여 몇 번의 클릭으로 Deploy 가능하다.

github-action으로 CI(build & test)를 하고, netlify-action을 이용하여 CD(deploy)를 하는 구조로 CI / CD를 할 수 있다.

 

netilify-action을 사용하려면, netlify에 대한 인증 및 인가를 해야한다.

github와 연결한 후에, netlify의 auth_id와 site_id값을 찾아내서 Github Secrect 변수로 등록한다.

 

---

 

Github-action 으로 CI / CD

 

name: Build and Deploy to Netlify

on:
  push:
  pull_request:

jobs:
  build:
    name: Build-action
    runs-on: ubuntu-22.04
    steps:
      - name: Checkout source code
        uses: actions/checkout@v4.1.1

      - name: Install Flutter SDK
        uses: subosito/flutter-action@v2.12.0
        with:
          channel: 'stable'
          flutter-version: '3.16.9'

      - name: Import Flutter package
        run: flutter pub get

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

      - name : Deploy to Netlify
        uses : nwtgck/actions-netlify@v2.0
        with : 
          publish-dirt : './build/web'
          production-branch : develop
          github-token: ${{secrets.GITHUB_TOKEN}}
          deploy-message: "Deploy from GitHub Actions"
          enable-pull-request-comment: false
          enable-commit-comment: true
          overwrites-pull-request-comment: true
        env:
          NETLIFY_AUTH_TOKEN: ${{secrets.NETLIFY_AUTH_TOKEN}}
          NETLIFY_SITE_ID: ${{screts.NETLIFY_SITE_ID}}
        timeout-minutes: 1

 

위 action은 다음과 같은 순서를 따른다.

1. 소스코드를 가져온다.
2. Flutter SDK를 설치한다.
3. Flutter의 의존성을 설치한다.
4. Web build를 수행한다.
5. netlify와 연동한다.

 

github와 netlify에 대한 권한이 필요하기 때문에,

github_token, netlify_auth_token, netlify_site_id 3개의 값이 필요하다.

역시 요즘 세상은 참 편한 것 같다. 이렇게 쉽게 된다니.

 

 

---

 

Cloudflare로 HTTPS 적용하기

 

Netlify에서 자체적으로 https가 적용된 랜덤 도메인을 만들어준다.

하지만, 커스텀 도메인을 등록하면 커스텀 도메인에 대한 https는 직접 설정 해 주어야 한다.

 

Cloudflare는 클릭 몇 번으로, https/ssl 기능을 무료로 제공한다.

커스텀 도메인을 Cloudflare의 인증서를 거치고, Netlify에서 배포되는 랜덤 도메인을 연결하는 과정을 거치면 끝이다.

 

Cloudflare에서 도메인을 입력해서 연결하고,

도메인 관리에서, 네임 서버를 Cloudflare에서 제공받은 네임서버로 변경하면 끝이다.

 

---

피드백

 

 

잘 동작하는 것을 보니 기분이 좋다.

Dockerfile, sh, CI/CD는 소규모 프로젝트에서는 쉽고 빠르게 적용할 수 있다.

 

위의 설정을 통해 얻은 것들은 다음과 같다.

안정적인 환경은 삽질을 줄여줬고,

sh를 이용한 local-build는 개발 및 테스트 시간을 줄여줬고,

CI / CD는 통합 테스트 및 배포 시간을 줄여줬다.

 

local-build에서 약 1분의 시간을 번다.

Test & Deploy에서 약 3분의 시간을 번다.

 

로컬 빌드는 하루에 60번은 할 것이다. 이는 60분의 시간을 가져오고,

하루에 10번을 테스트 및 배포를 하면 30분의 시간을 번다.

 

토이 프로젝트임에도 90분 이상의 시간을 추가로 확보한 것과 다름없다..!

 

소규모 프로젝트라 Tool들의 힘을 빌려서 간편하게 했다.

Tool에 의지하지않고 CI / CD를 구축하는 연습도 해야함을 확실하게 느꼈다!