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!
Top comments (4)
Hello ✋
I have one query regarding to automated testing:
"What are the most experience challenges faced by teams while using automated testing in ci/cd pipeline?"
Automated tests need regular updates as the app changes. Keeping them up-to-date and fixing any issues can take a lot of time and effort.
and sir regarding to mentioned challenges, i have an counter question which is: What are the strategies team or organization adopts to handle these bottlenecks?
sir can you just tell me some more challenges?