πŸš€ Deploying Your Next.js Application on AWS with GitHub Actions: A Step-by-Step Guide πŸ› οΈ

πŸš€ Deploying Your Next.js Application on AWS with GitHub Actions: A Step-by-Step Guide πŸ› οΈ

Simple Next.js Deployment to AWS with GitHub Actions

Β·

5 min read

Deploying a Next.js application on AWS can seem like a daunting task, but with the power of GitHub Actions, you can automate the entire process, making deployments seamless and stress-free. In this guide, we'll walk through how to set up a Continuous Integration/Continuous Deployment (CI/CD) pipeline using GitHub Actions to deploy your Next.js application to AWS. By the end of this tutorial, you'll have a fully automated deployment pipeline that pushes changes to production with minimal effort. πŸ’»

πŸ› οΈ Why Choose AWS for Deploying Your Next.js Application?

Amazon Web Services (AWS) is a leading cloud service provider that offers a range of services ideal for hosting and scaling web applications. Here are a few reasons why deploying your Next.js app on AWS makes sense:

  • Scalability: AWS provides scalable infrastructure, allowing your application to handle increased traffic effortlessly.

  • Security: AWS offers robust security features, including encryption, IAM, and security groups.

  • Global Reach: AWS has data centers around the world, enabling low-latency access for users globally.

  • Integration: AWS services like S3, Lambda, and RDS can be easily integrated with your application for enhanced functionality.

πŸ› οΈ Why Use GitHub Actions for CI/CD?

GitHub Actions is a powerful tool that allows you to automate, customize, and execute your software development workflows directly in your GitHub repository. It enables you to set up CI/CD pipelines that automate testing, building, and deploying your application. Here’s why you should use GitHub Actions for deploying your Next.js app:

  • Seamless Integration: GitHub Actions is tightly integrated with GitHub, making it easy to trigger workflows on events like pushes or pull requests.

  • Customization: You can create custom workflows that suit your specific needs, from running tests to deploying applications.

  • Marketplace: Access a vast marketplace of pre-built actions to simplify your workflow setup.

🎯 Prerequisites

Before we dive into the setup, ensure you have the following:

  1. AWS Account: You'll need an AWS account with access to EC2, S3, or any other services you plan to use.

  2. GitHub Repository: Your Next.js application should be hosted on GitHub.

  3. AWS CLI Installed: Ensure the AWS CLI is installed and configured on your local machine.

πŸš€ Step 1: Set Up Your AWS Environment

1.1. Launch an EC2 Instance

To host your Next.js application, you'll need to launch an EC2 instance on AWS:

  1. Log in to your AWS Management Console.

  2. Navigate to the EC2 Dashboard.

  3. Click on Launch Instance.

  4. Choose an Amazon Machine Image (AMI) - the Ubuntu Server AMI is a good choice.

  5. Select an instance type (e.g., t2.micro for free tier).

  6. Configure the instance details and add storage.

  7. Create or select an existing key pair to SSH into the instance.

  8. Review and launch the instance.

1.2. Install Dependencies on EC2

Once your EC2 instance is running, SSH into it and install the necessary dependencies:

# SSH into your instance
ssh -i /path/to/your-key.pem ubuntu@your-ec2-public-ip

# Update package list and install Node.js
sudo apt update
sudo apt install -y nodejs npm

# Install PM2 to manage your Node.js application
sudo npm install -g pm2

# Optionally install Git if needed
sudo apt install -y git

πŸš€ Step 2: Configure AWS for GitHub Actions

2.1. Set Up IAM User for GitHub Actions

To allow GitHub Actions to deploy to your AWS environment, you'll need to set up an IAM user with the necessary permissions:

  1. Navigate to the IAM Dashboard in AWS.

  2. Click on Users > Add user.

  3. Enter a username and select Programmatic access.

  4. Attach existing policies directly - choose AmazonEC2FullAccess and AmazonS3FullAccess if you plan to use S3.

  5. Create the user and download the access key ID and secret access key.

2.2. Store AWS Credentials in GitHub Secrets

Next, store your AWS credentials in your GitHub repository's secrets:

  1. Go to your GitHub repository.

  2. Click on Settings > Secrets and variables > Actions > New repository secret.

  3. Add the following secrets:

    • AWS_ACCESS_KEY_ID

    • AWS_SECRET_ACCESS_KEY

    • AWS_REGION (e.g., us-west-2)

πŸš€ Step 3: Create a GitHub Actions Workflow

Now, let's create the GitHub Actions workflow to automate the deployment process.

3.1. Set Up the Workflow File

Create a .github/workflows/deploy.yml file in your repository with the following content:

name: Deploy Next.js App to AWS

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

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

    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14'

    - name: Install dependencies
      run: npm install

    - name: Build Next.js app
      run: npm run build

    - name: Sync built app to EC2
      run: |
        scp -o StrictHostKeyChecking=no -i /path/to/your-key.pem -r .next/* ubuntu@your-ec2-public-ip:/home/ubuntu/app
      env:
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        AWS_REGION: ${{ secrets.AWS_REGION }}

  deploy:
    runs-on: ubuntu-latest
    needs: build

    steps:
    - name: SSH into EC2 and deploy
      run: |
        ssh -o StrictHostKeyChecking=no -i /path/to/your-key.pem ubuntu@your-ec2-public-ip "cd /home/ubuntu/app && pm2 restart all"
      env:
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        AWS_REGION: ${{ secrets.AWS_REGION }}

3.2. Configure PM2 on EC2

Ensure PM2 is set up to manage your Next.js application:

# On your EC2 instance
cd /home/ubuntu/app
pm2 start npm --name "nextjs-app" -- start
pm2 save

πŸš€ Step 4: Test Your CI/CD Pipeline

Commit your changes and push them to the main branch. GitHub Actions will automatically trigger the workflow, build your application, and deploy it to your AWS EC2 instance.

git add .
git commit -m "Set up CI/CD pipeline for AWS deployment"
git push origin main

Monitor the progress in the Actions tab of your GitHub repository to ensure everything runs smoothly. πŸŽ‰

πŸŽ‰ Conclusion

Congratulations! You've successfully set up a CI/CD pipeline using GitHub Actions to deploy your Next.js application to AWS. This automation not only saves time but also ensures that your application is always up-to-date with the latest code changes.

Happy coding! πŸš€

By leveraging the power of GitHub Actions and AWS, you can now focus more on writing great code and less on manual deployments. Whether you're working on a personal project or deploying applications for a large-scale enterprise, this setup will help streamline your development process.

If you found this guide helpful, don't forget to share it with your fellow developers! πŸ’‘βœ¨

Β