Containerizing our UI

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>