How to deploy Flutter WebApp using Google Kubernetes

Photo by Eric Parks on Unsplash

This is a series of Google Cloud Platform study notes:

Domain, SSL, and Google Site (#1)

How to Deploy Flutter WebApp using Google AppEngine (#2)

How to Deploy Flutter WebApp using Google Cloud Run (#3)

How to Deploy Flutter WebApp using Google Compute Engine (#4)

How to Deploy Flutter WebApp using Google Kubernetes Engine (#5)

Google provides various web hosting options: Compute Engine, App Engine, Kubernetes, firebase, Cloud Run, and Cloud functions. The table below might help you make decisions.

In this article, I will demo deploying a Flutter WebApp using Google Kubernetes Engine.

Google Kubernetes Engine

Kubernetes also known as K8s, is an open-source system for automating deployment, scaling, and management of containerized applications. (kubernetes.io)

Google Kubernetes Engine (GKE) provides a managed environment for deploying, managing, and scaling your containerized applications using Google infrastructure. (cloud.google.com/kubernetes-engine)

To deploy a WebApp on GKE, we will need the following steps:

  • Create a Google project
  • Create a Flutter WebApp project and containerizing it
  • Create a GKE cluster
  • Deploy to GKE

Create a Google Platform Project

First, go to Google Cloud Platform to create a project.

Google gives the new users a free $300 credit for 90 days to try the GCP suite, so even though you need to set up the billing, you won’t be charged if you stay within your free quota. But I would recommend setting up budget alerts to keep on top of your spending. You can permanently disable it during the development period and enable the app engine server on-demand with one click.

The next step is to enable Kubernetes Engine API:

Then enable the Cloud Build API:

Now that we have a project with Google Cloud, the final step is to install the Google Cloud SDK and kubectl command so that you can perform actions from the command-line tool:

Create a Flutter WebApp

*Prerequisite: IntelliJ or VS Code IDE with Flutter build environment

Create a new Flutter project with Android/iOS/Web-enabled, or use your existing Flutter project if you have one. Run the following command, making sure you can build the web page locally:

Create a Dockerfile in the root folder, which configures the Docker image settings and containerizing the app. Copy the following content into your Dockerfile.

Next, create a server.sh file inside the server folder:

The project directory looks like this.

The final step is to containerizing the app and upload it to Container Registry:

Deploy to Google Kubernetes Engine

Go to Google Cloud Platform Console > Navigation menu > Kubernetes Engine > Clusters > Create, choose a name and zone for your cluster, and keep everything else as default (unless you prefer to config it).

In the command line, check the deployment with:

Or you should be able to view your cluster in the Google Cloud Console.

Deploy the image

Go to Google Cloud Platform Console > Navigation menu > Kubernetes Engine > Workloads > Deployment; in the Edit container drop-down list, select the image you just uploaded.

Deploy the service

The Pod is contained within your Google Cluster, and you need a service that provides load-balanced access to it.

Create a file service.yaml in the same directory with your Dockerfile

Create the service:

Once deployment has completed, click the URL link to see your WebApp

☀️ 🌤 ⛅️ 🌥 ☁️ NEXT (and in no particular order) 🌦 🌧 ⛈ 🌩 🌨

Head of Android Engineering @Tide, enthusiastic about Clean code, Flutter and Agile

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store