Containerizing our UI

Containerizing our UI

Spring Application Deployed with Kubernetes

Step by step building an application using Spring Boot and deployed via Docker on Kubernetes with Helm

full course
  1. Setup: IDE and New Project
  2. Create the Data Repository
  3. Building a Service Layer
  4. Create a REST Controller
  5. Logging, Tracing and Error Handling
  6. Documentation and Code Coverage
  7. Database as a Service
  8. Containerize the Service With Docker
  9. Docker Registry
  10. Automated Build Pipeline
  11. Helm for Deployment
  12. Setting up a Kubernetes Cluster
  13. Automating Deployment (for CICD)
  14. System Design
  15. Messaging and Event Driven Design
  16. Web UI with React
  17. Containerizing our UI
  18. UI Build Pipeline
  19. Put the UI in to Helm
  20. Creating an Ingress in Kubernetes
  21. Simplify Deployment
  22. Conclusion and Review

We’ve got a simple page that calls one of our endpoints working. Let’s go ahead an containerize it so that we can deploy it into our k8s environment in future steps.

Build the Dockerfile

I’m following the process laid out here, with some minor differences.

Create a Dockerfile

# Stage 1 - the build process
From node:10 as build-deps
# Create app directory
WORKDIR /usr/src/app
# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./
RUN npm install
ENV  REACT_APP_CUSTOMER_HOST=http://localhost:10000
# Bundle app source
COPY . .
RUN npm run-script build
# Stage 2 - the production environment
FROM nginx:1.12-alpine
COPY --from=build-deps /usr/src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

This dockerfile is broken up into two parts, in the first we’ve going to build the project using npm. You can see that we’re injecting the environment variable to point our frontend at our backend in IDE. This is not ideal, since we’ll now have to rebuild for each environment we want to deploy into. This will be replaced in the future.

Since the build requires a bunch of dependencies to compile that we don’t want to actually put in our deployment (its just going to waste space), we use a second step to create the deployment image. This uses a fresh nginx image to serve up our html and js on port 80 and then starts up nginx on container start.

Build with Docker

At this point, I was working entirely in ubuntu on windows and didn’t want to install docker into ubuntu. I switched over to windows to run this, but be careful about switching between environments because it can corrupt your files. I recommend using git as a way to transfer changes. Commit changes in ubuntu and then pull down in windows. We’ll be using a codefresh pipeline to build in the future, so this won’t be a problem.

docker build -t medium/medium-customer-manager .

run the docker image in docker

docker run -p 8080:80  medium/medium-customer-manager

and hit the url at localhost:8080. We should see our customer list page again.

What Happened

My understanding is that nginx is a web content server (similar to apache) and during the build we put our static content (html and compiled js) into the content of nginx. We also told nginx to start up on port 80 when the container starts. However, when we start the container we mapped the external container port 8080 to the internal container port 80 so that we could access nginx.

At this point we’ve got a dockerfile that will build and deploy our application. We just need to create a build pipeline around it and deploy it into kubernetes.

Lets kill the container

docker container ls

Find the container id and kill it

docker container kill <container id>

0 comments on “Containerizing our UIAdd yours →

Leave a Reply

Your email address will not be published. Required fields are marked *