Home

Home

Welcome to the CI/CD Setup for Next.js Application Wiki. This documentation covers the comprehensive setup of CI/CD pipelines using GitHub Actions, including automated build, test, lint, and deployment processes. Additionally, it outlines the branching strategy and provides detailed steps for deployment and DNS configuration.

Pages

• CI/CD Pipeline Setup
• Deployment Process
• Branching Strategy
• Maintenance

---

CI/CD Pipeline Setup

Introduction

This page provides an overview and step-by-step guide for setting up a CI/CD pipeline for a Next.js boilerplate application using GitHub Actions. The pipeline includes Dockerizing the application, hosting it on an Ubuntu server, and using NGINX for load balancing and Certbot for SSL maintenance.

GitHub Actions Workflow

Create a .github/workflows/ci-cd.yml file in your repository with the following content:

name: Development CI/CD Pipeline

on:
  push:
    branches:
      - dev
    paths-ignore:
      - .github/workflows/**

concurrency:
  group: ${{ github.ref }}
  cancel-in-progress: true

jobs:
  build:
    runs-on: ubuntu-latest

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

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20'

      - name: Cache pnpm modules
        uses: actions/cache@v3
        with:
          path: ~/.pnpm-store
          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-

      - name: Install pnpm
        uses: pnpm/action-setup@v4
        with:
          version: 9

      - name: Install dependencies
        run: pnpm install

      - name: Lint code
        run: pnpm lint

      - name: Build project
        run: pnpm build

      - name: Run tests
        run: pnpm run test:ci

  deploy:
    runs-on: ubuntu-latest
    needs: build

    steps:
      - name: Deploy to dev environment
        uses: appleboy/ssh-action@v1.0.3
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          password: ${{ secrets.PASSWORD }}
          script: |
            ./deploy_dev.sh

Secrets Configuration

In your GitHub repository, navigate to Settings > Secrets and add the following secrets:

• HOST: Your server's IP address or hostname.
• USERNAME: Your SSH username.
• PASSWORD: Your SSH password.

Running Tests

Ensure all existing unit and integration tests are executed against the build to maintain code quality.

Building the Application

The pnpm build command will build the Next.js application, preparing it for deployment.

Deployment Steps

The deployment process uses an SSH action to run a deployment script (deploy_dev.sh) on the server. The script handles Dockerizing the application, setting up NGINX for load balancing, and configuring Certbot for SSL.

---

Deployment Process

DNS Configuration

1. Configure DNS Records:
   • We set up DNS records for dev.domain-name.com and domain.com to point to theserver.

Accessing Deployed Projects

• Development Environment: Accessible at http://dev.domain-name.com
• Production Environment: Accessible at http://domain.com

Ensuring Uptime

We planned for 99% uptime by configuring or docker-compose files to set up 2 containers per build, and we use nginx for load balancing. We also plan on monitoring our deployments for any issues and plan to promptly address any issues.

---

Branching Strategy

Development Branch

• Merge code into the dev branch to trigger deployment to the development environment.
• Development deployments are accessible at http://dev.domain-name.com.

Production Branch

• Merge dev into main for production deployment.
• Production deployments are accessible at http://domain.com.

Merging Guidelines

• Ensure all tests pass before merging code.
• Use pull requests to facilitate code reviews and maintain code quality.

---

Maintenance

Regular Updates

• Keep dependencies up-to-date.
• Regularly review and update the CI/CD pipeline configuration.

Troubleshooting

• Monitor GitHub Actions logs for any issues.
• Check server logs for errors.

Best Practices

• Maintain clear and concise documentation.
• Foster collaboration through code reviews and continuous improvement.