CI/CD Pipeline: Building a Real-World Example with CircleCI

In this article, we’ll look at how a real-world CI/CD pipeline functions using the CircleCI example. This will not just be theoretical — I will also demonstrate a fully functional CI/CD pipeline used in a real-world application.We’ll start with a quick…


This content originally appeared on Level Up Coding - Medium and was authored by Hayk Simonyan

In this article, we’ll look at how a real-world CI/CD pipeline functions using the CircleCI example. This will not just be theoretical — I will also demonstrate a fully functional CI/CD pipeline used in a real-world application.

We’ll start with a quick overview of how these pipelines operate at a high level and then dive into creating such a workflow step by step. You will see how each part works and how to manually approve deployments before they go live.

By the end, you will have a clear understanding of how to set up automated testing, linting, and deployments across multiple environments, including development, staging, and production.

Understanding the Pipeline: A High-Level View

Let’s begin by visualizing the typical flow of a CI/CD pipeline:

1. Pull the Repo & Make Changes: We start by pulling the repository locally and implementing your desired changes.

2. Push to GitHub (or GitLab/Bitbucket): Once your changes are ready, we push them to a source control platform like GitHub.

3. Open a Pull Request (PR): Then, we initiate a PR to the main branch (master, staging, or main).

4. Pipelines Trigger Automatically: This action triggers a series of pipeline jobs, including installing dependencies, linting, and testing. Here, two scenarios can happen: either one of the tests fails, or all tests pass, and you also get approval from other developers.

4. Deployment Jobs Created in CircleCI: Upon successful tests and approvals, CircleCI automatically generates deployment jobs.

5. Manual Approval & Deployment: At this last step, we can manually approve deployments to different environments, starting with development, then staging, and ultimately production.

While we’re using CircleCI in this example, the core concept remains consistent across CI/CD tools like Jenkins or Travis CI: build, test, and deploy your code continuously.

Observing the Pipeline in Action

Prior to deployment, you can see the pipeline’s execution directly on GitHub.

After the lint and test stages are completed successfully, you can click on the Details button on any of the pipelines, and it will navigate to CircleCI to manually approve the deployment to the development environment.

In this section, we can observe the development workflow and the specific jobs that are executed, such as installing dependencies and testing. When we click on any of these jobs, we can view the precise steps for that particular job as well as the associated logs.

We can approve the deployment for each environment from the pipeline. Following our approval, CircleCI handles the deployment to the development environment.

If everything functions as expected after testing, we repeat the process for staging and production deployment. This approach guarantees the robustness of your code before it reaches the live environment.

Configuring Your CircleCI Pipeline

Now, let’s explore the specifics of constructing this pipeline within CircleCI. The key part of this process is the config.yml file, which should be placed in the .circleci folder at the root of your project code.

Key Sections of config.yml:

Workflows: We define the pipeline stages here, such as installing dependencies, running tests, linting, and deploying to various environments.

workflows:
build_and_deploy:
jobs:
- install-dependencies
- lint
- test
- deploy-dev:
requires: [lint, test]
- deploy-staging:
requires: [deploy-dev]
type: approval
- deploy-prod:
requires: [deploy-staging]
type: approval

Jobs: Each job (e.g., install-dependencies or deploy-staging) outlines a series of steps for CircleCI to execute. These steps can encompass anything from running tests to deploying code.

jobs:
install-dependencies:
docker:
- image: cimg/node:20
steps:
- checkout
- run: npm install
  lint:
docker:
- image: cimg/node:20
steps:
- checkout
- run: npm run lint
  test:
docker:
- image: cimg/node:20
steps:
- checkout
- run: npm test
  deploy-dev:
# ... (deployment steps for dev environment)
  deploy-staging:
# ... (deployment steps for staging environment)
  deploy-prod:
# ... (deployment steps for production environment)

Dependencies, Lint, and Test: Basic steps are covered with jobs dedicated to installing dependencies, running linting, and conducting tests. These jobs ensure that your code is properly set up, adheres to coding standards, and passes all necessary tests before proceeding to deployment.

Deployment Jobs: Separate deployment jobs exist for the development, staging, and production environments. Each deployment job contains the specific instructions and configurations required to deploy your code to the respective environment.

Manual Approval: Approval steps are incorporated for staging and production deployments by using the type: approval option. This adds an extra layer of control, requiring manual intervention before deploying to critical environments.

Workspace: CircleCI’s workspace feature persists dependencies across different jobs. This optimizes the pipeline by avoiding redundant installations and speeding up the overall process.

And that is how a typical CI/CD pipeline works, from a pull request to production deployment, all orchestrated by the seamless integration of workflows, jobs, and careful approvals within the CI/CD pipeline.

If you’d like to see how this is incorporated into a fully functional production system, then check out this article next — System Design Concepts: Architecture of Production Web Apps.


CI/CD Pipeline: Building a Real-World Example with CircleCI was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.


This content originally appeared on Level Up Coding - Medium and was authored by Hayk Simonyan


Print Share Comment Cite Upload Translate Updates
APA

Hayk Simonyan | Sciencx (2024-09-17T16:13:13+00:00) CI/CD Pipeline: Building a Real-World Example with CircleCI. Retrieved from https://www.scien.cx/2024/09/17/ci-cd-pipeline-building-a-real-world-example-with-circleci/

MLA
" » CI/CD Pipeline: Building a Real-World Example with CircleCI." Hayk Simonyan | Sciencx - Tuesday September 17, 2024, https://www.scien.cx/2024/09/17/ci-cd-pipeline-building-a-real-world-example-with-circleci/
HARVARD
Hayk Simonyan | Sciencx Tuesday September 17, 2024 » CI/CD Pipeline: Building a Real-World Example with CircleCI., viewed ,<https://www.scien.cx/2024/09/17/ci-cd-pipeline-building-a-real-world-example-with-circleci/>
VANCOUVER
Hayk Simonyan | Sciencx - » CI/CD Pipeline: Building a Real-World Example with CircleCI. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/17/ci-cd-pipeline-building-a-real-world-example-with-circleci/
CHICAGO
" » CI/CD Pipeline: Building a Real-World Example with CircleCI." Hayk Simonyan | Sciencx - Accessed . https://www.scien.cx/2024/09/17/ci-cd-pipeline-building-a-real-world-example-with-circleci/
IEEE
" » CI/CD Pipeline: Building a Real-World Example with CircleCI." Hayk Simonyan | Sciencx [Online]. Available: https://www.scien.cx/2024/09/17/ci-cd-pipeline-building-a-real-world-example-with-circleci/. [Accessed: ]
rf:citation
» CI/CD Pipeline: Building a Real-World Example with CircleCI | Hayk Simonyan | Sciencx | https://www.scien.cx/2024/09/17/ci-cd-pipeline-building-a-real-world-example-with-circleci/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.