Tools Used

Docker

Github

GHCR(GitHub Container Registry)

Github Action

Tools outline

Docker

Docker is a containerization tool. It is widely used in many companies today because it makes it easy to build, test, and deploy applications quickly. It can run in any environment.

Docker contains the source code of the application you develop and an OS with built-in libraries.

It acts like a virtual machine, which is why it includes an OS. We can choose the OS images based on our needs.

In simple terms, it's like we're packing up our entire system, slapping a shipping label on it, and sending it straight to the client's doorstep!

GitHub

GitHub is a version control system where we upload and manage our code. It keeps track of changes made to the files.

For example, if I upload an image file to a repository on GitHub and later decide to replace it with a new version, I can commit the new image file to the repository.

This action creates a new version of the file while preserving the history of changes. If, at any point, people decide that they prefer the original image over the new one, I can easily revert to the previous version using GitHub's version control features.

This process ensures that all changes are tracked and reversible, providing a robust way to manage and maintain different versions of files over time.

Additionally, GitHub allows for collaborative work, so multiple people can contribute to the project, review changes, and suggest improvements, making it an invaluable tool for software development and project management.

GHCR

GHCR stands for GITHUB CONTAINER REGISTRY

GitHub Container Registry (GHCR) is a registry that allows users to host and manage Docker container images in their GitHub account.

Github Action

GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline.

Lets see how i build my projects

One day, while learning Docker, I had an idea: "Why not create a Dockerfile, run it on GitHub, and host it there?"

So, I decided to write a Dockerfile that contains the 2048 game. I had already tested the Dockerfile locally, and it ran smoothly. Lets move it to GHCR.

# Use a lightweight base image
FROM alpine:3.18

# Install dependencies (Nginx, zip, curl)
RUN apk add --no-cache nginx zip curl && \
    mkdir -p /var/www/html

# Download and extract 2048 game files
RUN curl -o /var/www/html/master.zip -L https://codeload.github.com/gabrielecirulli/2048/zip/master && \
    cd /var/www/html/ && unzip master.zip && mv 2048-master/* . && rm -rf 2048-master master.zip

# Copy Nginx configuration file
COPY default.conf /etc/nginx/http.d/default.conf

# Expose port 80 for Nginx
EXPOSE 80

# Start Nginx in foreground
CMD ["nginx", "-g", "daemon off;"]

Then I created a Docker image and pushed it to GitHub. After that, I wrote a CI/CD pipeline using GitHub Actions to connect to GHCR.

Because GitHub cannot directly build, run, and host itself, we need a container registry like Docker Hub or alternatives like GHCR.

GitHub can only host a static site.

By using these tools, we can run this Dockerfile. I decided to choose GHCR because it is a product of GitHub and is also easy to configure.

So, the GitHub Action will trigger automatically if there is any change in the main branch.

name: Build, Push, and Deploy Docker Image for 2048

on:
  push:
    branches:
      - main

jobs:
  build_and_publish:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Log in to GitHub Container Registry
        run: echo "${{ secrets.GH_PAT }}" | docker login ghcr.io -u madhucheran --password-stdin

      - name: Build and push the Docker image
        run: |
          docker build . --tag ghcr.io/madhucheran/2048-ghcr:latest
          docker push ghcr.io/madhucheran/2048-ghcr:latest

  deploy:
    needs: build_and_publish
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Log in to GitHub Container Registry
        run: echo "${{ secrets.GH_PAT }}" | docker login ghcr.io -u madhucheran --password-stdin

      - name: Pull Docker image
        run: docker pull ghcr.io/madhucheran/2048-ghcr:latest

      - name: Create a container and extract static files
        run: |
          mkdir -p ./public
          docker run --rm -d --name 2048-container ghcr.io/madhucheran/2048-ghcr:latest
          sleep 10 # Wait for the container to start
          docker cp 2048-container:/var/www/html ./public
          docker stop 2048-container
          ls -la ./public # List files to ensure index.html is present

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GIT_TOKEN }}
          publish_dir: ./public/html  # Adjusted path to the html folder
          publish_branch: gh-pages

This CI/CD process will build, run, and deploy the files inside the Dockerfile.

It builds the file in GHCR, runs it in GHCR, and then pulls it back to GitHub. It will automatically create a new branch in GitHub.

In GitHub, we need to host it, so I used gh-pages for hosting.

CI/CD part

Any changes in github main branch the CI/CD part will automatically trigger and the commands

After the trigger

It will login to the github container registry

Then it will build and push the files inside the dockerfile

Deployment

Now again it will login to the GHCR

Now it will pull the files that are all running by the dockerfile by docker

Copy the files inside the running container to the respected folder

./public is used to show the github that here is the index.html is stored to host

Then it will deploy this files form the container to gh-pages

and if it successfully run and deployed the gh-pages will host itself

In my experience i'm saying that "If you are facing lots of error while implementing any of the things while doing anything then you are blessed"

Summary

This article explains how to build, test, and deploy a Dockerized version of the 2048 game using Docker, GitHub, GHCR (GitHub Container Registry), and GitHub Actions for CI/CD automation. We'll create a Dockerfile, push the Docker image to GHCR, and set up a CI/CD pipeline with GitHub Actions that automatically builds, pushes, and deploys the Docker image whenever changes are made to the main branch. Finally, we'll host the static site with gh-pages, enabling seamless integration and deployment of the 2048 game.

if there is any error in this blog let me know

❝𝐋𝐞𝐭𝐬-𝐋𝐞𝐚𝐫𝐧-𝐓𝐨𝐠𝐞𝐭𝐡𝐞𝐫❞

Linked In

Twitter

Reddit

Baked with 🔥 By Madhucheran