Deploy a web app on Google App Engine.
Step by step guide to deploy React application with python flask backend on GAE.
In this post we will learn how to create a GCP (Google Cloud Provider) account and deploy a full-stack web application on Google App Engine.
What is Google App Engine?
GCP aka Google Cloud Provider is one of the top cloud provider services available in the field. Google App Engine (GAE) is a cloud computing platform offered by GCP. Simply, you can use Google App Engine to host your dynamic or static web applications. Google App Engine is used quite often due to its simplicity.
Create a GCP account.
Go to https://cloud.google.com/ and click on “Get Started for Free”. You will need to provide your credit card details in order to create an account. But the good news is you will be awarded $300 in free credits. This credit amount will be valid only for first 90 days. Even after that you will be charged only if you exceed amount of free resources provided. To learn more about pricing for GAE visit https://cloud.google.com/appengine/pricing.
If you haven’t installed Google Cloud SDK, install and do necessary configurations as mentioned in https://cloud.google.com/sdk/docs/install.
Create GCP project and GAE project.
Now let’s create our first Google App Engine project.
For that you need to first create a GCP project.
Click on the project name showed inside the red box. This will show you a list of available projects and an option to create a new project.
Create a new project or select an existing project from the window shown in the below image.
Now let’s create an GAE project.
From the navigation menu on the left side of the page select App Engine listed under Compute section of the menu.
Click on Create Application on the middle of the page. Then select a region. Even though this is not much important note that the location you select will be permanent.
Do not select a language and an environment when prompted. This is because we are going to deal with separate languages and environments for frontend and backend.
NOTE: What are the environments in GAE?
There are 2 different kinds of environments in GAE as standard environment and flexible environment. Depending on your requirements you can select the environment/s.
For more information visit https://cloud.google.com/appengine/docs/the-appengine-environments.
Enable billing for the project.
Go to Billing on the left navigation menu. For this you need to have a billing account. Click on Link a Billing Account. If you already have a billing account you will be able to add it straight away. Else you will need to create a billing account.
NOTE: Limit of projects in a free tier billing account
Only 3 projects are allowed to enable billing if you are using free tier. You can check the projects with billing enabled. Go to Billing in the left navigation menu and navigate to Account Management in the bottom of Billing section. You can disable or change billing by clicking on the 3 dots in front of the each project listed.
Now we need to enable Cloud Build API.
For this you can use in-built terminal of GCP. Click on Activate Cloud Shell on the top right corner of the window (2nd icon from the left). This will open cloud shell at the bottom of the page. You can use this to run commands.
Use the below command to enable Cloud Build API.
gcloud services enable cloudbuild.googleapis.com
Now we are ready to upload our code into Google App Engine.
What are we going to do?
There are several ways to use GAE to deploy your application. In this section we will look into a very simple way of deploying.
We will have 2 services in our GAE project for frontend and backend. Backend will be deployed as the default service. If you want you can chose frontend as the default service.
NOTE: Services in GAE
Every GAE project must have a default service. The first service you deploy will be default service. You can have additional services if needed. Visit https://cloud.google.com/appengine/docs/standard/nodejs/configuration-files to learn more about services.
Deploy python backend as the default service.
You need to have 3 things in order to be able to deploy python application successfully.
- main.py file
- requirements.txt file
- yaml file
main.py is treated as the entry point for Python in GAE. If you have your main python file in another name, you might want to rename it. Make sure that requirements. txt file is available.
In yaml file you can configure GAE project settings. Simply create a file in the root folder of the application with the extension .yaml. You can name it anything you want but the convention is to use app.yaml. Let’s name it as backend.yaml.
Basically, in this yaml file you need to have 2 elements. The first element is required while second one is optional.
- runtime: specify python runtime environment to be used.
- service: specify the name of the service. The first service will be treated as the default service even if it is not specified in the yaml file.
An example is shown in the following image.
Additionally, you might want to use different instance classes depending on the infrastructure(memory limit, CPU limit) needed by your application. This can be configured in the yaml file.
An example is given below.
Learn more about instance classes: https://cloud.google.com/appengine/docs/standard#instance_classes
Learn more about other elements in yaml: https://cloud.google.com/appengine/docs/standard/python/config/appref
Use the below command in the terminal to upload source code into GAE. Use the name of your yaml file.
gcloud app deploy backend.yaml
If you named the yaml file as app.yaml you can just run “gcloud app deploy” without specifying the name of the file.
This can take some time depending on the size of your files.
You can use the provided URL or GCP console to view the hosted service. To access the URL using GCP console, go to Services in the left navigation menu. All the services of the GAE application will be listed there. You will be redirected to the hosted URL once you click on the specific service.
Deploy React JS frontend as the frontend service.
You need to have 2 things to be able to successfully deploy React JS frontend.
- build folder
- yaml file
Create the build folder by running npm run build. Then create a yaml file for configuration purposes. We will name this yaml file as frontend.yaml.
Add the following code to frontend.yaml file.
Upload frontend service to GAE using below command.
gcloud app deploy frontend.yaml
In few minutes the source code will be uploaded and you can view the URL.
How to connect backend and frontend?
In the react application, point the base URL to the URL of backend of the GAE application (default service). You can use the methods mentioned earlier to find the URL.
Now you have a fully deployed web application. You can use frontend URL of the GAE application to access your web application.
NOTE: Additional notes to be considered when connecting backend and frontend.
You might want to enable CORS.
You might want to Access-Control-Allow-Origin response header.
You can find general information about your application by navigating to App Engine section on left navigation menu. Also you can find logs of your application from Logging section. This will be really helpful if you run into any errors or bugs.
