Deploy NextJs to AWS EC2 With GitHub Actions CI/CD Pipeline

nextjs with aws

In the fast-paced world of web development, efficiency is key. Every developer loves the auto-deployment process that takes their code from GitHub to production with minimal effort. 

In this blog post, I am going to make developers' lives easy. This will be your easy explanation blog on how you can use the power of GitHub Actions CI/CD to nextjs aws deployment to an AWS EC2 instance.

What Concepts should we have?

Let's just recap our prerequisites😌

Continuous Integration (CI)

Continuous Integration (CI) is a software development method in which team members regularly integrate code changes into a common repository, generally many times per day. Each integration is validated using automated builds and tests to find integration faults as soon as possible.

Let's get it more clear with a real-life example😎

Assume you're building a house with a group of builders. Each builder is responsible for a certain aspect, such as plumbing, electrical, or carpentry. Instead of waiting until the end to bring everything together, you integrate your work regularly.

Every time a builder completes a part, they transport it to a central location where all of the pieces are assembled. This is similar to submitting code changes to a shared repository in CI.

Then, a team of inspectors inspects each integrated component to verify it fits together and functions properly. If they discover any problems, they promptly contact the builders so that they may be resolved. This is similar to automated tests used in continuous integration💁.

By integrating often and spotting errors early on, the team guarantees that the house is completed easily and without major complications. Similarly, continuous integration (CI) enables software teams to consistently and effectively provide high-quality code👌.

Continuous Deployment (CD)

Continuous deployment (CD) is a software development strategy that involves automatically deploying code changes to production environments after passing automated tests and quality checks.

Let's get it more clear with a real-life example😎

Consider a team of engineers working on an e-commerce website. They utilize continuous integration (CI) to integrate code changes into a common repository multiple times per day. Once the code is merged, automated tests are run to confirm that the new modifications did not cause any errors and that the application operates properly☺.

After passing these tests, the code is immediately deployed to a staging environment for additional testing by quality assurance (QA) teams. If everything looks fine, the code is automatically pushed to the production environment, allowing end users to get new features or problem fixes without requiring any manual interaction😍.

GitHub Actions

Since it lets you create workflows that automatically start operations in response to events like code pushes, pull requests, or issue changes, GitHub actions GitHub actions are essential to CI/CD pipelines. These processes can be defined directly in your repository using YAML syntax.

What are the Steps?

We have gone through all of our basic concepts so far. Now let's jump to the main part👷

Step 1 - Create a GitHub Repository

To connect your code with GitHub, we all know we need to create a GitHub repository. In that repository, you will push your latest code by following GitHub commands. So that you can make a connection of your local environment to your remote environment.

Step 2 - Get your SSH key at your Disposal

I am assuming that you are familiar with SSH key, and how to create one.
SSH -i yourkey.pem ubuntu@

Step 3 - Get all your Essential Keys

Open your GitHub repository, go to the "Settings" page, and choose "Secrets" from the sidebar. Three nextjs aws secrets manager can be added here:


EC2_PRIVATE_KEY: Enter the value of your private key. To authenticate SSH connections to your nextjs to aws instance, you need to use this key.

EC2_HOST: Enter the IP address or hostname of your AWS EC2 instance here.

EC2_USERNAME: Enter the username that you use to connect to your AWS EC2 instance via SSH.

nextjs and aws
You're able to safely keep private data needed to access your  AWS EC2 instance inside of your GitHub repository by adding these secrets. Your GitHub Actions workflows can subsequently employ these secrets to automate processes like deploying your application to your EC2 instance.

Step 4 - Create a YAML File

  • Go to your project repository.
  • Create a folder named "Actions" if it doesn't already exist.
  • Inside the "Actions" folder, create a new folder named "Workflows."
  • Within the "Workflows" folder, create a new workflow file named "deploy.yml."

nextjs aws hosting

You will provide the tasks, procedures, and other setups required for deploying your application in this YAML file. This involves laying down the steps that need to be done, such as developing the application, putting it through testing, and deploying it to the place of your preference.

        branches: [main]
  name: 🚀 Deploy website on push
        name: 🎉 Deploy
        runs-on: ubuntu-latest
        - name: 🚚 Get latest code
          uses: actions/checkout@v2  
        - name: Use Node.js
          uses: actions/setup-node@v2-beta
            node-version: '18'
            check-latest: true
        - run: rm -rf node_modules/
        - run: npm install
        - run: npm run build
        - run: mkdir build
        - run: mv .next build/
        - run: mv .env build/
        # - run: mv middleware.js build/
        - run: mv package.json build/
        - run: mv public build/
        - run: mv next.config.js build/
        - run: mv package-lock.json build/
        - run: cd build && ls -a
            CI: false  
        - name: 📂 Sync files
          uses: wlixcc/SFTP-Deploy-Action@v1.2.4
            username: ${{ secrets.EC2_USERNAME }} 
            server: ${{ secrets.EC2_HOST }} 
            ssh_private_key: ${{ secrets.EC2_PRIVATE_KEY }} 
            local_path: './build/.'
            remote_path: '/var/www/html/front'
            sftpArgs: '-o ConnectTimeout=5'
        - name: executing remote ssh commands using ssh key
          uses: appleboy/ssh-action@v1.0.0
            host: ${{ secrets.EC2_HOST }}
            username: ${{ secrets.EC2_USERNAME }}
            key: ${{ secrets.EC2_PRIVATE_KEY }}
            port: '22'
            script: |
              cd /var/www/front
              pm2 reload ProjectName --update-env

Step 5 - Deploy your Workflow

Once certain secret keys have been set up, we can go for the deploy nextjs to aws, which is the same as the manual process we previously used.

That's it. We are done with nextjs aws ec2 with these 5 easy steps. 

Happy Coding✌

Frequently Asked Questions

Can Next.js be deployed to S3?

You can master the difficult procedure of setting up a deploy nextjs to aws s3 by following my above steps. This deployment configuration is a great option for hosting static websites since it offers cost-effectiveness, high availability, and simplicity of scaling.

What is the best way to deploy Next.js app?

Using the Vercel platform, which was built by Next. js's developers, is the simplest approach to use the framework in a production setting. Vercel is a serverless platform designed to work with databases, headless content, and hybrid and static applications.

How do I deploy the next JS project on AWS EC2?

You can follow my steps which I mentioned in this blog to successfully deploy your deploy nextjs to aws ec2. 

How to deploy Next.js 14 to AWS?

If you want to auto deploy and auto restart your nextjs14 project with AWS EC2, then you can follow my above-mentioned steps to continue. 


Hello, I’m Sangita, person behind "codegirl", a dedicated web developer. Crafting digital experiences is not just my job; it’s my passion. Let’s build something exceptional together!

Post a Comment

Previous Post Next Post