CI/CD with Github, Docker & a VPS.

In the realm of software development, GitHub, Docker, and a Virtual Private Server (VPS) converge to redefine efficiency through CI/CD. Picture a world where code seamlessly travels from development to production in minutes, not days. In this guide, we’ll navigate the power trio of GitHub, Docker, and a VPS, unlocking the secrets of streamlined development. Get ready to witness the evolution of CI/CD and revolutionize your workflow.

Image from Microsoft Designer

1. Dockerizing the web app

The foundation of our CI/CD adventure begins with Dockerizing your application. Imagine encapsulating your app, its dependencies, and runtime environment into a portable container that behaves consistently across any environment. Docker empowers you to achieve just that.

In this guide, we won’t delve too deep into the specifics, as the Dockerization process varies with each application type. Instead, we’ll focus on the fundamental steps that propel your Dockerized web app toward the VPS.

Let’s show you an example of a react app.

# create the app with vite
yarn create vite ci-cd-example --template react-ts

# Enter in the app
cd ci-cd-example

We need to create 3 files .dockerignore , Dockerfile , docker-compose.yaml . You can see the full source code here.

After configuring those 3 files, you just need to do docker-compose up -d to create the container.

2. Push your container image

With your application now Dockerized and encapsulated within a container, our next destination is Docker Hub — the world’s largest library and community for container images. Think of it as the GitHub of container images, where your containers can seamlessly reach other machines and platforms.

• You need to create an account in https://hub.docker.com/
• Create a new repository (Public or Private)
• Push the container image

docker tag local-image:tagname new-repo:tagname
docker push new-repo:tagname

For the initial deployment, utilize the tagname latest to simplify the process. It’s essential to perform this step at least once to establish a baseline before subsequent updates.

3. Add Github Secrets

In our CI/CD journey, the next crucial step is to fortify your workflow by adding GitHub Secrets. These secret keys empower your CI/CD pipeline to interact securely with Docker Hub and your Virtual Private Server (VPS), ensuring a smooth and protected deployment process.

• DOCKERHUB_TOKEN: A token granting access to Docker Hub, generate this token in your Docker Hub account settings.
• DOCKERHUB_USERNAME: Your Docker Hub account username.
• VPS_IP: The IP address of your Virtual Private Server (VPS) where the deployment will occur. Retrieve the IP address from your VPS provider.
• VPS_USER: The username required to authenticate and access your VPS. Your VPS provider or server administrator will provide this information.
• VPS_PASSWORD: The password associated with the VPS_USER for secure access.

To add these secrets:

• Navigate to your GitHub repository.
• Go to “Settings” -> “Secrets” -> “New repository secret.”
• Add each secret with the corresponding values, ensuring a secure and streamlined deployment process.

4. Add VPS docker configuration

Before we dive into the GitHub Actions deployment, let’s prepare your Virtual Private Server (VPS) to welcome your Dockerized application. Follow these steps to set up the VPS Docker configuration and create the project folder with docker-compose.yaml.

• Connect to your VPS: Access your VPS using the provided credentials and the IP address.
• Install Docker and Docker Compose: Follow the right tutorial according to your VPS system Digital Ocean Tutorials on Docker Installation.
• Create a Project Folder: Choose or create a directory for your project cd ~/ci-cd-example
• Create docker-compose.yaml

Create a file named docker-compose.yaml in your project directory with this code for our react app example.

version: '3'
services:
  web:
    image: repo_name:latest
    ports:
      - "80:80"

• Initialize the Docker Compose:

In your project directory, run: docker-compose up -d.

5. Add The Deployment Action

Now that our secrets are securely tucked away, it’s time to orchestrate the deployment dance using GitHub Actions. Here’s how you can seamlessly add the deployment action to your workflow:

• Navigate to your GitHub repository.
• Go to Actions & click on New workflow

github

• Set up a new workflow yourself

github workflows

You should now find yourself in an interface where you can edit the workflow, you can write this workflow to deploy your app on each push on main branch.

Conclusion

Congratulations on navigating through the essential steps of setting up a CI/CD workflow with GitHub, Docker, and your VPS! Remember, the outlined process provides a solid foundation, but the complexity of your workflow might vary based on specific project requirements.

In the world of software development, diversity is key. Projects differ, and so do workflows. If you encounter challenges, discover improvements, or simply have questions, don’t hesitate to reach out. CI/CD is a dynamic journey, and your feedback is invaluable.

As you embark on deploying your Dockerized applications with finesse, may your CI/CD pipeline be seamless and your code deployments be swift. Happy coding!