Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

概要

ほぼタイトルの通りである。
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/#/

参考

taigamikami
大学生 自分の勉強・メモとしてQiitaに投稿しています。おかしいと思う部分は遠慮なくご指摘いただければと思います。 Ruby/Rails/Swift/iOS/Python
https://taigamikami.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away