Zenn
🚀

【FlutterWeb】【GithubActions】CloudFlarePagesでデプロイ

2024/06/24に公開
GitHub Actions
Cloudflare
FlutterWeb
Cloudflare Pages
tech

FirebaseHostingとの比較

メリット 👌

  • 帯域幅の制限がない点。無料の範囲でとりあえず、月間のアクセス量を気にせず運用可能。

デメリット 🧐

  • 強いて言えば、デプロイ方法がやや劣る。（そこまで気にならないが）

CloudFlarePagesのデプロイ手法（３つ）

  • 1 手動でアップロード
  • 2 WranglerCLI経由でアップロード
  • 3 Git連携（リポジトリ監視）（リポジトリが更新されたらデプロイ走る）
    -> 3を選択

「Git連携（リポジトリ監視）」 の運用について

「build/web」をどこに置くか問題

A: １つリポジトリで運用　（Flutterプロジェクト用の１つ）

B: 2つのリポジトリで運用 （Flutterプロジェクト用 &　build/web用）

  • [build/web]のみ管理するリポジトリを別途作成するパターン
    → Bで対応
    （※1...Aにしなかった理由は、末尾記載 ）

B: 2つのリポジトリで運用 の対応方法

全体図

1: [FlutterプロジェクトのGitリポジトリ]
　↓
2: [GithubActions]
　↓
3: [build/web用のGitリポジトリ]
　↓
4: [CloudFlarePages]
  • 1:
    • Flutterアプリを開発
  • 2:
    • [build/web]を生成し、下のGitリポジトリにPushする処理
  • 3:
    • [build/web]のみ管理。CloudFlare側でGit連携して、デプロイ監視。
  • 4:
    • 上のリポジトリの[build/web]を自動デプロイ
    • ※事前に[build/web]用のリポジトリを作成が必要

GithubActionsの利用

処理の概要

  • 1 web_pushブランチにPushで処理開始
  • 2 $ flutter build web を実行し、[build/web]を生成
  • 3 生成した[build/web]を 「build/web用のリポジトリ」にPush
    • ※Pushされると、CloudFlare側で、デプロイ処理が走る。
  • [その他] キャッシュ処理（flutter sdk, pub get,等）

GithubActionsのコード

name: Build [build/web] & Push to [web/build] to other Web Repository.

on:
  push:
    branches:
      - web_push  # トリガーとなるブランチ

jobs:
  deploy:
    runs-on: ubuntu-latest

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

    - name: Set up Git
      run: |
        git config --global user.name "github-actions[bot]"
        git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"

    - name: Install SSH key
      uses: webfactory/ssh-agent@v0.9.0
      with:
        ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}

    - name: Set up Flutter
      uses: subosito/flutter-action@v2
      with:
      # flutter-version: '3.0.0' # 任意のバージョンを指定する場合
        channel: 'stable'        # Stableの最新版を指定
        cache: true                
    - run: flutter --version

    - name: Cache Flutter dependencies
      id: cache-flutter-deps
      uses: actions/cache@v3
      with:
        path: |
          ~/.pub-cache
          ${{ github.workspace }}/.packages
        key: ${{ runner.os }}-flutter-${{ hashFiles('**/pubspec.lock') }}
        restore-keys: |
          ${{ runner.os }}-flutter-

    - name: Check cache status
      run: |
        if [ ${{ steps.cache-flutter-deps.outputs.cache-hit }} == 'true' ]; then
          echo "Using cached dependencies."
        else
          echo "Cache not found, running flutter pub get."
        fi

    - name: Install dependencies
      run: flutter pub get

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

    - name: Clone Web Repository
      run: |
        git clone git@github.com:{GITUSERNAME}/{GITREPOSITORYNAME.git} web-repo
        cd web-repo
        git checkout main

    - name: Create target directory if it does not exist
      run: |
        mkdir -p web-repo/build/web

    - name: Copy Files
      run: |
        rsync -a --delete build/web/ web-repo/build/web/

    - name: Commit and Push Changes
      run: |
        cd web-repo
        git add .
        git commit -m "GithubActions: Push To web/build from flutter app repository."
        git push origin main

↑をコピペする際に、変更が必要な箇所

  • 1, SSH_PRIVATE_KEY の定義・設定
    ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }} の箇所で利用
    refs: GitHubにSSH接続する方法
  • 2, 「build/web管理用」のリポジトリのURL を適宜変更
    git clone git@github.com:{GIT_USERNAME}/{GIT_REPOSITORY_NAME.git} web-repo

flutterのバージョン指定

name: Set up Flutter の処理で指定。
指定方法はいろいろあるため、適宜指定。
-> refs: flutter-action:README
-> pubspec.ymlのFlutterバージョンを指定する方法 が、運用上よさそう？

使ってみて😃

  • mainブランチで開発した内容を、「push_web」ブランチに「マージ&Push」で、webデプロイできるので便利🎶
  • FlutterWebだと、GithubActionsの使用OSがLinuxなので無料枠（2000分/月）はだいぶ余裕があるのでよい🎶
    （iOSアプリだと、MacOS稼働なため、リソース消費が3倍な上に、ビルド時間増加傾向なので、すぐ消費される）

※1...Aにしなかった理由は、別途記載）

※1...Aにしなかった理由は、別途記載）

build/webをGit管理にする際に、下記構造で、「web」のみ管理。それ以外は、.gitignoreする。
としたかった。が、うまくできなかったため、断念。

project/
├── .gitignore
├── build/
│   ├── web/
│   │   ├── index.html
│   │   └── assets/
│   │       ├── style.css
│   │       └── script.js
│   └── ios/
│       └── file.txt
│   └── andoroid/
│       └── file.txt
└── src/
    └── main.c

// .gitignoreファイルの末尾に記載

# 一旦、すべての build/ ディレクトリを無視
build/

# ただし、build/web/ ディレクトリは管理対象とする
!build/web/

# build/web/ ディレクトリの内容も管理対象とする
!build/web/**

この状態で、build/web/の内容をコミットする場合、
$ git add build/web
では差分が追加されず、必ず「強制オプション」が必要だった。
$ git add -f build/web

build/web の差分が、ステージングツリーに自動で反映されず、コミット漏れが起きるので、この対応を諦めた。

※↓　git のキャッシュクリアはしたが変わらず。

git rm -r --cached build/web
git add .
git commit -m "Update .gitignore and re-add build/web"

※2...A: １つのリポジトリで運用する場合のパターン

１つのリポジトリで運用する場合のパターン MEMO

※A... 【これで対応すれば良かったかも】😅

  • GithubActions側で
    • 「build/web」を生成し、
    • 同じリポジトリ に別途 「buildWeb/」フォルダ を作成し、そこにコピペ移動させる。
  • 作成した 「buildeWeb/」フォルダのみ、Git管理 する。

※B... 【シンプル】

  • build/webだけのGit管理はあきらめて、build/全体をGit管理（容量だけ気にする必要はありそう🧐）

Discussion