How to deploy a Frontend UI with Nginx?

Owned by Michel El Hajj (Unlicensed)
Last updated: Dec 06, 2017

Objective

You are about to deploy a new environment that contains an nginx, the Nginx should create an entry for your UI Frontend. 

You deployed an environment and no your UI Frontend code is ready, you want to patch it and create a new virtual host for it.


Steps

  1. Deploy Nginx + UI Frontend
  2. Update Nginx and patch UI Frontend



Step1

You can deploy both the nginx with your frontend UI widget using catalog recipes.

In Deploy a new environment, we explained what the catalog entry should contain to deploy a new nginx in a new environment. 

The same thing happens here, simply put the values of the env variables that point to the location of the UI widget so that the deployer can pull them and install them.

You can also create custom UI virtual hosts in nginx using an advanced custom configuration repository.

Refer to Deploy a new environment for more information as the details are elaborated in depth there.



Step 2

This step assumes you already deployed an environment and the nginx at the time was only configured to upstream calls from port 80 to the controller of that environment.

Then at a later stage, the UI widget code became ready and now you want to patch that UI to the nginx deployed.

  1. Go to Develop → Catalog Recipes
    1. Update the Nginx recipe 
      1. add the env variables that point to the location of the UI widget so that the deployer can pull them and install them
      2. Reference Page: Deploy a new environment
  2. Go to Deploy → Clouds & Deployments
  3. Click the Nginx Tab
    1. Lookup the nginx entry
      1. Open the Service Operations menu
      2. Click Redeploy Service

Redeploy Service

This operation will load the catalog recipe again, if the catalog recipe has changed then the service will be affected, then it redeploys the service with the new recipe changes.

The SOAJS deployer inside the SOAJS image will read the new changes and act accordingly. 

While the deployer is running, your old service remains operational until the new service is flagged as running by either Docker Swarm or Kubernetes depending on which of the two drivers you have chosen.

When the new service becomes ready, then the old one will be terminated; your Nginx will be updated and now it will contain the custom UI widget you have added.