How to Deploy a Next.js Application on AWS EC2 Using GitHub Actions

Deploying a Next.js application to AWS EC2 provides a scalable and reliable way to manage your web application. By automating the deployment process with GitHub Actions, you can easily push updates to your live application. In this tutorial, we will walk you through the step-by-step process of deploying a Next.js app on an EC2 instance using GitHub Actions.

Table of Contents

1. Create a Next.js Project
2. Create a GitHub Repository and Connect It with Your Next.js App
3. Set Up AWS EC2 Instance
4. Connect to Your EC2 Instance
5. Configure Security Groups in EC2
6. Set Up GitHub Actions Workflow
7. Add Repository Secrets in GitHub
8. Deploy and Verify

1. Create a Next.js Project

If you haven’t already created a Next.js application, now is the time to do so. Open your terminal and run the following commands:

npx create-next-app@latest my-next-app
cd my-next-app

You can follow the Next.js official documentation for more details on how to create and configure a Next.js project.

2. Create a GitHub Repository and Connect It with Your Next.js App

Next, you need to create a repository on GitHub to host your application code.

1. Go to GitHub and create a new repository.
2. Follow the instructions to push your Next.js project to the new repository.

Here is a sample of the basic commands to push your code:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/your-repo.git
git push -u origin main

3. Set Up AWS EC2 Instance

1. Log in to your AWS Management Console.
2. Search for EC2 and open the EC2 Dashboard.
3. Click on Launch Instance.
4. Select an Amazon Machine Image (AMI). You can use the Ubuntu Server 20.04 LTS.
5. Choose an Instance Type (e.g., t2.micro for free tier eligibility).
6. Create a new key pair or select an existing one.
7. Configure the instance details and click on Launch Instance.

Here's a step-by-step guide with images.

For more details, refer to the AWS EC2 documentation.

4. Connect to Your EC2 Instance

1. Go to your EC2 dashboard, select your instance, and click Connect.

2. Use the SSH client or EC2 Instance Connect to access your server.

3. Change the ownership of the key pair using the following command:

sudo chown 600 /path/to/your-key.pem

5. Run the SSH command to connect:

ssh -i "your-key.pem" [email protected]

5. Configure Security Groups in EC2

To allow traffic to your application:

1. Go to the Security Groups section of your EC2 dashboard.
2. Select your instance’s security group and click on Edit Inbound Rules.
3. Add a rule to allow HTTP (port 80) and HTTPS (port 443) traffic.

6. Set Up GitHub Actions Workflow

To automate deployment using GitHub Actions:

1. In the root directory of your Next.js project, create a .github/workflows folder.
2. Inside this folder, create a deploy.yml file with the following content:

name: Push-to-EC2 instance

on:
  push:
    branches:
      - main

jobs:
  deploy:
    name: Push to EC2
    runs-on: ubuntu-latest

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

      - name: Deploy to my EC2 instance
        uses: easingthemes/[email protected]
        env:
          SSH_PRIVATE_KEY: ${{ secrets.EC2_SSH_KEY }}
          SOURCE: "./"
          REMOTE_HOST: ${{ secrets.HOST_DNS }}
          REMOTE_USER: ${{ secrets.USERNAME }}
          TARGET: ${{ secrets.TARGET_DIR }}

      - name: Executing remote ssh commands using ssh key
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.HOST_DNS }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.EC2_SSH_KEY }}
          script: |
            sudo yum -y update
            sudo yum install -y httpd
            sudo systemctl start httpd
            sudo systemctl enable httpd
            # Add Node.js source for latest version
            curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -
            # Install Node.js and npm
            sudo yum install -y nodejs
            # Navigate to the project directory
            cd ${{ secrets.TARGET_DIR }}
            # Install project dependencies
            npm install
            # Build the project
            npm run build
            # Clean up existing files in the web server directory
            sudo rm -rf /var/www/html/*
            # Move the build files to the web server directory
            sudo mv build/* /var/www/html
            # Set proper SELinux context for the web content
            sudo chcon -R -t httpd_sys_content_t /var/www/html
            # Restart Apache to apply changes
            sudo systemctl restart httpd

7. Add Repository Secrets in GitHub

To securely provide sensitive information to your workflow:

1. Go to your GitHub repository settings.
2. Navigate to Secrets and variables > Actions.
3. Add the following secrets:
   • EC2_SSH_KEY: Your EC2 instance SSH private key.
   • HOST_DNS: Public IPv4 address or DNS of your EC2 instance.
   • USERNAME: The default user is ec2-user or ubuntu.
   • TARGET_DIR: The directory on the EC2 instance where your app should be deployed (e.g., /home/ubuntu/app).

8. Deploy and Verify

Push your changes to GitHub:

git add .
git commit -m "Set up GitHub Actions for deployment"
git push origin main

GitHub Actions will automatically run the deployment workflow. You can check the status of your deployment in the Actions tab of your repository.

After deployment, navigate to the public IPv4 address of your EC2 instance in your browser to verify that your Next.js application is live.

Conclusion

Deploying a Next.js application on AWS EC2 using GitHub Actions is a powerful way to manage your web application efficiently. With this setup, you can automate your deployments, reduce manual errors, and ensure a smooth CI/CD pipeline.

For more in-depth tutorials, check out the GitHub Actions documentation and AWS EC2 best practices.

Feel free to share this guide and follow our blog for more DevOps and cloud deployment tips!