In the rapidly evolving landscape of web development, the days of developing applications in a monolithic fashion have become increasingly rare. Whether this shift is advantageous or detrimental remains a subject of debate. However, it undeniably adds a layer of complexity to the deployment process.
A common practice now involves maintaining separate Docker images for both the frontend and backend components of an application. These images can be deployed individually within Docker containers, or you have the option to utilize Docker Compose, allowing for the deployment of all components simultaneously.
While Docker Compose serves as a valuable tool for deploying entire applications in one go, this article aims to present an alternative approach: the creation of a singular Docker image that eliminates the necessity of Docker Compose.
In this demonstration, you will see the process of crafting a composite Docker image, combining an UI application build (can be Angular, React, Vue or any other app) and a java (Spring, Spring Boot, or any other app) web application. The journey begins with the creation of Docker images for each component separately, and subsequently, we’ll merge these two images into a cohesive composite image. We will not cover creating a frontend and backend docker images. This article assumes that we already have frontend-app:1.0.0-RELEASE and backend-app:1.0.0-RELEASE docker images available.
Create Composite Dockerfile
# Use the nginx image as the base
FROM nginx:alpine
# Copy the custom nginx.conf file to the container if required
COPY nginx.conf /etc/nginx/nginx.conf
# Copy the built frontend and backend images to the nginx directory
COPY --from=frontend-app:1.0.0-RELEASE /path/to/frontend/app/build usr/share/nginx/html /usr/share/nginx/html/
COPY --from=backend-app:1.0.0-RELEASE /path/to/backend.jar /app/backend.jar
# Expose port for nginx to be used by frontend app
EXPOSE 80
# Install OpenJDK and other necessary packages
# Following command add openjdk11, you can use the version your backend-app uses
RUN apk update && apk add openjdk11
# Set up environment variables - JAVA_HOME and PATH
ENV JAVA_HOME=/usr/lib/jvm/java-11-openjdk
ENV PATH="$JAVA_HOME/bin:${PATH}"
# Start Nginx and Spring Boot app
CMD nginx && java -jar /app/backend.jar
Build the composite Docker image
docker build -t composite-app:1.0.0-RELEASE .Run the Docker container
Run the following command to deploy the composite docker image. (Assuming the backend app runs at port 8080 inside the container.)
docker run -p 3000:80 -p 8088:8080 composite-app:1.0.0-RELEASEYour frontend app will be accessible on port 3000 and backend on port 8088.