Tutorials

Next.js

How to deploy Next.js website using GitHub Actions.

How to deploy Next.js website using GitHub Actions.

Steps

Create a Next.js project

Terminal
npx create-next-app@latest

Refer Next.js Docs for more info.

Initialize a Github repository

Terminal
git init

Commit a Dockerfile to your Github repository

Terminal
docker init

Create a Github action workflow

Workflow (.github/workflows/ci.yaml)
name: ci-web

on:
  push:
    branches:
      - "main"

permissions:
  contents: read
  packages: write

jobs:
  docker:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Set up QEMU
        uses: docker/setup-qemu-action@v3

      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3

      - name: Login to GitHub Container Registry
        uses: docker/login-action@v3
        with:
          registry: ghcr.io
          username: ${{ github.repository_owner }}
          password: ${{ secrets.GITHUB_TOKEN }}

        # Load Environment Variables from Github secrets
        # required during build process
      - name: Load Environment Variables
        shell: bash
        working-directory: .
        env:
          ENV: ${{ secrets.ENV }}
        run: |
          echo "$ENV" > .env

      - name: Build and push
        uses: docker/build-push-action@v5
        with:
          context: .
          platforms: linux/amd64
          push: true
          # The tags should be in the following format
          tags: ghcr.io/${{ github.repository_owner }}/${{ github.repository }}:latest

      # This action redeploys the deployment on Pyrite.Cloud
      # Note: This step will fail for your first deployment
      - name: Redeploy Deployment
        uses: PyriteCloud/redeploy-action@main
        with:
          api-key: ${{ secrets.PYRITE_API_KEY }}
          deployment-id: ${{ secrets.PYRITE_DEPLOYMENT_ID }}

Refrences

GitHub Repositoy