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:
- HOST: This is your server's IP address.
- USERNAME: Enter your server's username.
- 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 "youremail@email.com"
- 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! β
Top comments (7)
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!
Nice article Graeme
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?
I am asking this myself too. Maybe it's to test the code in the action itself before it makes it to the server.
Nvm, I am fairly sure it's because otherwise he couldn't use appleboy/ssh-action@master
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
What exactly is this post about. this is a total waste of time. no clear steps