logo

CI/CD with GitHub Actions for Next.js

Published on
FullstackCI/CDDevOpsNext.js

Next.js 14 CI/CD with GitHub Actions

This is the practical guide for Next.js 14 Web application CI/CD with GitHub Actions for xfactor.biz.

1. Add .env variables on the GitHub Actions secrets.

Actions secrets

2. Add Action Runner for VPS.

self-hosted runner for VPS.

Action Runner

3. Config the self-hosted runner.

Runner Config
  • Choose the VPS image and architecture.
  • Follow the directions to download, configure and use the self-hosted runners.

4. Install action runner on VPS and Run ad deamon service.

cd action-runners
sudo ./svc.sh install
sudo ./svc.sh start

5. Add node.js.yml on workflows.

name: xfactor.biz

on:
  push:
    branches: [ "master" ]
  pull_request:
    branches: [ "master" ]

jobs:
  build:

    runs-on: self-hosted

    strategy:
      matrix:
        node-version: [20.14.0]
    env:
      NEXT_WEBSITE_URL: ${{secrets.NEXT_WEBSITE_URL}}
    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm install -g yarn
    - run: yarn install --immutable
    - run: yarn build
    - name: Change Directory
      run: cd /home/xfactor/actions-runner/_work/xfactor.biz/xfactor.biz
    - run: pm2 restart 0

6. Options

  • Run pm2 with yarn
pm2 start "yarn serve" --name xfactor.biz