Automating Next.js Application Deployment with GitHub Actions

Are you ready to supercharge your Next.js application deployment? With GitHub Actions, the process becomes a breeze, and I'm here to guide you through it step by step. Even if you're new to this, don't worry! We'll make it easy and fun.

Step 1: Setting Up Secrets

The first thing you need to do is head over to your GitHub repository. From there, navigate to "Secrets and Variables" under the "Actions" tab. We'll set up three secrets that will help automate our deployment:

1. HOST: This is your server's IP address.
2. USERNAME: Enter your server's username.
3. SSH_PRIVATE_KEY: See step 2 and 3

Don't fret; it's easier than it sounds. These secrets will allow GitHub Actions to securely communicate with your server.

Step 2: Generating an SSH Key

Now, let's generate an SSH key. SSH keys are like digital fingerprints that help authenticate your server and GitHub. Open your terminal and follow these simple commands:

cd ~/.ssh
ssh-keygen -t rsa -b 4096 -C "[e-mail]"

• The -t flag is for specifying type of key. Here we are generating RSA key
  • The -b flag sets the key length, which determines the key's strength. Here we are generating 4096 bit key
  • The -c flag is is used to add a comment or label to the key. It's not required but can be helpful for identifying the key's purpose or owner.

You'll be prompted to name your key. Let's call it github_action and you can leave the passphrase empty.

Step 3: Adding the Public Key to GitHub

Run ls, and you'll see two newly generated files: github_action and github_action.pub. Run:

cat github_action

This will display your private key. Copy the content and head back to your repository settings, specifically "Secrets and Variables" under "Actions." Add the private key content to the SSH_PRIVATE_KEY secret.

Step 4: Adding the Private Key to GitHub Secrets

We're almost there!
Back in your terminal, let's copy the public key:

cat github_action.pub

Now, go to your GitHub repository settings and select "SSH and GPG Keys" from the left navigation bar. Click "New SSH Key" and paste your public key. This step allows your server to communicate securely with your GitHub repository.

Step 5: Authorizing Your Public Key on the Server

Now, let's make sure your server recognizes your public key. Run this command on your server:

cat github_action.pub >> authorized_keys

This command appends your public key to the list of authorized keys on your server, granting access for automated deployments.

Step 6: Creating GitHub Actions Workflow

The final step is to automate the deployment process. Create a GitHub Actions workflow by adding an action YAML file inside the .github/workflows directory in your repository.

Specify the event name as "push," define the branch name, and outline the action steps in your workflow script. This tells GitHub Actions when to trigger automatic deployments.

Here is an example GitHub Action for automating Next.js deployment. Customize with your repository name, branch name, application directory, and PM2 service name on your server

name: Deployment Workflow

# Trigger this workflow on pushes to the specified branch
on:
  push:
    branches:
      - your-branch-name

jobs:
  deploy:
    runs-on: ubuntu-latest

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

      - name: Install dependencies
        run: npm install

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

      - name: SSH Deploy
        # Use the 'appleboy/ssh-action' action for SSH deployment
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.HOST }} # Your server's IP address
          username: ${{ secrets.USERNAME }} # Your server's username
          key: ${{ secrets.SSH_PRIVATE_KEY }} # Your server's SSH private key
          script: |
            cd /path/to/your/application/directory # Specify the path to your app directory on the server
            git pull
            npm install
            npm run build
            pm2 restart your-pm2-service-name # Replace with your PM2 service name

And that's it! 🚀

From now on, whenever you push changes to your specified branch, GitHub Actions will automatically kick off the deployment process.
Happy coding! ☕

Comments

[Graeme Fulton]

thanks for posting that, helped me get set up! Over here I have written up how I self host NextJS with a blue green deployment workflow - linked your post in the relevant section!

[Hendi Santika]

Nice article Graeme

[Muhammad Azamuddin]

Why there is npm install & build in the github action step, but then you SSH and doing the exact same thing, npm install & build the app in the server.

Does it means, that actually the build happens on the our server, and we don't need to actually add npm install & build on the github action?

[xyba]

I am asking this myself too. Maybe it's to test the code in the action itself before it makes it to the server.

[xyba]

Nvm, I am fairly sure it's because otherwise he couldn't use appleboy/ssh-action@master

[Ragavendra Nagraj]

Thanks a ton! appleboy/ssh-action@master helped a lot vs the actions runner which took about 700 mb and never went past npm i

[ARINZE CHRIS HILLS]

What exactly is this post about. this is a total waste of time. no clear steps