Amplify + Flutter: How to do CI/CD?

0

Background

I setup my project in the following way:

  1. I built a project in Amplify Studio, and amplify pull'd it to local.
  2. There, I put a flutter project in the same folder, which uses the amplify configuration file (lib/amplifyconfiguration.dart) to understand how to log in and what S3 stuff I use.
  3. Then I pushed this project to GitHub, connected GitHub with Amplify frontend, and can trigger a build.

Problems with this setup

There are a few problems with this setup, that don't work as I hoped.

  • The amplifyconfiguration.dart file is not checked into git. This is for good reason, as the backend may change without git knowing. The file is merely a result of the backend.
  • This means that I need to amplify pull (I think) to get the file. This means I need the amplify CLI.
  • My standard flutter container does not contain Amplify CLI
  • Amplify's build environment does not contain flutter
  • The Amplify CLI relies on interactive user input to configure as a flutter project as far as I have been able to figure out

My approaches

I tried to solve my problem in the following ways:

Look at AWS tutorials

Most of the tutorials that use flutter and amplify either:

  • Do not use an automated build system, so do not explain this at all
  • Do not use Amplify integration in their flutter apps, only run the flutter app on Amplify.

Github Actions

Somebody on Medium suggested to use GitHub Actions to build the project, to then commit using Actions to include the flutter build web --release output, to trigger an automatic build on Amplify to only use the artefacts produced by the GitHub build. I figured out the Amplify config, but the GitHub Actions config was more difficult. The problem lies in the configuration file, as I need to get it using amplify pull. Here is the snippet that failed for me:

      - name: Amazon Web Services CLI
        uses: aws-actions/configure-aws-credentials@v3
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: eu-central-1

      - name: Amplify
        run: |
          npm install -g @aws-amplify/cli
          if [[ "${{ github.ref }}" != "refs/heads/stable" ]]; then
            export AWS_ENV_NAME=dev
          else
            export AWS_ENV_NAME=prod
          fi
          amplify configure project --envName $AWS_ENV_NAME --appId ${{ secrets.AWS_APP_ID }} --providers "{\"awscloudformation\":{\"accessKeyId\":\"${{ secrets.AWS_ACCESS_KEY_ID }}\",\"secretAccessKey\":\"${{ secrets.AWS_SECRET_ACCESS_KEY }}\",\"region\":\"eu-central-1\"}}"

This part opened a browser window to login, which of course does not work on a runner that is not interactive.

Amplify Build

The second approach was building everything on Amplify. Since the AWS image does not have Flutter installed, I tried to install it with the following code:

version: 1
frontend:
  phases:
    # IMPORTANT - Please verify your build commands
    pre_build:
      commands:
    build:
      commands: 
        - echo "Installing flutter"
        - mkdir -p /usr/local/
        - curl -sL https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.13.1-stable.tar.xz 
        - tar xf flutter_linux_3.13.1-stable.tar.xz -C /usr/local/
        - export PATH="$PATH:/usr/local/flutter/bin"
        - flutter doctor
        - echo "Getting amplify config"
        - export AWS_APP_ID="abcdefgh"
        - if [ "${AWS_BRANCH}" = "stable" ]; then
            amplify pull --appId ${AWS_APP_ID} --envName prod --yes;
          else
            amplify pull --appId ${AWS_APP_ID} --envName dev --yes;
          fi
        - flutter pub get
        - flutter build web --release
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: build/web
    files:
      - '**/*'
  cache:
    paths: []

This failed in the tar command: [WARNING]: tar (grandchild): xz: Cannot exec: No such file or directory. Apparently xz wasn't installed. So I tried installing it with yum:

2023-08-27T14:15:14.328Z [INFO]: # Starting phase: build
                                 # Executing command: yum install xz
2023-08-27T14:15:18.466Z [INFO]: Loaded plugins: ovl, priorities
2023-08-27T14:15:31.947Z [INFO]: Resolving Dependencies

However this build got stuck in this phase. No further log was there, just a runner doing nothing.

Question

What is the best approach to do this, and what should I change to make it work?

Thanks for reading, if you can help me, thanks a lot!

2 Answers
0

Hey

I have been writing about the same topic and published some articles here and here

In my case I am using Flutter Actions in CodeCatalyst - but that does not solve the iOS problems that we still have.

The Ampilify documentation has recently been improved a lot around the "how to work with existing resources" for each of the different APIs that the SDK offers.

Maybe this helps?

Regards Johannes

profile picture
answered 8 months ago
0

Yum is waiting for confirmation add a -y to your yum command. You will also need to add a "safe directory" here are some example commands to get you going

frontend:
  phases:
    preBuild:
      commands:
        - yum install -y xz
        - curl -LO https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.16.5-stable.tar.xz
        - tar xf flutter_linux_3.16.5-stable.tar.xz -C /usr/local
        - export PATH="/usr/local/flutter/bin:$PATH"
        - git config --global --add safe.directory /usr/local/flutter
Daniel
answered 4 months ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions