How To Set Up Auto Deploy And Auto Restart For Next Js On AWS EC2 Using GitHub Action

In today's fast-paced development environment, automating deployment processes is crucial for efficiency, consistency, and reliability. Next.js, with its powerful capabilities for building modern web applications, coupled with the scalability and flexibility of AWS EC2, provides an excellent combination for hosting dynamic websites and applications.

In this tutorial, we'll walk through the process of setting up automatic deployment for a Next.js application on AWS EC2 using GitHub Actions. By automating the deployment process, you can streamline your workflow, reduce manual errors, and ensure that your application is always up-to-date.

Throughout this guide, we'll cover each step in detail, from preparing your Next.js application for deployment to configuring GitHub Actions workflows and setting up your EC2 instance. Whether you're a seasoned developer looking to optimize your deployment process or a newcomer seeking to learn more about deployment automation, this tutorial is designed to provide you with a comprehensive understanding of how to set up auto deploy for Next.js on AWS EC2 using GitHub Actions.


AWS EC2 (Elastic Compute Cloud): EC2 is a web service provided by Amazon Web Services that allows users to rent virtual servers on which they can run their own applications. It's a popular choice for hosting web applications due to its scalability and flexibility.

GitHub Actions: GitHub Actions is a feature of GitHub that allows you to automate tasks directly within your GitHub repository. You can create workflows that are triggered by various events, such as pushes to a repository, and define the steps to be executed as part of those workflows.

Setting up automatic deployment for a Next.js application on AWS EC2 using GitHub Actions involves several steps. Here's a basic guide to get you started:

Set up a GitHub repository

In your GitHub repository, go to "Settings" > "Secrets" and add the private key as EC2_PRIVATE_KEY, and also add EC2_HOST and EC2_USERNAME with your EC2 instance details.

PM2: Installed globally on your EC2 instance (npm install -g pm2).

Configure GitHub Actions:

Set up a new workflow by creating a YAML file in the .github/workflows directory of your repository. For example, .github/workflows/deploy.yml.

Below is a basic example of what your workflow file might look like

  on:

      push:

        branches: [main]

  name: 🚀 Deploy website on push

  jobs:

      web-deploy:

        name: 🎉 Deploy

        runs-on: ubuntu-latest

        steps:

        - name: 🚚 Get latest code

          uses: actions/checkout@v2  

        - name: Use Node.js

          uses: actions/setup-node@v2-beta

          with:

            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

          env:

            CI: false  

        - name: 📂 Sync files

          uses: wlixcc/SFTP-Deploy-Action@v1.2.4

          with:

            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

          with:

            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

Check the Actions tab in your repository to see if the workflow runs successfully.

 

This basic setup should get you started with automatic deployment of your Next.js application to an AWS EC2 instance using GitHub Actions. Depending on your specific requirements and setup, you might need to adjust and expand upon these steps. For example, you might need to set up a reverse proxy (e.g., Nginx) or a process manager (e.g., PM2) on your EC2 instance for running and managing your Next.js application.