I have been using Docker for building (compile/packaging) and running web applications for some time. Through this blog, I would like to share how I used docker for building and running a complete (Angular/SpringBoot) webapp in a local and production environments.
Docker for development environment
In large enterprise projects with distributed development teams, it becomes very difficult to manage and maintain a consistent development environment across developers. The option of VirtualBox/Vagrant/Chef/Puppet is too complex, bulky and resource intensive to be viable for this use-case.
Docker with its simplicity and light-weight containers is an excellent choice for developer environment. As Docker is lightweight, one can run multiple containers simultaneously for fine-grained components and tasks. Not to mention the benefit of having a production-like development environment.
Docker for building artifacts
In typical production usage, Docker is plugged into the CI/CD pipeline, where the artifacts are already generated and docker machines are spun to run them. In a development environment, Docker can itself act as a build machine with the right build configuration to generate the artifacts. Those artifacts can then be deployed to other docker containers to run them.
The process of building and running the application in a Docker container is a big time saver for daily local builds,
Frontend developers can use a Docker container to build and run backend services with the right version of code without having to install backend build and runtime tools locally on their machines.
Below you will find a sample Docker configuration for a complete stack (frontend/backend build and runtime) using existing published docker images. It took me some time to setup Angular CLI build container.
Project Structure
The sample project is Angular frontend running on Ngnix with SpringBoot(Tomcat) as backend services. Angular is built with Yarn/NPM/Angular CLI and backend with Gradle/Java8
As shown in the figure below, both backend and frontend have two docker files, one to build the component (Dockerfile_Build) and the second one to run it (Dockerfile). Docker-compose is used to tie the application together with the proper order of components and dependencies.
The local docker-compose will include the build steps to build the artifact and run them, whereas the production docker-compose will get QA certified artifacts from CI/CD process and would just run them in the containers.
sampleProject
backend
Dockerfile_build
Dockerfile
src
build
libs
frontend
Dockerfile_build
Dockerfile
src
nginx-config
dist
ops
local
docker-compose.yml
production
docker-compose.ymlThe Frontend Angular code (frontend/src) is built in frontend/dist folder using AngularCLI (ng build) by build container(../frontend/Dockerfile_build). The dist folder and Ngnix configurations are used by Ngnix container to run the Angular app.
Backend code (backend/src) is built using the Gradle container(../backend/Dockerfile_build) with output jar in backend/build/libs folder. The jar is then used by the Java container(../backend/Dockerfile) to run the SpringBoot app.
Backend Gradle Build Container
Java code is compiled and packaged using Gradle/Java8. I took the image file from Offical Docker image library: https://hub.docker.com/_/gradle/
FROM openjdk:8-jdk
CMD ["gradle"]
ENV GRADLE_HOME /opt/gradle
ENV GRADLE_VERSION 4.2.1
ARG GRADLE_DOWNLOAD_SHA256=b551cc04f2ca51c78dd14edb060621f0e5439bdfafa6fd167032a09ac708fbc0
RUN set -o errexit -o nounset \
&& echo "Downloading Gradle" \
&& wget --no-verbose --output-document=gradle.zip "https://services.gradle.org/distributions/gradle-${GRADLE_VERSION}-bin.zip" \
\
&& echo "Checking download hash" \
&& echo "${GRADLE_DOWNLOAD_SHA256} *gradle.zip" | sha256sum --check - \
\
&& echo "Installing Gradle" \
&& unzip gradle.zip \
&& rm gradle.zip \
&& mv "gradle-${GRADLE_VERSION}" "${GRADLE_HOME}/" \
&& ln --symbolic "${GRADLE_HOME}/bin/gradle" /usr/bin/gradle \
\
&& echo "Adding gradle user and group" \
&& groupadd --system --gid 1000 gradle \
&& useradd --system --gid gradle --uid 1000 --shell /bin/bash --create-home gradle \
&& mkdir /home/gradle/.gradle \
&& chown --recursive gradle:gradle /home/gradle \
\
&& echo "Symlinking root Gradle cache to gradle Gradle cache" \
&& ln -s /home/gradle/.gradle /root/.gradle
# Create Gradle volume
USER gradle
VOLUME "/home/gradle/.gradle"
WORKDIR /home/gradle
RUN set -o errexit -o nounset \
&& echo "Testing Gradle installation" \
&& gradle --versionBuild this image from backend folder using Dockerfile_build, run using
docker run –rm -v “$PWD”:/home/gradle/project -w /home/gradle/project im-build-backend gradle build
It generates the SpringBoot app as an executable jar in the building/libs folder.
Backend SpringBoot Container
This is a regular JDK container with SpringBoot app jar.
FROM frolvlad/alpine-oraclejdk8:slim VOLUME /tmp COPY build/libs/mySample.jar app.jar RUN sh -c 'touch app.jar' ENV JAVA_OPTS="" ENTRYPOINT [ "sh", "-c", "java $JAVA_OPTS -jar /app.jar" ]
docker run -d -p 8080:8080 im-backend
Frontend Yarn/AngularCLI Build Container
This container has Yarn, Node, Angular CLI and NPM to build Angular app.
FROM alexsuch/angular-cli:1.4.8
Build/run this container from frontend project folder which has package.json and src folders.
docker run -it --rm -w /app -v $(pwd):/app im-frontend-build ng build
FrondEnd Ngnix Container
Copy the Ngnix confs and dist folder to the Ngnix container to run the Angular app
FROM nginx COPY nginx-config/nginx.conf /etc/nginx COPY dist /var/www/im
docker run -it -p 80:80 im-frontend
DockerCompose local
Pull it all together in docker compose.
Run docker-compose up -d to build and run the frontend and backend services.
Output:
local romiawasthy$ docker-compose up -d Creating network "local_default" with the default driver Creating local_build_BackEnd_1 ... Creating local_build_BackEnd_1 ... done Creating local_backend_1 ... Creating local_backend_1 ... done Creating local_build_FrontEnd_1 ... Creating local_build_FrontEnd_1 ... done Creating local_frontend_1 ... Creating local_frontend_1 ... done
DockerCompose production
In the production configuration, build images are excluded.
Run docker-compose up -d to run the frontend and backend services.
Output:
production romiawasthy$ docker-compose up -d Starting production_backend_1 ... Starting production_backend_1 ... done Creating production_frontend_1 ... Creating production_frontend_1 ... done
Conclusion
Docker can be a great option for consistent and shareable development environment across large teams.The pattern allows for using the same docker containers for running the services in both local and production. The pattern can be extended for different build and deployment tools.
| Published on Web Code Geeks with permission by Romi Awasthy, partner at our WCG program. See the original article here: Fullstack development environment with Docker Opinions expressed by Web Code Geeks contributors are their own. |
