Hybrid Docker and static site

In this guide, we'll create a Release application that combines two Docker services with a JavaScript SPA (single-page application).

Fork the repository on GitHub

  1. On GitHub, navigate to our awesome-release/react-express-mysql example repository.

  2. Click Fork in the top-right corner to create your fork.

Create and configure a new application in Release

  1. Log in to your Release account.

  2. Click Create New App on the Getting Started page.

Create your application

  1. In the Name your application field, enter a name for your new application.

  2. Under Pick your repository, select your forked repository.

  3. Click Next Step.

Analyze your repository

  1. Under Select branch, select your main branch.

  2. Click the Select files dropdown.

  3. Select the docker-compose.yaml file.

  4. Select the frontend/package.json file.

  5. Click Start Analysis.

Update frontend service type

Once the repository analysis completes, a list of services will appear.

  1. Click on the service type selector for the frontend service.

  2. Select Static from the list of service types.

  3. Click Next Step.

Add a port to the db service in the application template

Release creates an application template based on the services you selected by reading the docker-compose.yaml and package.json files.

The docker-compose.yaml file did not specify a port for the db service, so we'll need to add one to the Application Template.

Edit the Application Template and add the following to the db service.

  ports:
  - type: container_port
    port: 3306

This setting opens a port on the db service to the private network for your environment so that the backend service can reach the MySQL database running on db.

Click on Next Step.

Update the default environment variables

Release generates a default environment variables file for environments in your application.

The single-page application's frontend build process references an environment variable REACT_APP_BACKEND_URL. This is to let the frontend SPA know where to make backend API calls.

Using the mapping section in the default environment variables file, we can map existing environment variables to new names.

One of the default environment variables that Release creates for all environments is an ingress URL for each service with node ports.

In this application, we want to map the backend ingress URL to a new name: REACT_APP_BACKEND_URL.

Do this by updating the mapping stanza as follows:

mapping:
  REACT_APP_BACKEND_URL: BACKEND_INGRESS_URL

Click on Next Step.

Skip over the Build Arguments page by clicking Next Step again.

Deploy your application

Click on the Deploy your app button.

Release will redirect to a deployment progress screen, where it will build and deploy your application.

You may notice that the db service fails to deploy.

If you inspect the db service's logs, you'll find a line indicating that the database can't find a password file:

/usr/local/bin/docker-entrypoint.sh: line 36: /run/secrets/db-password: No such file or directory

Add a database password file called db-password

  1. On your local machine, create a plain text file called db-password with a short random string to act as the MySQL root password.

  2. Save the db-password file on your machine.

Add the db-password file as a just-in-time file mount on Release

Click on Settings in the application menu, then scroll down to the Just-in-time File Mounts section.

  1. Click on the Just-in-time File Mounts section heading to expand the settings.

  2. In the mount path field, enter /run/secrets/.

  3. Click the Select file button and select the db-password file from your computer.

  4. Tick the backend and db service checkboxes.

  5. Tick the Secret checkbox.

  6. Click the Upload button.

Create a new environment

A file mount can only be added to newly created environments, so we'll need to delete the existing environment that Release created and create a new one.

  1. Navigate to Environments.

  2. Click the delete icon.

  3. In the popup, click on the Yes, delete environment button.

Next, we'll create a new environment. Click on Environments and then click Create new environment.

In the popup:

  1. Select the main branch.

  2. In the Environment type select box, select Ephemeral.

  3. Click the create environment button.

Release will build and deploy a new environment.

View your app

When the deployment completes, click on the go to environment button in the popup.

On the environment details page, click on the frontend URL.

You should now see the single page app with a response from the backend that reads "Hello from MySQL 8.0.19".

Last updated