【Flet】Pythonで書いたFlutterのWebアプリをAWS Amplifyで公開する

この記事の続きです。
https://zenn.dev/ncdc/articles/3e83248643806e

PythonライブラリのFletで作ったWebフロントエンドをAmplifyにデプロイしてみます。

とりあえず、コンソールから手動でdeployしてみる

1. 前回の記事で作ったサンプルアプリをビルドしてzipで固めます。

2. AmplifyのコンソールからD&Dでデプロイします。

3. 動きました。

以上です！！

これだけで終わりだと記事としてイマイチなので、自動Deployを構築してみます。

Amplifyにfletで作ったwebアプリをCI/CDする

AmplifyのCI/CD環境は通常はNodeの環境です。今はPython+Flutterの環境がほしいので面倒くさいです。
Amplify用のカスタムビルドイメージを作ってもいいですが、今回はGitHub Actionsを使ってflet buildでビルドした後にamplify publishでデプロイしてみます。

まずは手動のamplify publishでデプロイしてみる

プロジェクトの初期化

最初にAmplifyのプロジェクトを初期化します。

amplify init

普通に設定するとdeploy前にAmplifyがビルドしようとしてエラーになってしまいますので、以下のように設定してビルドコマンドを潰しておきました。

• Enter a name for the project
  • アプリ名なので普通に入力
• Choose your default editor:
  • Visual Studio Code
• Choose the type of app that you're building:
  • javascript
    • flutterにしたら動かなかった
• What javascript framework are you using:
  • none
• Source Directory Path:
  • .
    • fletアプリのソースコードの場所を指定するとfletのビルド時にエラーとなるので注意
• Distribution Directory Path:
  • app/build/web
    • ビルドしたファイルの生成場所を指定
• Build Command:
  • echo
    • Amplifyではビルドしないのでエラーにならないコマンドを適当に入れておく
• Start Command:
  • echo
    • 特に使わないのでエラーにならないコマンドを適当に入れておく

Hostingの設定

続いてcliからのHostingを有効化します。

amplify add hosting

Hostingのタイプを聞かれるのでマニュアルを選択

? Choose a type Manual deployment

デプロイ

デプロイする前にアプリをビルドしておきます

flet build web

Amplifyにデプロイします

amplify publish

デプロイ出来ました

GitHub Actionsを書く

GitHub Actionsを書いて自動でdeployさせます。

コードは長くなったので畳んでおきます

Actionsのyaml

name: amplify publish
on:
  push:
    branches:
      - amplify

jobs:
  publish:
    runs-on: ubuntu-latest
    permissions:
      id-token: write
      contents: read
    env:
      AWS_IAM_ROLE_ARN: ${{ vars.AWS_IAM_ROLE_ARN }}
      AWS_REGION: 'ap-northeast-1'
      AMPLIFY_APP_ID: ${{ vars.AMPLIFY_APP_ID }}
      AMPLIFY_ENV_NAME: 'dev'
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-region: ${{ env.AWS_REGION }}
          role-to-assume: ${{ env.AWS_IAM_ROLE_ARN }}
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 18
      - name: Setup python
        uses: actions/setup-python@v5
        with:
          python-version: '3.11'
      - name: Setup Flutter
        uses: subosito/flutter-action@v2
        with:
          flutter-version: '3.19.3'
      - name: Install Amplify CLI
        run: npm install -g @aws-amplify/cli
      - name: Build Flet App
        run: |
          cd app
          sed '/-e/d' requirements.lock > requirements.txt
          pip install -r requirements.txt && rm requirements.txt
          flet build web
      - name: Amplify Init & Publish
        run: |
          chmod +x ./deploy_scripts/amplify_publish.sh
          ./deploy_scripts/amplify_publish.sh

actionsから読んでいるスクリプト

./deploy_scripts/amplify_publish.sh

#!/bin/bash
set -e
IFS='|'

mkdir -p ~/.aws
# Generate ~/.aws/config
cat <<EOF > ~/.aws/config
[default]
region = ${AWS_DEFAULT_REGION}
output = json
EOF
# Generate ~/.aws/credentials
cat <<EOF > ~/.aws/credentials
[default]
aws_access_key_id = ${AWS_ACCESS_KEY_ID}
aws_secret_access_key = ${AWS_SECRET_ACCESS_KEY}
aws_session_token = ${AWS_SESSION_TOKEN}
EOF

# Set amplify init variables
AWSCLOUDFORMATIONCONFIG="{\
\"configLevel\":\"project\",\
\"useProfile\":true,\
\"profileName\":\"default\",\
\"region\":\"$AWS_DEFAULT_REGION\"\
}"
AMPLIFY="{\
\"appId\":\"$AMPLIFY_APP_ID\",\
\"envName\":\"$AMPLIFY_ENV_NAME\",\
}"
PROVIDERS="{\
\"awscloudformation\":$AWSCLOUDFORMATIONCONFIG\
}"

amplify init \
--amplify $AMPLIFY \
--providers $PROVIDERS \
--yes

amplify publish \
--yes

GitHub Actionsからデプロイできました。

なお、GitHub Actions用のコードが長くなった理由としては、、、

• 準備が必要なものが多い。
  • AWSのCredential
  • アプリのビルド用にpythonとflutter
  • Amplify用にnode
• amplify initのオプションにsession tokenを指定できない
  • 正気かよ。。。
  • 仕方がないのでOIDCで取得したcredentialから~/.aws/configと~/.aws/credentialsを作ってprofile指定するとかいう意味不明な実装になりました。

やっぱりカスタムコンテナイメージを作ってAmplifyのCI/CDでホスティングしたほうがマシだったかしれないです。。。でも、それはそれで結構面倒くさいんですよね。

注意点

前回の記事でも書きましたが、flet build時にrequirements.txtが残っているとエラーになってしまうので、pip installが完了したら削除しています。

最後に

デプロイは出来ましたが、フルマネージドサービスを通常とは違う使い方をしようとすると、無駄に面倒くさいということが良くわかりました。
一般的な使い方と外れるのであれば、Amplifyのようなマネージドなサービスよりも汎用性の高いサービスやコンテナ使ったほうが良さそうですね。

↓　前回の記事に戻る
https://zenn.dev/ncdc/articles/3e83248643806e