HomePricing
Search
⌃K
Links

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. 1.
    On GitHub, navigate to our awesome-release/react-express-mysql example repository.
  2. 2.
    Click Fork in the top-right corner to create your fork.
A screenshot of GitHub with the fork button highlighted

Create and configure a new application in Release

  1. 1.
    Log in to your Release account.
  2. 2.
    Click Create New App on the Getting Started page.
A screenshot of the Release Getting Started page, with the create new app button highlighted

Create your application

  1. 1.
    In the Name your application field, enter a name for your new application.
  2. 2.
    Under Pick your repository, select your forked repository.
  3. 3.
    Click Next Step.
A screenshot of the first page of the Release new application workflow

Analyze your repository

  1. 1.
    Under Select branch, select your main branch.
  2. 2.
    Click the Select files dropdown.
  3. 3.
    Select the docker-compose.yaml file.
  4. 4.
    Select the frontend/package.json file.
  5. 5.
    Click Start Analysis.
A screenshot of the repository analysis step in the Release new application workflow

Update frontend service type

Once the repository analysis completes, a list of services will appear.
  1. 1.
    Click on the service type selector for the frontend service.
  2. 2.
    Select Static from the list of service types.
  3. 3.
    Click Next Step.
A screenshot of the Release new application workflow, showing how to select a static service type

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
A screenshot of the Release application template editor
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
A screenshot of the Release environment variables editor
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.
A screenshot of the Release deploy 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. 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. 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.
A screenshot of Release's JIT file mount settings
  1. 1.
    Click on the Just-in-time File Mounts section heading to expand the settings.
  2. 2.
    In the mount path field, enter /run/secrets/.
  3. 3.
    Click the Select file button and select the db-password file from your computer.
  4. 4.
    Tick the backend and db service checkboxes.
  5. 5.
    Tick the Secret checkbox.
  6. 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. 1.
    Navigate to Environments.
  2. 2.
    Click the delete icon.
  3. 3.
    In the popup, click on the Yes, delete environment button.
A screenshot showing how to delete an environment on Release
Next, we'll create a new environment. Click on Environments and then click Create new environment.
In the popup:
  1. 1.
    Select the main branch.
  2. 2.
    In the Environment type select box, select Ephemeral.
  3. 3.
    Click the create environment button.
A screenshot of the new environment settings popup on Release
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.
A screenshot of the popup that shows a new deployment was successful
On the environment details page, click on the frontend URL.
A screenshot of the environment details page, with the frontend URL highlighted
You should now see the single page app with a response from the backend that reads "Hello from MySQL 8.0.19".
A screenshot of the resulting application
Previous
Open Source OAuth proxy
Next
App Imports: Connecting two applications
Last modified 9d ago