Creating and running the frontend Image

🚀 TASK: Create the frontend Image

1. Let’s create our frontend image (the k8sdemo frontend image) from this Dockerfile:

   FROM node:8-stretch
   
   # Change working directory
   WORKDIR "/app"
   
   # Update packages and install dependency packages for services
   RUN apt-get update \
       && apt-get dist-upgrade -y \
       && apt-get clean \
   Copy to clipboardCopied!

2. Run the following command:

   cd ./demo-app/k8sdemo
   podman build -t k8sdemo:lab .
   cd -
   Copy to clipboardCopied!

   > Sending build context to Docker daemon  13.23MB
   > Step 1/11 : FROM node:8-stretch
   >  ---> 7a9afc16a57f
   > Step 2/11 : WORKDIR "/app"
   >  ---> Using cache
   >  ---> a2515f8a3ec5
   ...
   > Step 11/11 : CMD ["npm", "start"]
   >  ---> Using cache
   Copy to clipboardCopied!

🚀 TASK: Run the frontend Image

1. First let’s create a shared network, so that the Pods can communicate between them

   podman network create shared
   Copy to clipboardCopied!

   > shared
   Copy to clipboardCopied!

2. Now let’s run the backend container again, but this time in the background

   podman run --rm -d --name k8sdemo-backend -p 3001:3000 --network shared k8sdemo-backend:lab
   Copy to clipboardCopied!

   > 444b0570058b97f0532ef89c92963bb7da6aa1f2d3e27bf8c989da5fb8277fe0
   Copy to clipboardCopied!

   This command runs the backend server:

   • -d runs the container in the background (as a daemon)
   • --network adds the container to the shared newtork

3. Then we start the new Web Frontend container

   podman run --rm --name k8sdemo -p 3000:3000 --env BACKEND_URL=http://k8sdemo-backend:3000/api --network shared k8sdemo:lab
   Copy to clipboardCopied!

   > test@0.0.0 start /app
   > node ./bin/www
   Copy to clipboardCopied!

   This command runs the frontend server:

   • –rm makes sure that the container is deleted once it’s stopped
   • –name gives the container a fixed name
   • –env defines the environment variable that points to the k8sdemo-backend server API (note that we use the internal port 3000 and not 3001 in this case)
   • -p exposes the container port 3000 to the outside port 3000
   • --network adds the container to the shared newtork
   • k8sdemo:lab is the image we created before

4. Open the Frontend Web Interface

   Click here or run the following:

   open http://localhost:3000/
   Copy to clipboardCopied!

5. Refresh several times and check in the terminal that some traffic is being generated

   
   > GET / 304 6.314 ms - -
   > GET /public/bootstrap.min.css 304 0.975 ms - -
   > GET /public/bootstrap-theme.min.css 304 0.843 ms - -
   > GET /public/stylesheets/style.css 304 2.568 ms - -
   > GET /public/images/ibm_cloud.png 304 0.522 ms - -
   > GET /public/images/cloud_private.png 304 1.057 ms - -
   > GET /public/images/back.png 304 0.411 ms - -
   > The value of BACKEND_URL is: http://k8sdemo-backend
   Copy to clipboardCopied!

6. Stop the container by hitting CTRL-C in the terminal

podman stop k8sdemo
Copy to clipboardCopied!