{"id":820,"date":"2020-03-30T17:00:00","date_gmt":"2020-03-30T17:00:00","guid":{"rendered":"http:\/\/bullyrooks.com\/index.php\/2020\/04\/10\/simple-spring-boot-service-to-kubernetes-application-step-17-3867eb38d8f1\/"},"modified":"2021-02-04T02:11:26","modified_gmt":"2021-02-04T02:11:26","slug":"simple-spring-boot-service-to-kubernetes-application-step-17-3867eb38d8f1","status":"publish","type":"post","link":"https:\/\/bullyrooks.com\/index.php\/2020\/03\/30\/simple-spring-boot-service-to-kubernetes-application-step-17-3867eb38d8f1\/","title":{"rendered":"Containerizing our UI"},"content":{"rendered":"\n

We\u2019ve got a simple page that calls one of our endpoints working. Let\u2019s go ahead an containerize it so that we can deploy it into our k8s environment in future steps.<\/p>\n\n\n\n

Build the Dockerfile<\/h3>\n\n\n\n

I\u2019m following the process laid out here<\/a>, with some minor differences.<\/p>\n\n\n\n

Create a Dockerfile<\/h4>\n\n\n\n
# Stage 1 - the build process\nFrom node:10 as build-deps\n# Create app directory\nWORKDIR \/usr\/src\/app\n# Install app dependencies\n# A wildcard is used to ensure both package.json AND package-lock.json are copied\n# where available (npm@5+)\nCOPY package*.json .\/\nRUN npm install\nENV  REACT_APP_CUSTOMER_HOST=http:\/\/localhost:10000\n# Bundle app source\nCOPY . .\nRUN npm run-script build<\/code><\/pre>\n\n\n\n
# Stage 2 - the production environment\nFROM nginx:1.12-alpine\nCOPY --from=build-deps \/usr\/src\/app\/build \/usr\/share\/nginx\/html\nEXPOSE 80\nCMD [\"nginx\", \"-g\", \"daemon off;\"]<\/code><\/pre>\n\n\n\n
This dockerfile is broken up into two parts, in the first we\u2019ve going to build the project using npm. You can see that we\u2019re injecting the environment variable to point our frontend at our backend in IDE. This is not ideal, since we\u2019ll now have to rebuild for each environment we want to deploy into. This will be replaced in the future.<\/p>\n\n\n\n
Since the build requires a bunch of dependencies to compile that we don\u2019t 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.<\/p>\n\n\n\n
Build with Docker<\/h4>\n\n\n\n
At this point, I was working entirely in ubuntu on windows and didn\u2019t 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\u2019ll be using a codefresh pipeline to build in the future, so this won\u2019t be a problem.<\/p><\/blockquote>\n\n\n\n
docker build -t medium\/medium-customer-manager .<\/code><\/pre>\n\n\n\n
run the docker image in docker<\/p>\n\n\n\n
docker run -p 8080:80  medium\/medium-customer-manager<\/code><\/pre>\n\n\n\n
and hit the url at localhost:8080<\/code>. We should see our customer list page again.<\/p>\n\n\n\n
What Happened<\/h4>\n\n\n\n
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.<\/p>\n\n\n\n
At this point we\u2019ve 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.<\/p>\n\n\n\n
Lets kill the container<\/p>\n\n\n\n
docker container ls<\/code><\/pre>\n\n\n\n
Find the container id and kill it<\/p>\n\n\n\n
docker container kill <container id><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\nWe\u2019ve got a simple page that calls one of our endpoints working.…\n<\/div>\n
Continue reading “Containerizing our UI”<\/span>…<\/a><\/div>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[41],"tags":[5,74],"course":[40],"class_list":["post-820","post","type-post","status-publish","format-standard","hentry","category-software-development","tag-docker","tag-dockerfile","course-spring-with-kubernetes","entry"],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":833,"url":"https:\/\/bullyrooks.com\/index.php\/2020\/03\/30\/simple-spring-boot-service-to-kubernetes-application-step-18-9dff659cd334\/","url_meta":{"origin":820,"position":0},"title":"UI Build Pipeline","author":"Bullyrook","date":"March 30, 2020","format":false,"excerpt":"Simple Spring Boot Service to Kubernetes Application: Step\u00a018 Lets quickly update our build pipeline to push an image for our front end application into our repo. This opens the path to using helm to package and deploy our chart. Create a New\u00a0Pipeline Log into codefresh and go into pipelines. Choose\u2026","rel":"","context":"In "Software Development"","block_context":{"text":"Software Development","link":"https:\/\/bullyrooks.com\/index.php\/category\/software-development\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":837,"url":"https:\/\/bullyrooks.com\/index.php\/2020\/03\/30\/simple-spring-boot-service-to-kubernetes-application-step-8-3e94686c9a34\/","url_meta":{"origin":820,"position":1},"title":"Containerize the Service With Docker","author":"Bullyrook","date":"March 30, 2020","format":false,"excerpt":"Now we\u2019re going to take our functional service and containerize it. This will allow us to control the deployment environment that our java spring boot service runs in as well as provide some additional security and isolation from application updates that can break our application. Containerization Overview If you\u2019ve spent\u2026","rel":"","context":"In "Software Development"","block_context":{"text":"Software Development","link":"https:\/\/bullyrooks.com\/index.php\/category\/software-development\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":824,"url":"https:\/\/bullyrooks.com\/index.php\/2020\/03\/30\/simple-spring-boot-service-to-kubernetes-application-step-10-e1a3a8e865bb\/","url_meta":{"origin":820,"position":2},"title":"Automated Build Pipeline","author":"Bullyrook","date":"March 30, 2020","format":false,"excerpt":"Lets set up automated build so that we can generate a docker image when a change hits master. Build the\u00a0Pipeline Go in to codefresh and choose Projects. Create a new project in the top right. Call it medium. Click on create pipeline. Call the pipeline medium-customer and choose our git\u2026","rel":"","context":"In "Software Development"","block_context":{"text":"Software Development","link":"https:\/\/bullyrooks.com\/index.php\/category\/software-development\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1169,"url":"https:\/\/bullyrooks.com\/index.php\/2022\/01\/04\/cloud-kube-docker-build-and-registry\/","url_meta":{"origin":820,"position":3},"title":"Cloud Kube | Docker Build and Registry","author":"Bullyrook","date":"January 4, 2022","format":false,"excerpt":"Now that we've got a pipeline, we're going to start working on deploying our service into the cloud. The first step is to create a docker image and store it somewhere that our pipeline as well as our cloud provider can access. Create a Docker Image Registry Canister.io provides a\u2026","rel":"","context":"In "Software Development"","block_context":{"text":"Software Development","link":"https:\/\/bullyrooks.com\/index.php\/category\/software-development\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/bullyrooks.com\/wp-content\/uploads\/2022\/01\/image-19.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1296,"url":"https:\/\/bullyrooks.com\/index.php\/2022\/02\/19\/kube-cloud-pt4-tracing\/","url_meta":{"origin":820,"position":4},"title":"Kube Cloud Pt4 | Tracing","author":"Bullyrook","date":"February 19, 2022","format":false,"excerpt":"For this portion we're going to use OpenTelemetry for tracing. OpenTelemetry projects intent is to solve all of the observability space in an opensource way. Unfortunately, at this time the logging and metrics portions are still in development, so we won't be able to use them. However the tracing piece\u2026","rel":"","context":"In "General"","block_context":{"text":"General","link":"https:\/\/bullyrooks.com\/index.php\/category\/general\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/bullyrooks.com\/wp-content\/uploads\/2022\/02\/image-35.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/bullyrooks.com\/wp-content\/uploads\/2022\/02\/image-35.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/bullyrooks.com\/wp-content\/uploads\/2022\/02\/image-35.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/bullyrooks.com\/wp-content\/uploads\/2022\/02\/image-35.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/bullyrooks.com\/wp-content\/uploads\/2022\/02\/image-35.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":1220,"url":"https:\/\/bullyrooks.com\/index.php\/2022\/01\/23\/cloud-kube-pt2-setting-up-a-datastore\/","url_meta":{"origin":820,"position":5},"title":"Cloud Kube Pt2 | Setting Up a Datastore","author":"Bullyrook","date":"January 23, 2022","format":false,"excerpt":"The first part of these courses was all about setting up an build and deploy pipeline so that we could automate building a helm chart and deploying to our cloud hosted environment at Okteto. In this course we're going to start adding more functionality so that we can demonstrate best\u2026","rel":"","context":"In "Software Development"","block_context":{"text":"Software Development","link":"https:\/\/bullyrooks.com\/index.php\/category\/software-development\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/bullyrooks.com\/wp-content\/uploads\/2022\/01\/image-38.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/bullyrooks.com\/wp-content\/uploads\/2022\/01\/image-38.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/bullyrooks.com\/wp-content\/uploads\/2022\/01\/image-38.png?resize=700%2C400&ssl=1 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/bullyrooks.com\/index.php\/wp-json\/wp\/v2\/posts\/820","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bullyrooks.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bullyrooks.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bullyrooks.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bullyrooks.com\/index.php\/wp-json\/wp\/v2\/comments?post=820"}],"version-history":[{"count":3,"href":"https:\/\/bullyrooks.com\/index.php\/wp-json\/wp\/v2\/posts\/820\/revisions"}],"predecessor-version":[{"id":909,"href":"https:\/\/bullyrooks.com\/index.php\/wp-json\/wp\/v2\/posts\/820\/revisions\/909"}],"wp:attachment":[{"href":"https:\/\/bullyrooks.com\/index.php\/wp-json\/wp\/v2\/media?parent=820"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bullyrooks.com\/index.php\/wp-json\/wp\/v2\/categories?post=820"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bullyrooks.com\/index.php\/wp-json\/wp\/v2\/tags?post=820"},{"taxonomy":"course","embeddable":true,"href":"https:\/\/bullyrooks.com\/index.php\/wp-json\/wp\/v2\/course?post=820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}