Hybrid Docker and static site
Last updated
Last updated
In this guide, we'll create a Release application that combines two Docker services with a JavaScript SPA (single-page application).
On GitHub, navigate to our awesome-release/react-express-mysql example repository.
Click Fork in the top-right corner to create your fork.
Log in to your Release account.
Click Create New App on the Getting Started page.
In the Name your application field, enter a name for your new application.
Under Pick your repository, select your forked repository.
Click Next Step.
Under Select branch, select your main branch.
Click the Select files dropdown.
Select the docker-compose.yaml file.
Select the frontend/package.json file.
Click Start Analysis.
Once the repository analysis completes, a list of services will appear.
Click on the service type selector for the frontend service.
Select Static from the list of service types.
Click Next Step.
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.
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:
Click on Next Step.
Skip over the Build Arguments page by clicking Next Step again.
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:
db-passwordOn your local machine, create a plain text file called db-password with a short random string to act as the MySQL root password.
Save the db-password file on your machine.
db-password file as a just-in-time file mount on ReleaseClick on Settings in the application menu, then scroll down to the Just-in-time File Mounts section.
Click on the Just-in-time File Mounts section heading to expand the settings.
In the mount path field, enter /run/secrets/.
Click the Select file button and select the db-password file from your computer.
Tick the backend and db service checkboxes.
Tick the Secret checkbox.
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.
Navigate to Environments.
Click the delete icon.
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:
Select the main branch.
In the Environment type select box, select Ephemeral.
Click the create environment button.
Release will build and deploy a new environment.
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".
