Flashcards | Hosting a website on Kubernetes

Beginners guide to Front-end hosting on Kubernetes

This might seem like a dauting task, but trust me it is isn’t. I’ll walk you through all the steps involved in getting your site hosted on kubernetes cluster. But before we get started; a brief about me: I am an ML Engineer who recently started working full-time on MLOps. Like a lot of people out there, I read up tonnes of blogs and learn by executing.

Flashcards is a series of easy to follow steps that anyone can refer for simple tasks that seem too complicated with the concepts involved. My goal with flashcards is make things easier, and build a reference for anyone trying to get started with something simple that is otherwise explained in a really complex manner.

Photo by Dean Pugh on Unsplash

So you’re a front-end developer and you’d like to host your site on Kubernetes, which seems like the next HOT thing out there. But how do you do that?
Just follow the steps below and you’ll be up and running.

Step 1. Build the website

I am using this demo template starter zip.

Project Tree

Step 2. Create DockerFile

Save the contents below by the name Dockerfile. Download From here

Dockerfile contents

Now your project directory should look something like this:

Project with Dockerfile

Step 3. Build Docker Image

Sign up on dockerhub and keep your credentials ready. We will need it in the next step.

Hoping that you have docker installed and running, run the following command. (replace your docker username)

Step 4. Push to a Container Registry

Login to docker cli using the first command. The second command pushes the image to a public Container Registry

Step 5. Use Kubernetes Cookiecutter to build deployment files

You will need python for this. Download and install it from here: https://www.python.org/

On running the cookiecutter, enter the values listed below
(make sure to use your own values in this case) and you could get away with leaving the others untouched.

  • release_name: my-release-name
  • docker_image: YourDockerUsername/static-site
  • container_port: 80 — NGINX containers run on port 80 by default.
  • expose_endpoint: example.com — Ensure you have an ingress controller running for this to work

Step 6. Connect to Kubernetes cluster

This part is a little tricky and might vary, but if you’ve already set up a cluster. You should be able to run the following command and see no errors!

Only after you see something like Kubernetes master is running at https:/xx will the next step work.

Step 7. Deploy!

Now all that is left for you to run is:

That should be it! Your deployment is successful!

Step 8. Add DNS Records

All that is left to do is adding a CNAME record from your domain provider pointing the Kubernetes Ingress Controller.

Hoping that you have an ingress controller deployed, running the command below should give you the following output.

Getting Public LB for redirection

Add your CNAME record for your domain as shown below.

Record Type: CNAME
Name: example.com
Value: a2smioi173y7912bs6a-195922406.us-east-1.elb.amazonaws.com
TTL: (Leave default)

example.coma2smioi173y7912bs6a-195922406.us-east-1.elb.amazonaws.com

This simply means when a user hits example.com, it will be redirected to your cluster and when the request does reach the cluster, your controller will point it to the static site that you just deployed!

Special thanks to Pradeep Tiwari for suggesting the idea of Flashcards :)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Arjun Sunil

Arjun Sunil

41 Followers

I talk about real world experiences in Tech and Scaling Deep Learning based workloads | Reach out via @arjun921 / connect@arjunsunil.com