Comment on page
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).
- 1.
- 2.Click Fork in the top-right corner to create your fork.

A screenshot of GitHub with the fork button highlighted
- 1.Log in to your Release account.
- 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
- 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.

A screenshot of the first page of the Release new application workflow
- 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.

A screenshot of the repository analysis step in the Release new application workflow
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.

A screenshot of the Release new application workflow, showing how to select a static service type
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.
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.
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
- 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.
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.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.
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.

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.Select the
main
branch. - 2.In the Environment type select box, select Ephemeral.
- 3.Click the create environment button.

A screenshot of the new environment settings popup on Release
Release will build and deploy a new environment.
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
Last modified 8mo ago