Workshop log: publishing Worldoscope to Google Cloud

Karadža Vladimir
2020-08-25

This Blog is a result of an internal workshop we organized at our company.

A quick heads-up before you begin: deploying an app to Google Cloud requires you to set up a billing profile in Google Cloud Platform (check the pricing here), though you can try it for free for a limited time. You also need a domain to host your app.

Now that we’ve got that out of the way, you have several options from Google Cloud when it comes to app deployment:

I will describe the way we did it via Virtual Machine.

Setting things up

Once you’ve set up the Google Cloud profile head over to https://console.cloud.google.com. From the navigation menu choose Compute Engine, VM Instances, and create your project.

Select create instance and new VM instance and set the following:

  • Machine configuration, Machine type as f1-micro
  • Boot disk as CentOS 7
  • Under Firewall check both HTTP and HTTPs and hit Create.

Now your virtual instance is set. Click on SSH to access it and see your username in the shell, or type whoami and it will print out your username.

Now what you need to do is upload your built app to the VM. We used Putty and WinSCP for this.

So open PuTTY Key Generator and generate a key (It uses mouse movements for randomness so you must move the mouse around a bit). Set the username(“key comment” in PuTTY), optionally a password, and save the private key.

Copy and paste the public key in the VM instance.

Then open WinSCP and enter your hostname and credentials, click on Advanced to add your private key and you’re connected.

Now to the slightly more fun part.

Building the app

This is done on a development machine and you’ll need Yarn and Node.js to build it. Download those if you don’t already have them. Go ahead and clone the app from https://github.com/codaxy/worldoscope.git.

To check if the app is running enter:

yarn install 
yarn start 

If node-sass is missing run:

yarn add node-sass

Then build the application:

git checkout feat/master/worldbank-proxy
yarn build

It’s necessary that you checkout to worldbank-proxy, otherwise the API calls won’t work, which is explained later in the text.

The dist folder should now be visible inside the root folder.

Deploying the app on the Google Cloud instance

Now switch to the VM’s SSH. Install Nginx and configure it to run at the machine’s system startup

sudo yum install nginx
sudo systemctl enable nginx

Drag the dist folder over to the home/vm-instance-name directory in WinSCP.

Create the application folder

sudo mkdir -p /var/www/worldoscope

Though it doesn’t have to be var/www/worldoscope, you can set a different path, e.g. user/share/{name} or something else.

Copy application builds to the newly made folder

sudo cp -R /home/{vm-instance-name}/dist/* /var/www/worldoscope/

And set proper folder ownership

sudo chown -R nginx.nginx /var/www/* 
sudo chcon -Rt httpd_sys_content_t /var/www/*

The basic Nginx configuration is placed inside /etc/nginx/nginx.conf file. To edit the file execute:

sudo vim /etc/nginx/nginx.conf

You can use whichever editor suits you.

The basic configuration is shown in the image below

The root directive specifies the root directory used to search for a file. To get the requested file’s path, NGINX appends the request URI to the path specified by the root directive. In the example above, the root directive is defined for a virtual server. The first step is to change the default root location to /var/www/worldoscope.

The try_files directive can be used to check if the specified file or directory exists. NGINX makes an internal redirect if it does, or returns a specified status code if it doesn’t.

The file is specified in the URI form, which is processed using the root or alias directives set in the context of the current location or virtual server. In this case, if the file corresponding to the original URI doesn’t exist, NGINX makes an internal redirect to the URI specified by the last parameter.

Copy this line to the config:

location /{try_files $uri $uri/ /index.html?/$request_uri;}

Reverse proxy

Proxying is typically used to distribute the load among several servers, seamlessly show content from different websites, or pass requests for processing to application servers over protocols other than HTTP.

To pass a request to an HTTPS proxied server, the proxy_pass directive is specified inside a location. For example, in the Worldoscope application all requests to the worldbank API go to /worlbank. Setting a proxy_pass /worldbank will be resolved to the https://api.worldbank.org/v2.

location /worldbank {proxy_pass https://api.worldbank.org/v2;}

The final configuration should look like this:

Create the certificates

And to do that you will use Certbot. Install it on the machine by running

sudo yum install certbot python2-certbot-nginx

Now you can run Certbot in two ways.

It can either create a certificate and we need to manually configure Nginx, by running

sudo certbot certonly --nginx

Or, it creates a certificate, automatically configures Nginx and turns on HTTPS in a single step.

sudo certbot --nginx

For Certbot to complete the setup you will need to define a few of its preset configuration settings, such as the domain name.

If you let Certbot configure Nginx automatically, then the nginx.conf will look like this:

If you run the first command, Certbot will only create a certificate and a key, but you will still need to edit nginx.conf on your own.

Inside the configuration, uncomment the section “Settings for TLS enabled server” and change the predefined locations for the SSL certificate and key.

And in order to set up automatic renewal, run

echo "0 0,12 * * * root python -c 'import random; import time; time.sleep(random.random() * 3600)' && certbot renew" | sudo tee -a /etc/crontab > /dev/null

The command adds a cron job to the default crontab. This crontab configuration file drives cron which is a time-based job scheduler in Unix-like systems.

After running the command your /etc/crontab file will look like this:

crontab file after adding cron job
This wraps it up. Your Worldoscope app is now live and ready to go!

Workshop log: publishing Worldoscope to Google Cloud was originally published in Codaxy on Medium, where people are continuing the conversation by highlighting and responding to this story.

Back to Blog