How to deploy Flutter WebApp using Google Cloud Run

This is a series of Google Cloud Platform study notes:

Host Flutter WebApp using Google AppEngine (#2)

Deploy Flutter WebApp using Google Cloud Run (#3)

Host Flutter WebApp using Google Compute Engine (#4)

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.

+--------------+---------------------------------------+
| Static site  | Firebase hosting                      |
+--------------+---------------------------------------+
| Dynamic site | Compute Engine, App Engine, Cloud Run |
+--------------+---------------------------------------+

In this article, I will demo deploying a Flutter WebApp using Cloud Run, and you should be able to host your Flutter project using Cloud Run if you follow through.

Cloud Run

It is a fully managed serverless application platform provided by Google. Cloud Run and AppEngine have similarities while they differ in many aspects; for example, with AppEngine, one instance is constantly running, while with Cloud Run, users pay for each request. They both support using containers, but Cloud Run gives you more flexibility to customize Docker images. I would recommend Cloud Run if you have some DevOps experience and AppEngine if you prefer an Ops-free environment.

To deploy a WebApp on Cloud Run, you need following steps:

Create a Google Cloud project
Create a Flutter WebApp project
Containerizing the WebApp using Cloud Build
Deploy the image on Cloud Run

Create a Google Platform Project

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

Google gives new users a free $300 credit for 90 days to try the GCP suite; 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.

Next, enable Billing and Cloud Run API:

Then, enable Cloud Build API:

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

./google-cloud-sdk/install.sh
./google-cloud-sdk/bin/gcloud init
gcloud components update

Create a Flutter WebApp

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

Create a new Flutter project enabling Android/iOS/Web, or use your existing Flutter project if you have one. Run the following command, making sure you can launch the WebApp on a browser locally (localhost:8080)

flutter build web

Create a Dockerfile in the root folder; this file configures the Docker image and containerizes the app. Copy the following content into your Dockerfile.

FROM ubuntu:20.04

# Setup 
RUN apt-get update && apt-get install -y unzip xz-utils git openssh-client curl python3 && apt-get upgrade -y && rm -rf /var/cache/apt

# Install Flutter
RUN git clone https://github.com/flutter/flutter.git /usr/local/flutter
ENV PATH="/usr/local/flutter/bin:/usr/local/flutter/bin/cache/dart-sdk/bin:${PATH}"RUN flutter channel master
RUN flutter upgrade
RUN flutter config --enable-web
RUN flutter doctor -v

# Copy files to container and get dependencies
COPY . /usr/local/bin/appWORKDIR /usr/local/bin/appRUN flutter pub getRUN flutter build web

# Document the exposed port and start serser
EXPOSE 8080ENTRYPOINT [ "/usr/local/bin/app/server/server.sh" ]

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

#!/bin/bashcd build/web/
python3 -m http.server 8080

The project directory looks like this.

What is a Docker container?

A Docker container image is a lightweight, standalone, executable package of software that includes everything needed to run an application (docker.com)

A physical server is like a house with a permanent address; you own 100% of everything, including the maintenance and upgrading. You need to sell and re-purchase if it depreciates.

A virtual machine is like an apartment; either you rent or buy. It resides inside a building, and a building has multiple flats. You are the flat owner that you can decorate all the interiors, but you cannot change the external building structure.

A Container is like a shared room; you choose a pre-made room such as a hotel or an empty space to set it up. The room is yours when in use, and it is restored when you leave.

Containerize and upload WebApp image

Now you have the project set up, let’s containerize it into an image. In your project root, where it has the Dockerfile, run the below command:

gcloud builds submit — tag gcr.io/{PROJECT_ID}/{YOUR-IMAGE-NAME}:$tag .

Here {PROJECT_ID} is your GCP project ID, and {YOUR-IMAGE-NAME} is anything you like to name your image, for example:

gcloud builds submit — tag gcr.io/my-project-123456/my-project-image:1.0 .

To confirm the image has been created, go to Google Cloud Platform > Navigation menu > Container Registry.

** because Google charges for the platform usage, I would recommend installing Docker locally, test the deployment before uploading it to Container Registry.

Deploy Docker image to Cloud Run

You can deploy a container image that is stored in the Container Registry in the same project. Go to Cloud Platform > Navigation menu > Cloud Run > Create Service