Edited at

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


概要

ほぼタイトルの通りである。

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/actions-gh-pages@v2.5.0
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のブロジェクトを作成し解決した。:pray:


ちなみに

ちなみに、<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/actions-gh-pages@v2.5.0
env:
ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
PUBLISH_BRANCH: gh-pages
PUBLISH_DIR: ./build/web



GitHub リポジトリ

https://github.com/TaigaMikami/flutter_web_with_actions-gh-pages


GitHub Pages

https://taigamikami.github.io/flutter_web_with_actions-gh-pages/#/


参考