How to Deploy your Portfolio Website using Nginx and Kubernetes

Creating a personal portfolio site is an essential step for showcasing your skills and projects to potential employers or clients. With the rise of containerization and orchestration technologies, deploying your portfolio using Docker and Kubernetes has become easier and more efficient. In this blog post, I'll walk you through the process of deploying a portfolio site using Nginx in Kubernetes.

Prerequisites

Before we begin, make sure you have the following installed on your machine:

1. Docker Desktop: This will provide the Docker and Kubernetes environments.

2. kubectl: The command-line tool for interacting with your Kubernetes cluster.

3. A simple portfolio site: This could be a static site built with HTML, CSS, and JavaScript. I'm going to use this for my blog.

Step 1: Setting Up Docker Desktop

Ensure Docker Desktop is installed and running on your machine. You can download it from the Docker website.

Once installed, enable Kubernetes by navigating to the settings in Docker Desktop:

1. Open Docker Desktop.

2. Click on the Settings icon.

3. Go to the Kubernetes tab.

4. Check the box for Enable Kubernetes.

5. Click Apply & Restart.

Docker Desktop will now start the Kubernetes cluster.

Step 2: Create a Dockerfile for Your Portfolio Site

Copy all the code file to html directory

A Dockerfile is a script that contains instructions on how to build a Docker image. Create a Dockerfile in the root directory of your portfolio site:

FROM nginx:latest

# Copy your custom code to the /usr/share/nginx/html directory
COPY html /usr/share/nginx/html

# Expose port 80 to the outside world
EXPOSE 80

# Start the Nginx server
CMD ["nginx", "-g", "daemon off;"]

Step 3: Build and Push the Docker Image

Next, build your Docker image and push it to Docker Hub (or any other container registry you prefer).

1. Prepare your project structure: Your project directory should look something like this:

    bashCopy code/nginx-cv
    │   Dockerfile
    │
    └───html
        │   CSS
        │   Images
        │   js
        │   Scripts
        │   Creaive.png
        │   index.html
   

2. Build the Docker image:

     docker build -t nginx-cv .
   

3. Push the Docker image to Docker Hub:

    #login into docker hub 
    docker login
   
    #Tag the image in docker 
    docker tag nginx-cv username/nginx-cv:latest
   
    #Docker Push
    docker push username/nginx-cv:latest
   

   Step 4: Create Kubernetes Pod and Service

   Create Kubernetes pod and service YAML files to define how your application should be deployed.

   Note: I have published my docker image used in this blog in docker hub, use

   image: tarunvarma7779/nginx-cv to use my image in your manifest file

   1. `deployment.yaml:

    apiVersion: v1
    kind: Pod
    metadata:
      name: nginx-pod
      labels:
        app: nginx-cv
    spec:
      containers:
      - name: nginx-container
        image: tarunvarma7779/nginx-cv
        ports:
        - containerPort: 80

2. Apply Kubernetes Manifests`

    kubectl apply -f deployment.yaml

Output:

3. Creating NodePort service

 kubectl expose pod nginx-pod --port=80 --target-port=80 --type=NodePort

Output:

Step 5: Access Your Portfolio Site

After applying the Kubernetes manifests, Kubernetes will create the necessary pods and services to run your portfolio site. To access your site:

1. Check the status of your services:

1. Note the external IP address of your portfolio-site-service. If you're running on Docker Desktop, it may use a localhost or cluster IP.

2. Open a web browser and navigate to the IP address or localhost to see your portfolio site live.

Output:

Conclusion

Congratulations! You've successfully deployed your portfolio site using Nginx in Kubernetes on Docker Desktop. This setup not only makes your site easily deployable but also scalable and manageable with Kubernetes' powerful orchestration capabilities.

Feel free to expand on this by adding CI/CD pipelines, monitoring, and custom domain configurations to make your portfolio site even more robust and professional.