How to deploy Flutter WebApp using Google Compute Engine

Photo by Karsten Würth 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)

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 | Cloud storage, Firebase hosting |
| Dynamic site | Compute Engine, App Engine, Cloud Run |

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

1. 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.

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

./google-cloud-sdk/bin/gcloud init

Update the component:

gcloud components update

2. Compute Engine

Secure and customizable compute service that lets you create and run virtual machines on Google’s infrastructure. (

Wait for a few minutes for your virtual machine to set up.

Go to Cloud Platform > Navigation menu > Networking > VPC network > External IP addresses, change the IP address type to static

3. Deploy LAMP stack on your instance

A “LAMP” stack is a group of open-source software that is typically installed together to enable a server to host dynamic websites and web apps. This term is actually an acronym which represents the Linux operating system, Apache web server, MySQL database, and PHP. (

sudo apt-get update
sudo apt-get install apache2 php libapache2-mod-php
sudo sh -c 'echo "<?php phpinfo(); ?>" > /var/www/html/phpinfo.php'
sudo apt-get update
sudo apt-get install mariadb-server php php-mysql
sudo systemctl start mariadb

** at this stage, your site isn’t installed with an SSL certificate; therefore, connection via HTTPS will

It would be best if you mapped your domain from your domain hosting site. In my case, I purchased the domain from Google; therefore, I can bind it by going to Google Domain > DNS > Name Server > Custom resource records. Here you need to create an additional subdomain using “www.”

4. 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 and view the web page locally with localhost:8080

flutter build web

Your Flutter project should contain a new folder called Build > Web, with index.html and main.dart.js file after running this command.

5. Deploy the WebApp on your server

There are various ways to upload files from your local machine to a server; here, I will use the upload file function from the Google VM instance.

sudo apt-get install unzip
sudo mv /var/www/html
sudo unzip
cd web
sudo mv * ../
cd ..
sudo rm -r web

6. Secure the Apache server with an SSL certificate

Noticing that there is a triangle icon next to your domain indicates the site isn’t secure? This is because we haven’t set up the SSL certificate yet. I will use Let’s Encrypt, a Certificate Authority that provides free TLS/SSL certificates to encrypt HTTPS on web servers.

sudo apt update
sudo apt install apache2
sudo a2enmod http2
sudo apt-get install python-certbot-apachesudo certbot --apache -m [YOUR-EMAIL] -d [YOUR-DOMAIN] -d www.[YOUR-DOMAIN]

** sudo certbot — apache -m -d -d

Select option-2 to redirect all traffic over HTTPS.

Congratulations! You have successfully enabled and

A new config file for the domain should be created

sudo vi /etc/apache2/apache2.conf

Add “Protocols h2 http/1.1” at the bottom of the file (without quotation mark), save and quit vi editor.

sudo systemctl reload apache2.service

Congratulations! Your site should work now with your domain.

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

Enthusiastic about cloud technology, data, clean code, Flutter, and Agile