Learn How To Containerize Your Website and Deploy It With Kubernetes In Less Than 5-Minutes
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.
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!!