🐦

Beta版のGitHub Actionsを使ってFlutter webをGitHub Pagesにデプロイする

2024/03/31に公開

Flutter

GitHub Actions

GitHub Pages

tech

やりたいこと

GitHub Pagesを使ってFlutterで作ったアプリを公開したい！
せっかくならbeta版のGitHub Actionsを使いたい！

参考

最初は下記の記事を元に公開しようと思ったのですが、
上手くいかなかったので、参考としつつ色々試行錯誤しました。

やり方

GitHubに公開したいFlutterプロジェクトのリポジトリをpublicで作成します。
GitHubにて、リポジトリのSettingsからPagesへ移動します。
SourceにGitHub Actionsを設定し、Static HTMLのConfigureを押下します。
ワークフローのymlファイルが作成され、編集画面に移動するので、下記のコードを貼り付けてコミットしてください。

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Repository
        id: version
        run: |
          REPOSITORY=$(echo ${{ github.repository }} | sed -e "s#.*/##")
          echo "repository=$REPOSITORY" >> $GITHUB_OUTPUT
      - name: Flutter
        uses: subosito/flutter-action@v2
        with:
          flutter-version: '3.19.3'
          channel: 'stable'
          cache: true
      - run: flutter --version
      - run: flutter pub get
      - run: flutter build web --web-renderer html --base-href /${{ steps.version.outputs.repository }}/
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload entire repository
          path: './build/web'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Actionsタブを開いて、実行されたワークフローを開きます。
実行が完了して緑のチェックがついていたら、デプロイされたリンクを開きます。
完了！

サンプル

公開したアプリはこちら（中身はプロジェクト作成時のデモです。）

GitHubのリポジトリはこちら

ベースはGitHub Pagesを設定した時に自動生成されるフローと、参考に挙げたフローです。

ymlファイルの解説

name: Deploy static content to Pages

実行された時に見えるワークフロー名です。

on:
  push:
    branches: ["main"]
  workflow_dispatch:

このワークフローが実行されるタイミングを示します。
上記だと、mainブランチがプッシュされた時と、自分で手動で実行した時（workflow_dispatch:）です。

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest

runs-onはこのアクションが実行される環境です。ubuntuはLinux系のOSです。

ここから先はactionsで実際に行う内容です。

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

Checkoutは、ざっくり言うとリポジトリ内のファイルを使う準備をしています。

      - name: Repository
        id: version
        run: |
          REPOSITORY=$(echo ${{ github.repository }} | sed -e "s#.*/##")
          echo "repository=$REPOSITORY" >> $GITHUB_OUTPUT

リポジトリ名を取得しています。参考元は取得方法が古かったようなので新しい書き方に書き換えました。

      - name: Flutter
        uses: subosito/flutter-action@v2
        with:
          flutter-version: '3.19.3'
          channel: 'stable'
          cache: true
      - run: flutter --version
      - run: flutter pub get
      - run: flutter build web --web-renderer html --base-href /${{ steps.version.outputs.repository }}/

Flutterのコマンドを順番に実行しています。

flutter --version：Flutterのバージョンチェック&コマンドが使えるかの確認
flutter pub get：パッケージの取得
flutter build web：Webアプリのビルド

--base-href /リポジトリ名/ で、アプリのアドレスが～/リポジトリ名/index.htmlという形になります。
これをしないと、WebアプリをGituHub Pagesで表示できません。
--web-renderer htmlは、出力方法にHTML+CSSを選んでいるだけです。
実は無くてもきちんとページ自体は見れます。

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload entire repository
          path: './build/web'

ビルドしたものをアーティファクトというものにアップロードして保持しています。
先ほどビルドしたファイル群は、./build/webに出力されているので、これを保持するように指定しています。

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

アーティファクトにあるWebアプリをデプロイしています。

やりたいこと

参考

やり方

サンプル

ymlファイルの解説

Discussion