Automate Flutter Web Deployment with CI/CD on Google Cloud Storage and GitHub Actions

Flutter Web has become a powerful tool for developing fast, responsive, and beautiful web applications with a single codebase. However, as your project scales, manually deploying your Flutter Web app can become tedious and error-prone. This is where Continuous Integration and Continuous Deployment (CI/CD) come to the rescue.

In this guide, we’ll streamline your Flutter Web deployment process using GitHub Workflow for automation and Google Cloud Storage as your hosting platform. By the end, you’ll have a fully automated pipeline that builds, tests, and deploys your Flutter Web app with ease.

Let’s dive into how you can reduce deployment complexity and focus on what matters most — building great apps! 🚀

1. Create Cloud Storage Buckets

To deploy your Flutter Web application to Google Cloud Storage, the first step is to create a bucket that will serve as your hosting environment. Here’s a step-by-step guide to creating a Cloud Storage bucket using the Google Cloud Console:

Open https://console.cloud.google.com/storage

click create bucket, for example the bucket name is xxx-corporate-sales-demo

for the region, select the geographic placement, for this I select singapore

select storage class for our data, for this I select Autoclass.

For control access I uncheck the Enforce public access on this bucket select Uniform access control. Uniform Access Control means that permissions are set at the bucket level, not the object level.

Check the soft-delete policy to protect object data

Click Create, and wait until bucket created

After the bucket is created, open the Permissions tab and click Grant Access on the Permission menu (bottom)

type allUsers on New principals, and select Storage Object Viewer Role

this popup will appear, select Allow public access

Now back to bucket list, then click option > Edit website configuration

Set index.html and 404.html

2. Create Load Balancer

A Google Cloud Load Balancer helps distribute traffic efficiently across your Flutter Web app, improving availability and scalability. Here’s a step-by-step guide to setting up a Load Balancer to serve your Flutter Web app from Google Cloud Storage.

Open https://console.cloud.google.com/net-services/loadbalancing then click Create a load balancer

Select Application load balancer (Http/Https) for Type of load balancer

Select Public face (external)

Select Best for global workloads for deployment

Select Global external application load balancer for Load balancer generation

Click configure

Set the load balancer name and IP configuration. In this case, I’m using HTTPS

For the certificate, I’ll create a new certificate

Continue to Backend Configuration, then click Create a Backend Service

For the cloud storage bucket, select the bucket that we’ve created before

Continue to Routing rules, then select simple host and path rule mode

3. Create a service account

A service account is necessary to authenticate your GitHub Workflow when deploying your Flutter Web app to Google Cloud Storage. Here’s a step-by-step guide to creating a service account and generating the credentials you’ll need.

Open https://console.cloud.google.com/iam-admin/serviceaccounts then select your project

Click Create Service account

then click Done.

Open Keys tab then click add key

Select JSON for private key file

Open cloud storage again, select our bucket, and Grant access with new principle with email from service account that we created before

Open our repository then open Settings > Secret and variables > actions

Click New repository Secret, and fill secret with content of Json file from Google Service account

Create the env variable, for example for storing API Url

4. Setup GitHub Workflow

To automate the deployment of your Flutter Web app to Google Cloud Storage, you can create a GitHub Workflow using GitHub Actions. Here’s a step-by-step guide to setting up the workflow file.

Open your flutter project, create deploy-gcs-demo.yaml file on .github/workflows folder, and make sure it is on the root project directory

Set the content of yaml file with this code, and make sure the flutter version, secret variable name, and Google Cloud Storage match with our configuration. In this configuration file, I set this workflow will autorun when I push on “demo” branch.

name: Deploy to Google Cloud Storage - Staging
on:
  push:
    branches:
      - demo
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Flutter
        uses: subosito/flutter-action@v2
        with:
          flutter-version: "3.24.5"
          channel: "stable"
          cache: true
      - name: Get dependencies
        run: flutter pub get
      - name: Set environment variables
        run: |
          echo "API_URL=${{ secrets.DEMO_API_URL }}" >> .env
      - name: Build web
        run: flutter build web --release --no-tree-shake-icons
      # Setup gcloud CLI
      - name: Auth to google cloud
        uses: "google-github-actions/auth@v2"
        with:
          credentials_json: ${{ secrets.GCP_SA_KEY_DEMO }}
          project_id: github-actions-gcs
      - name: Setup Gcloud
        uses: google-github-actions/setup-gcloud@v2
      - name: Deploy via GCS
        run: |
          gsutil -m rsync -r -d build/web gs://xxx-corporate-sales-demo

Now let’s edit our code so we can get the env value from GitHub secret. For the first, we need to add flutter_dotenv dependency, then we can get the value using this code

final apiUrl = dotenv.env['API_URL'] ?? 'Default API URL';

Everything is ready! let’s push the code and it will automatically run workflows on GitHub actions

Check the workflow, and make sure everything is fine

If everything is good, let’s back to our bucket. We can see that all files have uploaded

The last thing we need to do is point the domain to the IP of the load balancer