Final NextJs 13 CICD Gitlab Config

NEXTJS, GITLAB

To deploy a Next.js project from GitLab to your own server using Continuous Integration/Continuous Deployment (CI/CD), you can follow these general steps:

Set Up Your Server:

Ensure you have a server where you want to deploy your Next.js application. This server should have Node.js and npm (Node Package Manager) installed.

Then create an access key. Create a private key for access

ssh-keygen -m pem 
cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys

Create a GitLab Repository:

If you haven’t already, create a GitLab repository for your Next.js project. Push your project code to this repository. Add ID_RSA Variable to your repository.

Storing the Private Key in a GitLab CI/CD Variable

cat ~/.ssh/id_rsa

note: Copy the output to your clipboard. Make sure to add a linebreak after -----END RSA PRIVATE KEY-----

Now navigate to Settings > CI / CD > Variables in your GitLab project and click Add Variable. Fill out the form as follows:

Now navigate to Settings > CI / CD > Variables in your GitLab project and click Add Variable. Fill out the form as follows:

Key: ID_RSA
Value: Paste your SSH private key from your clipboard (including a line break at the end).
Type: File
Environment Scope: All (default)
Protect variable: Checked
Mask variable: Unchecked

Set Up CI/CD Pipeline:

GitLab offers built-in CI/CD capabilities. Create a .gitlab-ci.yml file in the root of your repository to define your CI/CD pipeline. Here’s an example .gitlab-ci.yml for a Next.js project: (Completed .gitlab-ci.yml)

default:
  image: node:16.20.1

stages:
  - stage
  - deploy

variables:
  deploy_server: "YOUR SERVER IP ADDRESS"
  artifact_name: "client.tar.gz"

cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - node_modules/
    - .next/cache/

stage:
  stage: stage
  only:
    - main
  script:
    - chmod 600 $ID_RSA
    - ssh -i $ID_RSA -o StrictHostKeyChecking=no root@$deploy_server "ls"
    - npm install yarn
    - yarn install
    - yarn test
    - yarn build
    - tar -czvf $artifact_name .next
    - scp -i $ID_RSA -o StrictHostKeyChecking=no $artifact_name root@$deploy_server:/tmp
  when: on_success

deploy:
  stage: deploy
  only:
    - /v[1-9].*[^-a-z]/
  script:
    - chmod 600 $ID_RSA
    - ssh -i $ID_RSA -o StrictHostKeyChecking=no root@$deploy_server "ls"
    - npm install yarn
    - yarn install
    - yarn test
    - yarn build
    - tar -czvf $artifact_name .next
    - scp -i $ID_RSA -o StrictHostKeyChecking=no $artifact_name root@$deploy_server:/tmp
  when: on_success

This command only for Test connection (can remove it):

ssh -i $ID_RSA -o StrictHostKeyChecking=no root@$deploy_server "ls"

Maybe have these problems:

1- Gitlab runner ssh private key 644 file permission error or ssh “permissions are too open”

Solution: chmod 600 $ID_RSA

2- No Cache Detected

Solution:

cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - node_modules/
    - .next/cache/

Now on your server for test:

tar xzvf client.tar.gz
npx next start -p 8000

Regard :)

Links: https://www.digitalocean.com/community/tutorials/how-to-set-up-a-continuous-deployment-pipeline-with-gitlab-ci-cd-on-ubuntu-18-04#step-5-storing-the-private-key-in-a-gitlab-ci-cd-variable