Learn How To Containerize Your Website and Deploy It With Kubernetes In Less Than 5-Minutes

10 min readFeb 19, 2023

GOALS:

How to pack your website into a Docker image
How to push your Docker image to Docker Hub
How to create a Kubernetes cluster on GCP
How to create a deployment & service script in Kubernetes

Heyy!! Welcome Back!

In this blog, you are going to learn “How to Containerize Your Website and Deploy It With Kubernetes Like A 5-Year-old”

this blog will teach you the fundamentals of how to “containerize your website using a docker image & how to deploy it with Kubernetes” by yourself

but if you want a well-detailed video explanation of a zoom mastermind class.

then you should CLICK HERE to reach me. see you soon!

prerequisite:

Must have Docker installed
A website code you want to host pushed to GitHub
Must have an Ubuntu 20.04 virtual machine running on any cloud provider.
Must have a docker hub account
Must have a GCP account

install docker HERE

create a virtual machine HERE

you can create your docker hub account HERE with just your email, username, and password.

you can go over to youtube to watch this video on how to create a GCP account HERE.

and get a $300 bonus when you create an account.

you can come back here when you are done.

if you have all this then let’s go!!

1. CLONING YOUR PROJECT GITHUB REPO

it’s time for us to begin but first, we need to clone our GitHub repo that holds our website.

now we need to clone our codes from GitHub into our machine.

do that with the command below and name the directory anything:

$ cd ~

$ git clone https://github.com/nwokoloemmanuel6/web-app.git web-app

don’t bother cloning mine. it’s private. you need to put in your own GitHub URL where your website codes are.

now after cloning this we need to enter into the directory we created.

$ cd web-app

we are in!

2. CREATING THE DOCKERFILE

we need to package our website in an image.

and to do that we need to install docker. which I already have on my machine.

but you can do that by going through the second section of this blog HERE

now that you have done that you will need to create a file called Dockerfile. use the command below:

$ nano ~/web-app/Dockerfile

when the file opens you put the code below in:

FROM nginx:alpine

COPY . /usr/share/nginx/html

WORKDIR /usr/share/nginx/html

so basically we are creating this image based on nginx.

then the COPY module helps us copy all the files that we cloned from our GitHub account to the path /usr/share/nginx/html.

which is the default path where nginx hosts its webpage.

and lastly, we are changing the working directory to that path.

now you can save this file with CTRL O and exit with CTRL X

3. CREATING THE IMAGE

we have created our Docker file and we have docker installed.

now we can create our image.

to do that you can use the command below:

$ docker build -t nwokolo/web-app:1.0 .

the tag can be anything. but to make it easier for you to push to your docker repository. the beginning of the tag should be your docker hub username.

the name of the application can come next.

the dot (.) at the end tells docker that it should build a file from our current directory.

after you are done you should see a result like the one above.

now to check that your image was created run this command:

$ docker image ls

output

REPOSITORY        TAG       IMAGE ID       CREATED         SIZE
nwokolo/web-app   1.0       1c62512f3a87   7 minutes ago   42.7MB

you should see a result like the above output.

PUSHING OUR IMAGE TO DOCKER HUB

now before we push this image we need to make sure that when we run the image it works perfectly well.

we will be using the image to build a container. you can do that using the command below:

$ docker run -d -p 80:80 nwokolo/web-app:1.0

in the command above we run the image in a detached mode. also, we are opening port 80 on the container and port 80 on our virtual machine.

we can now check our running container with the command below:

$ docker ps

outputs

CONTAINER ID   IMAGE                 COMMAND                  CREATED          STATUS          PORTS                               NAMES
ffb268bb3980   nwokolo/web-app:1.0   "/docker-entrypoint.…"   39 seconds ago   Up 38 seconds   0.0.0.0:80->80/tcp, :::80->80/tcp   eloquent_allen

you should have an output like the one above to show that our container is running on port 80.

now we can check our browser to be sure that our image is working.

to do that. take the public IP address of your virtual machine and paste it into your browser.

you can get it from your terminal with this command:

hostname -I | awk '{print $1}'

and boom!! it works!!

now we need to push our image to the docker hub. and to do that we need to first log in to our docker account from our terminal.

to do that we need to type this command:

$ docker login

and when you do this you will see a prompt that asks you for your username and for your password. just like the one below:

NOTE: as you type the password it’s not going to show on the screen.

and as you can see I am logged in successfully.

now we can push our image with the command below:

$ docker push nwokolo/web-app:1.0

notice that my username comes first. this is a must because if you try pushing it to docker hub without your user name first.

there will be an error saying you do not have access to the library. which is the official docker library.

but with your user name at the front. docker knows that you want to push this particular image to a repository owned by nwokolo.

when you are done pushing you should see an output like this:

The push refers to repository [docker.io/nwokolo/web-app]
5f70bf18a086: Pushed 
fde565bb57fb: Pushed 
042cd3f87f43: Layer already exists 
f1bee861c2ba: Layer already exists 
c4d67a5827ca: Layer already exists 
152a948bab3b: Layer already exists 
5e59460a18a3: Layer already exists 
d8a5a02a8c2d: Layer already exists 
7cd52847ad77: Layer already exists 
1.0: digest: sha256:bb39e39ecc443be84fb9e6518f36873bac01b313680ffa4f847313377b9dec32 size: 2198

and as you can see in my docker hub account. the image is already present.

4. CREATING KUBERNETES CLUSTER

now that we have created our image and pushed it to docker hub.

we now need to create a Kubernetes cluster where we can now deploy it.

to do that you need to open your GCP account. go to the console page. it should look like this:

on the left-hand side, there is a menu bar like in the image above. scroll down and click on Kubernetes engine.

a new mini bar should come out then at the top just click on cluster.

now when the page opens you click on create cluster and this page should pop up.

click on standard.

you should see the page above. change the default name there to whatever you want.

you can change the zone where the cluster will be created also.

and when you are done do not change any other thing you are not sure about.

then you can click on create.

you should see something like this to show that it is being created. give it a few moments. it takes a while

now that it’s done. we can click on connect to our cluster from cloud shell.

when this page opens. click on run in cloud shell.

when you do that you will see a terminal pop up like this.

and there would be a command in the terminal that you are supposed to execute by pressing ENTER.

this command connects you to the cluster.

you should see a result like the one below

outputs

Fetching cluster endpoint and auth data.
kubeconfig entry generated for web-app.

to be sure you are in type in this command to see the number of nodes that are in the cluster:

$ kubectl get nodes

you should see an output like this:

NAME                                     STATUS   ROLES    AGE   VERSION
gke-web-app-default-pool-564c86b8-m615   Ready    <none>   10m   v1.24.9-gke.2000
gke-web-app-default-pool-564c86b8-n62d   Ready    <none>   10m   v1.24.9-gke.2000
gke-web-app-default-pool-564c86b8-xhz6   Ready    <none>   10m   v1.24.9-gke.2000

now that we are in our cluster we need to start executing commands.

create a new directory and enter it with the command below:

$ mkdir ~/web-app

$ cd ~/web-app

now that you are in this new directory. you need to create two files.

a deployment file and a service file to run our website.

DEPLOYMENT.YAML

you will need to create a new file and call it web-app-deployment.yml:

$ nano ~/web-app/web-app-deployment.yaml

paste this in the file:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: web-app-deploy
  labels: 
    name: web-app
    app: website
spec: 
  replicas: 3
  selector:
    matchLabels:
      name: web-app-pod
      app: website
  template:
    metadata:
      name: web-app-pod
      labels: 
        name: web-app-pod
        app: website
    spec:
      containers:
        - name: web-app
          image: nwokolo/web-app
          ports:
            - containerPort: 80

after pasting this in. you will need to change the image part close to the bottom of the page.

and as you can see it’s my image that is there. you need to put your own image that you created and pushed to docker hub.

change only what you understand. now save this file.

SERVICE.YAML

now that we are done with our deployment file we need to build our service file.

create a new file and name it web-app-service.yaml. you can use the command below:

$ nano ~/web-app/web-app-service.yaml

when the file opens you paste this code in:

apiVersion: v1
kind: Service
metadata: 
  name: web-app
  labels:
    name: web-app-service
    app: website
spec:
  type: LoadBalancer
  ports:
    - port: 80
      targetPort: 80
  selector:
    name: web-app-pod
    app: website

now when you are done you can now save this file.

EXECUTING THE COMMANDS

you are done but to be sure you need to run this command:

$ ls

you should get an output like this:

web-app-deployment.yaml web-app-service.yaml

you should have two files in the /web-app/ directory.

now that we are good to go. we need to run this command for each to execute them:

$ kubectl create -f .

and the dot (.) tells Kubernetes that it should create every file in that directory.

if you would love to run it step by step then you can use this command:

$ kubectl create -f web-app-deployment.yaml 

$ kubectl create -f web-app-service.yaml

you should see an output like this when you are done:

deployment.apps/web-app-deploy created
service/web-app created

now run this command to be sure our deployment and service worked:

$ kubectl get deployments,svc

you should see an output like this:

NAME                             READY   UP-TO-DATE   AVAILABLE   AGE
deployment.apps/web-app-deploy   1/1     1            1           2m33s

NAME                 TYPE           CLUSTER-IP    EXTERNAL-IP    PORT(S)        AGE
service/kubernetes   ClusterIP      10.24.0.1     <none>         443/TCP        32m
service/web-app      LoadBalancer   10.24.4.238   34.77.10.133   80:32342/TCP   2m33s

and we see our service and the deployment that we created.

and when you are done you can just take the EXTERNAL-IP of the service block and put it in the browser.

this IP I mean.

and you should see your web application.

it works!!! and it also uses three nodes (instances) with the load balancer feature in our service.

it helps us iterate over each node. to reduce the load!

DELETE YOUR WORK.

to delete your work you need to go to the cluster page

right here and you click on delete.

you will also need to confirm it by typing the name of the cluster and clicking on delete

the status changed now it’s deleting. give it a few minutes.

and we are done!!

Reminder

if you want a well-detailed video explanation of the zoom mastermind class.

CHECK HERE

NOTE: if you have any questions or want to add to this blog. you can message me through E-mail.

I reply faster to people that are subscribed to my newsletter!!

Conclusion

If you loved this blog post give it a like, comment, and don’t forget to click on the follow button.

And if you would love to get an update on the two interesting blogs I will be posting this week then you should sign up for my newsletter right here!!