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.
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.
Step 2. Create DockerFile
Save the contents below by the name Dockerfile. Download From here
Now your project directory should look something like this:
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.
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.com → a2smioi173y7912bs6a-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 :)
