DEV Community

Cover image for Host a Static Website on Amazon Elastic Kubernetes Service (EKS)
Ogooluwa Akinola
Ogooluwa Akinola

Posted on

Host a Static Website on Amazon Elastic Kubernetes Service (EKS)

#aws #kubernetes #eks #cloud

In this article, we will explore how to deploy and run a static website (your resume in this case) on Amazon EKS.

Technologies & Tools

Pre-requsite

[Optional] Github Account & Repo

Skip this if you don't intend to save your project on github. However, you can follow these links to setup a Github Account & Repo.

Setup AWS account and IAM User

Create you AWS Free Tier account if you haven't. Then, follow these steps to create your IAM user.

Setup AWS CLI

Skip this if you already have AWS CLI setup on your machine.

Follow this AWS CLI installation guide.

Setup Docker

We need docker to create our images and run containers (locally) we also need a docker account to save our images. Sign up to Docker and follow the Docker setup guide to get docker installed on your machine.

Setup Kubernetes CLI

Kubernetes provides a command line tool for communicating with a Kubernetes cluster's control plane, using the Kubernetes API. This tool is named kubectl. Follow this installation guide to get started.

Setup EKS CLI

Eksctl is a simple CLI tool for creating and managing clusters on EKS - Amazon's managed Kubernetes service for EC2. Follow this installation guide to get started.

⚠️ PLEASE NOTE: Amazon EKS cost 10 cents per hour, although relatively cheap I wanted to let you know before we get started. We will ensure to clean up once we are done with this tutorial in order not to incur any hidden cost.

Now let's get started! 😀

Step 1

Create a folder for your project EKS-Static-Resume-Website

mkdir EKS-Static-Resume-Website
Enter fullscreen mode Exit fullscreen mode

Step 2

Change directory to EKS-Static-Resume-Website and create necessary files and folders

cd EKS-Static-Resume-Website
Enter fullscreen mode Exit fullscreen mode 
touch index.html Dockerfile loadbalancerservice.yaml style.css
Enter fullscreen mode Exit fullscreen mode

Step 3

Convert your resume to html (you can you GPT AI tools --- ChatGPT, Gemini, etc for that. Or copy my resume from my github repo) and then copy it into the index.html file, also copy the generated css into the style.css file.

Step 4

Copy this Dockerfile 👇🏿 into the Dockerfile. This is how we create the docker image for our resume website.

FROM httpd
COPY index.html /usr/local/apache2/htdocs/index.html
COPY style.css /usr/local/apache2/htdocs/style.css
Enter fullscreen mode Exit fullscreen mode

Explanation

FROM httpd
Enter fullscreen mode Exit fullscreen mode

We are building our image 👆🏿 from the Apache HTTP server image

COPY index.html /usr/local/apache2/htdocs/index.html
COPY style.css /usr/local/apache2/htdocs/style.css
Enter fullscreen mode Exit fullscreen mode

We copy the index.html and style.css files into the /usr/local/apache2/htdocs folder respectively. The htdocs folder is our server root and where Apache will serve files from.

Step 5

We are going to build our docker image. In your project root, run

docker build --platform linux/amd64 -t {docker-account-username}/custom-httpd .
Enter fullscreen mode Exit fullscreen mode

replace {docker-account-username} with your real docker account username, for me it's rovilay. The -t flag tags the built image with the name rovilay/custom-httpd. we specify the --platform linux/amd64 to build images compatible with our ec2 instances.

Your image is still on your local machine. To confirm, run

docker images
Enter fullscreen mode Exit fullscreen mode

docker images

Step 5.1

you can run your docker image locally just to confirm everything is fine.

docker run -d -p 8080:80 {docker-account-username}/custom-httpd
Enter fullscreen mode Exit fullscreen mode

docker run

To check if the container is running, run

docker ps
Enter fullscreen mode Exit fullscreen mode

docker ps

Navigate to localhost:8080 on your browser to see your resume

Now run 👇🏿 to stop the container

docker stop {container ID}
Enter fullscreen mode Exit fullscreen mode

Step 5.2

We will push our image to docker hub. To do that run

docker push rovilay/custom-httpd:latest
Enter fullscreen mode Exit fullscreen mode

you can visit your docker account on docker hub to view the image.

Step 6

Now we are going to setup our Kubernetes configuration a.k.a manifest file. Copy this loadbalancerservice.yaml 👇🏿 in to the loadbalancerservice.yaml. Don't feel overwhelmed I will explain the code. 😅

apiVersion: v1
kind: Service
metadata:
  name: lb-service
  labels:
    app: lb-service
spec:
  type: LoadBalancer
  ports:
  - port: 80
  selector:
    app: frontend
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend-deployment
spec:
  replicas: 2
  selector:
    matchLabels:
      app: frontend
  minReadySeconds: 30
  strategy:
    type: RollingUpdate
    rollingUpdate:
      maxSurge: 1
      maxUnavailable: 0
  template:
    metadata:
      labels:
        app: frontend
    spec:
      containers:
      - name: frontend-container
        image: rovilay/custom-httpd
Enter fullscreen mode Exit fullscreen mode

Explanation

apiVersion: v1
kind: Service
metadata:
  name: lb-service
  labels:
    app: lb-service
spec:
  type: LoadBalancer
  ports:
  - port: 80
  selector:
    app: frontend
Enter fullscreen mode Exit fullscreen mode

The first part 👆🏿 creates the loadbalancer service which is a kubernetes service that exposes the container (resume image) -- name frontend running within our pod (more on this later). I won't bore you with the extra kubernetes details.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend-deployment
spec:
  replicas: 2
  selector:
    matchLabels:
      app: frontend
  minReadySeconds: 30
  strategy:
    type: RollingUpdate
    rollingUpdate:
      maxSurge: 1
      maxUnavailable: 0
  template:
    metadata:
      labels:
        app: frontend
    spec:
      containers:
      - name: frontend-container
        image: rovilay/custom-httpd
Enter fullscreen mode Exit fullscreen mode

The Deployment manages our pods and in extention our containers; basically each pod runs one container (note: a pod can run multiple containers but usually and in this case we run a container per pod). The deployment ensures that our cluster is running the right amount of pod replicas (replicas: 2).

    spec:
      containers:
      - name: frontend-container
        image: rovilay/custom-httpd
Enter fullscreen mode Exit fullscreen mode

This part 👆🏿 is where we referenced our docker image rovilay/custom-httpd that our container is running.

Step 7

Create your kubernetes cluster on eks. To do this run,

eksctl create cluster --node-type t2.micro --nodes 4  --region us-east-1
Enter fullscreen mode Exit fullscreen mode

I for one love the random names AWS comes up with 😅, however you can add the --name {your-cluster-name} flag if you want to name your cluster.

It takes a while for your cluster to be fully setup on EKS, so take some time, relax 🛀🏿 and sip a cup of coffee. ☕️

if your cluster runs successfully, you should see this 👇🏿 in your terminal.

eksctl create cluster

Navigate to your EKS dashboard on AWS to see your cluster.

eks dashboard

To view the EC2 instances provisioned in the cluster, run

kubectl get nodes
Enter fullscreen mode Exit fullscreen mode

kubectl get tnode

kubectl get nodes 2

Step 8

Deploy your container to the kubernetes cluster

kubectl apply -f loadbalancerservice.yaml
Enter fullscreen mode Exit fullscreen mode

To confirm deployment, run

kubectl get all
Enter fullscreen mode Exit fullscreen mode

kubectl get all

Step 9

Navigate to the load balancer url to view your host resume. Run,

kubectl get services
Enter fullscreen mode Exit fullscreen mode

the url is in the External-IP column.

Step 10

Clean up your cluster to avoid any unforseen cost. Run

kubectl delete deployment frontend-deployment

kubectl delete service lb-service
Enter fullscreen mode Exit fullscreen mode

Now delete the cluster on EKS, get the cluster name by running,

eksctl get cluster
Enter fullscreen mode Exit fullscreen mode

and run,

eksctl delete cluster {cluster-name}
Enter fullscreen mode Exit fullscreen mode

eksctl delete cluster

That's it guys!!! 🥳🎉🍾

We have successfully hosted a simple static web page on EKS.

Follow for more content like this.

Top comments (0)

Read next

solat-ali profile image

How to: Quickly deploy a static website on Surge, Vercel, Netlify and More!

Solat Ali -

cheedge_lee profile image

Sidecar container simplified examples

Cheedge Lee -

venkatesh111 profile image

[Boost]

Venkatesh K -

franciscojeg78 profile image

AWS Introduces Multi-Account Sign-In Feature!

Francisco Escobar -