# Cloud Resume Challenge Part 3 - Building a Front-End CI/CD Pipeline for the Cloud Resume Challenge with GitHub Actions

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684686052177/8468a1fc-2728-4f0d-a2d5-687d43eeecdc.png align="center")

Welcome to Part 3 of the Cloud Resume Challenge series! In this article, we will walk you through the step-by-step process of building a front-end CI/CD pipeline using GitHub Actions. By automating the deployment process, we can ensure that changes to our website are seamlessly delivered to end users. Let's dive in and explore how to leverage GitHub Actions for efficient CI/CD workflows.

### Step 1: Understanding CI/CD for DevOps

Before we begin, let's briefly understand the concept of Continuous Integration (CI) and Continuous Deployment (CD) in the context of DevOps. CI involves frequently merging code changes from multiple developers into a central repository. CD automates the release and deployment of software changes to various environments, ensuring a smooth and reliable delivery pipeline. CI/CD pipelines provide benefits such as early issue detection, faster time to market, improved code quality, and increased collaboration among team members.

### Step 2: Why Use GitHub Actions for CI/CD?

GitHub Actions is a powerful CI/CD platform provided by GitHub. It offers a wide range of pre-built actions and workflows that simplify the configuration and automation of CI/CD pipelines. Here's why GitHub Actions is a popular choice:

* Integration with GitHub: GitHub Actions seamlessly integrates with repositories, making it easy to trigger workflows based on various events such as code pushes, pull requests, or issue updates.
    
* Flexibility and Customization: GitHub Actions allows developers to define workflows using YAML syntax, providing flexibility and customization options tailored to project-specific requirements.
    
* Large Ecosystem: GitHub Actions has a vast ecosystem of community-contributed actions covering a wide range of use cases. Leveraging existing solutions reduces development time and effort.
    
* Scalability and Automation: GitHub Actions scales effortlessly to accommodate projects of any size. It supports parallel execution, enabling concurrent workflows and faster feedback loops. Its built-in automation capabilities reduce manual intervention and enhance productivity.
    
* Secure and Reliable: GitHub Actions offers robust security features, including secrets management for secure storage and retrieval of sensitive information. Extensive logging and monitoring capabilities help track workflow execution and troubleshoot issues.
    

### Step 3: Building the Front-End CI/CD Pipeline with GitHub Actions

Now let's dive into the steps involved in building our front-end CI/CD pipeline using GitHub Actions:

### Step 3.1: Workflow Definition

Start by creating a YAML file, such as `copy-to-s3-and-invalidate-cloudfront.yml`, in the root directory of your project. Define the workflow as follows:

```yaml
name: Copy website to S3 and invalidate CloudFront Distribution

on:
  push:
    branches:
    - main
```

### Step 3.2: Defining Jobs and Steps

Within the workflow, define the jobs and steps required for the CI/CD pipeline:

* **Job 1: Copying Website to S3**
    

```yaml
jobs:
  copy-website-to-s3-and-invalidate-cloudfront:
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@master

      - name: sync s3
        uses: jakejarvis/s3-sync-action@master
        with:
          args: --follow-symlinks --delete --exclude '.git/*' --size-only
        env:
          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: 'us-east-1'
          SOURCE_DIR: './ '
```

* **Job 2: Invalidating CloudFront Distribution**
    

```yaml
  invalidate-cloudfront-distribution:
    needs: copy-website-to-s3-and-invalidate-cloudfront
    runs-on: ubuntu-latest
    steps:
      - name: Invalidate CloudFront
        uses: chetan/invalidate-cloudfront-action@v2
        env:
          DISTRIBUTION: ${{ secrets.DISTRIBUTION }}
          PATHS: "/*"
          AWS_REGION: "us-east-1"
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
```

### Step 3.3: Understanding the Workflow

Steps In **Job 1**, the `copy-website-to-s3-and-invalidate-cloudfront` job runs on the latest version of the Ubuntu environment. It first checks out the repository code using the `actions/checkout` action. Next, it uses the `jakejarvis/s3-sync-action` action to sync the website files to an S3 bucket. The action's parameters are configured to follow symlinks, delete files not present in the source, exclude the .git directory, and compare file sizes for updates. The necessary AWS credentials, S3 bucket, AWS region, and source directory are provided through environment variables.

In **Job 2**, the `invalidate-cloudfront-distribution` job depends on the completion of the previous job. It uses the `chetan/invalidate-cloudfront-action` action to invalidate the CloudFront distribution. The action requires the distribution ID, paths to invalidate (in this case, all paths), and AWS credentials.

### Step 4: Testing the Workflow

To test the workflow, follow these steps:

1. Commit your code changes to the main branch of your GitHub repository.
    
2. Navigate to the "Actions" tab in your GitHub repository.
    
3. You should see the workflow running based on the push event on the main branch.
    
4. Monitor the workflow execution for any errors or issues.
    
5. Once the workflow completes successfully, check your S3 bucket and CloudFront distribution to ensure that the changes have been deployed.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684674933274/40e430c0-edb4-433d-8834-233b2574a601.jpeg align="center")

By following these step-by-step instructions, you have successfully built a front-end CI/CD pipeline for the Cloud Resume Challenge using GitHub Actions. GitHub Actions' integration with repositories, flexibility, large ecosystem, scalability, and automation capabilities make it an excellent choice for efficient CI/CD workflows.

Embrace the power of DevOps and leverage tools like GitHub Actions to deliver high-quality software seamlessly. In the next part of the Cloud Resume Challenge series, we will shift our focus to Infrastructure as Code (IaC) and utilize the powerful tool Terraform to create our backend infrastructure.