Flutter for WebとGitHub Actionsで自分のポートフォリオを自動デプロイする

8391 ワード
Dart github-pages flutter_web Flutter GitHubActions Dart テキストリンク

概要

ほぼタイトルの通りである。
Flutterで静的なwebページを作成して、自分のポートフォリオページとして使用することが多い<username>.github.io にデプロイすることが目的です。

Flutter Web

Flutter Web についてはこれらで、環境構築してください。
https://flutter.dev/web
https://flutter.dev/docs/get-started/web

とりあえず、Flutter Webが作成できる環境で、Flutterのプロジェクトを作成する。

$ flutter create portfolio

GitHub Actions

以下のモジュールを使用していく。


Github Actionsで Flutter環境を作成するためのモジュール


flutter build web でビルドされたwebディレクトリを<username>.github.ioリポジトリにデプロイするために使用するモジュール

この2つのモジュールを使用すると爆速でできます。

とりあえず、ワークフローファイルを記載します。

github/workflow/main.yml
name: CI

on:
  push:
    branches:
      - source

jobs:
  build:
    name: Flutter build and deploy
    runs-on: ubuntu-18.04

    steps:
    - uses: actions/checkout@master
    - name: Say start a build
      run: echo flutter build web
    - uses: subosito/flutter-action@v1
      with:
        channel: 'dev'

    - name: Run a flutter build and deploy
      run: |
        flutter config --enable-web
        flutter pub get
        flutter build web

    - name: Deploy
      uses: peaceiris/[email protected]
      env:
        ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
        PUBLISH_BRANCH: master
        PUBLISH_DIR: ./build/web

困ったこと

stableでFlutter Webの環境が使えない？

  • Flutter Webが使用できる環境が、stable になくてビルドできなかったので dev を設定し解決しました。

<username>.github.io のルートURLが使えない？

  • <username>.github.io ディレクトリの master にビルドファイルを置かないとルートURLからページが設定できないっぽいので HugoのビルドをGithub Actionで自動化する にあるように develop ブランチのような別ブランチを作成し、そこにFlutterのブロジェクトを作成し解決した。

ちなみに

ちなみに、<username>.github.ioリポジトリ以外でgithub pagesにデプロイしたい場合は以下のようなワークフローです。

github/workflow/gh-pages.yml
name: github pages

on:
  push:
    branches:
      - master

jobs:
  build-deploy:
    runs-on: ubuntu-18.04
    steps:
    - uses: actions/checkout@master

    - name: setup flutter
      uses: subosito/flutter-action@v1
      with:
        channel: 'dev'

    - name: install
      run: |
        flutter config --enable-web
        flutter pub get

    - name: build
      run: flutter build web

    - name: deploy
      uses: peaceiris/[email protected]
      env:
        ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
        PUBLISH_BRANCH: gh-pages
        PUBLISH_DIR: ./build/web

GitHub リポジトリ

GitHub Pages

参考