Google map ISS part 4

Now I want to publish the project on the web. For deployment, I decided with google cloud services as this is the deployment systems I’ve used in previous projects.

I will follow the tutorial from their website

First I had to create a new project this was done via the google could website as it was clear how to name the project correctly as the SDK was giving me this:

ERROR: (gcloud.projects.create) argument PROJECT_ID: Bad value [ISS_Google_maps]: Project IDs must start with a lowercase letter and can have lowercase ASCII letters, digits or hyphens. Project IDs must be between 6 and 30 characters.

Usage: gcloud projects create [PROJECT_ID] [optional flags]
  optional flags may be  --enable-cloud-apis | --folder | --help | --labels |
                         --name | --organization | --set-as-default

After we need to run this statement ‘gcloud app create’. This statement activates the google app engine. This is the google cloud product we will use create our web app.Then we need to authenticate ourselves so we can allow local testing.

We do this using this statement:

gcloud auth application-default login

Afterwards we can now start structuring the files for the web-app. According to the website we need to structure a project like this:

building-an-app/

app.yaml
main.py
requirements.txt
static/
- script.js
- style.css
templates/
- index.html

As the JavaScript and CSS code is in the template file itself. I will be skipping making a static folder. I will simply copy the folder where I use for deployment.

The files in the folder:

As we can see we have a lot of useless files, a few leftover files form using google maps plotting packages before I used the custom template from google. For deployment, we don’t need git so that also needs to do.

I need to delete a few imports are not used anymore mainly gmplot package. Also code which is redundant as the package is not needed for the project.

As I've used lots of packages for these projects I will have export them needed packages into a requirements.txt file. As I'm using the Anaconda environment I will use this command below to produce the requirements.txt:

conda list -e > requirements.txt

The result we can see:

Now we have the requirements.txt file completed. We need to test if the deployment version works on the local server. The tutorial says I need to use PowerShell and the virtualenv packages to test the project. So I will not be using my Anaconda environment.

Later I found that you need to use pip freeze > requirements.txt for the requirements.txt file work correctly with pip install. Don’t skip this step.

Now running the app.py in the virtualenv. We get this:

Which means the local server test works.

The tutorial says the step is to set app.yaml file to deploy onto the google servers.

I copied the app.yaml example from the tutorial then modified the code for my project

runtime: python36

handlers:
  # This configures Google App Engine to serve the files in the app's static
  # directory.
# - url: /static
#   static_dir: static

  # This handler routes all requests not caught above to your main app. It is
  # required when static routes are defined, but can be omitted (along with
  # the entire handlers section) when there are no static files defined.
- url: /.*
script: auto

Changed the runtime to python 3.6 as this is the python version I’m using. Commented out the code allowing a static folder as this project does not have one.

Now we are ready to deploy the website to do so we must run this command on the cloud SDK:

gcloud app deploy

This was the cloud SDK returned when I pasted the command in. As we can see it is processing project for deployment.

After running this google clould gave me this error:

ERROR: (gcloud.app.deploy) INVALID_ARGUMENT: Invalid runtime 'python36' specified. Accepted runtimes are: [go, php, php55, python27, java, java7, java8, go111, go112, java11, nodejs8, nodejs10, php72, php73, python37, ruby25]

This means I have to the python runtime on python37. Now the command prompt didn’t throw and error

Now to view the web app we must run this command:

gcloud app browse

But loading on my browser web app threw me this error:

After a whole day of googling and debugging. I found the solution is to change the app.yaml file to a flex environment. And have custom entrypoint command. So the file looks like this:

runtime: python
env: flex
entrypoint: gunicorn -b :$PORT app:app


runtime_config:
  python_version: 3


handlers:
  # This configures Google App Engine to serve the files in the app's static
  # directory.
# - url: /static
#   static_dir: static

  # This handler routes all requests not caught above to your main app. It is
  # required when static routes are defined, but can be omitted (along with
  # the entire handlers section) when there are no static files defined.
- url: /.*
script: auto

Before running you need to add gunicorn to requiments.txt so program installs this package which will help the deploy the app to google servers.

I simply added this line at the end of my requiments.txt: