Deploy Flutter web on Github pages with GitHub action 2023

2 min readApr 29, 2023

Blog นี้จะทำการพูดถึงการดีพลอย Flutter web บน GitHub page ครับ

Prerequisite

ความรู้ Flutter พื้นฐาน
โปรเจค Flutter บน GitHub
ความรู้ GitHub Action

GitHub Pages คืออะไร?

เป็น Hosting web ชนิดนึงที่ไว้สำหรับ deploy งานที่เป็น static web page ซึ่งจะนิยมดีพลอยพวก documentations ต่างๆ หรือ ตัวอย่างการใช้งาน library บน GitHub repo นั้นๆ

เริ่มต้นด้วยการเขียน Script deploy บน GitHub actions

ทำการสร้าง deployment script ที่ `.github/workflows/cd.yaml`

เนื่องด้วย Project นี้เราใช้ fvm ในการ control version ของ flutter ทำให้ script เป็นตามด้านล่าง

name: Deploy Web
on:
  push:
    branches:
      - main
permissions:
  contents: write
jobs:
  deploy-for-web:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: kuhnroyal/flutter-fvm-config-action@v1
      - uses: subosito/flutter-action@v2
        with:
          flutter-version: ${{ env.FLUTTER_VERSION }}
          channel: ${{ env.FLUTTER_CHANNEL }}
          cache: true
      - run: flutter --version
      - run: flutter config --enable-web
      - run: flutter pub get
      - name: Build for web
        run: flutter build web --release --base-href /${{ github.event.repository.name }}/
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@3.7.1
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages
          FOLDER: build/web
          CLEAN: true

สังเกจจาก Script ข้างต้นทำไมต้อง Set base-href ขณะ build flutter?

เนื่องจาก GitHub Pages จะดีพลอยด้วย pattern

https://<owner-of-repo>.github.io/<your-repo-name>

ทำให้เวลา Access เข้าถึง web จะต้องเข้าผ่าน path `/<your-repo-name>` จึงทำการ config เพิ่ม ตาม script ด้านล่าง

flutter build web --release --base-href /${{ github.event.repository.name }}/

Set deploy with branch

เมื่อมีการ push code เข้าไปใหม่ ที่ branch `main` ตาม ที่ ci ได้ตั้ง rule เอาไว้ จะทำการ trigger เพื่อ deploy บน GitHub Page ครับ

เสร็จสิ้น~

ตัวอย่างเว็บบน GitHub Page: Flutter App Learning (panachainy.github.io)

Example repository

https://github.com/panachainy/poc-stepper-flutter