Streamline Your Workflow: Automate Frontend Deployment with GitHub Actions

Manually deploying your frontend code can be a time-consuming and error-prone process. But fear not, developers! GitHub Actions offers a powerful solution for automating your CI/CD pipeline, allowing for seamless frontend deployments with every code change.

What is CI/CD?
CI/CD stands for Continuous Integration and Continuous Delivery/Deployment. It's an automated workflow that streamlines the software development process. With CI/CD, code changes are continuously integrated, tested, and deployed, ensuring a faster and more reliable development cycle.

Using GitHub Actions runners on an EC2 instance is a powerful way to extend the capabilities of GitHub Actions beyond the default hosted runners provided by GitHub. This setup gives you more control over the environment in which your workflows run and allows you to leverage resources within your own AWS account. Here's a guide on how to set up and use GitHub Actions self-hosted runners on an EC2 instance:

Install and Configure the Runner:

Connect to your EC2 Instance: SSH into your EC2 instance using the key pair associated with the instance.

Download and Install the Runner: Follow the instructions provided by GitHub to download and configure the GitHub Actions runner. You can find the installation steps in the GitHub repository under Settings -> Actions -> Self-hosted runners.

Register the Runner: During the installation process, you'll be prompted to enter your GitHub repository URL, an access token, and other configuration details. This registers the runner with your GitHub repository.

Getting Started with GitHub Actions
If you're new to GitHub Actions, getting started is straightforward:
(For this example I've created a sample react project.)

Create a Workflow File: Inside your repository, create a .github/workflows directory if it doesn't exist. In this directory, add a YAML file (e.g., deploy.yml) where you'll define your workflow.

Define Workflow Steps: In your YAML file, define the steps required to build and deploy your frontend application. This typically includes installing dependencies, building assets (e.g., with webpack or npm scripts), and deploying to an ec2 instance.

name: Deploy to ec2 instance

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: self-hosted

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Cache Node.js dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{matrix.node-version}}

      - name: Install dependencies
        run: npm install

      - name: Build React application
        run: |
          npm run build
          rm -rf /var/www/react_sample/static
          mv build/* /var/www/react_sample
          rm -r *

This example workflow installs dependencies, builds the project, and deploys the built assets to an ec2 instance using a self-hosted runner. Adjust the details (like branches and build commands) to fit your project's setup.

Configure Secrets: For deploying to certain services (like GitHub Pages or AWS), you'll need API keys or access tokens. Store these securely in your repository's Secrets settings (Settings -> Secrets), and reference them in your workflow YAML file.

Trigger Workflow: With your workflow file set up, GitHub Actions will automatically trigger it when changes are pushed to the specified branch (main in the example). You can also trigger workflows manually or on other events like pull requests.

Benefits of GitHub Actions for Frontend Deployment

Automation: Once set up, deployments happen automatically on every push or as scheduled, reducing manual intervention.

Consistency: Eliminates human error in deployment steps, ensuring each deployment follows the exact same process.

Visibility and Monitoring: GitHub Actions provides logs and status checks for each workflow run, making it easy to monitor deployment outcomes and debug issues.

Community Actions: Leverage a wide range of community-maintained actions for common tasks, reducing the need to reinvent the wheel.

Happy Coding!