Alexandre avatar

How I integrated Github Actions

alexandre-dev

Published: 19 Mar 2024 › Updated: 19 Mar 2024How I integrated Github Actions

How I integrated Github Actions

image.png

Hello peoples !
Today, I will talk more about CI, focusing on GitHub Actions. Two weeks ago, I found it to be an impossible technology, but today I've learned to use CI, and now i know the power of CI.

What is CI/CD ?
It's a cornerstone methodology in modern software engineering aimed at enhancing the speed and quality of application development. Continuous Integration involves the practice of frequently integrating code changes into a central repository. This approach triggers automated builds and tests to verify that the new code doesn't break any existing functionality. Continuous Deployment automates the process of pushing applications to production or staging environments, allowing for swift and seamless delivery of features to users. By embracing CI/CD, development teams cultivate an agile environment that supports more efficient and dependable updates and bug fixes.

When i use it ?
Personally, I use CI and CD to automatically build my Node.js website and deploy it on my server. This saves me a lot of time. Without it, the process of building, connecting to the server, manually editing the package.yml, moving all files, installing dependencies, starting the app, etc., would take a lot of time. I really love GitHub Actions because it's very easy to set up.

A exemple of CI/CD used by me
A little explanation of that YAML code. In GitHub Actions, we must specify which branch is triggered; in my case, it's all branches, indicated by **. After that, we need to define the "steps." These are the actions executed to edit files, compile something, run a build, install dependencies, and a lot of other actions.

  1. The first step is to define with which OS the build is launched. (runs-on: ubuntu-latest
  2. Give access to our code to github (- uses: actions/checkout@v2)
  3. Create our steps (with bash commands or defined actions)
  4. Add deploy event, personally i chose to deploy on my server with SSH
name: Build and Deploy

on:
  push:
    branches:
      - '**'

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '20'

      - name: Cache node modules and build artifacts
        uses: actions/cache@v4
        with:
          path: |
            ~/.npm
            ${{ github.workspace }}/.next/cache
          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
          restore-keys: |
            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-

      - name: Install Dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Change Port for Next.js Start Script
        run: |
          sed -i 's/"start": "next start"/"start": "next start -p 4001"/g' package.json

      - uses: actions/upload-artifact@v2
        with:
          name: build-artifacts
          path: |
            .next
            public
            prisma
            src
            next.config.mjs
            package.json
            next-env.d.ts
            types.d.ts

  deploy:
    runs-on: ubuntu-latest
    needs: build
    if: github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v2

      - name: Deploy to Server
        env:
          SERVER: ${{ secrets.SERVER }}
          USERNAME: ${{ secrets.USERNAME }}
          TARGET_DIR: ${{ secrets.TARGET_DIR }}
          KEY: ${{ secrets.KEY }}
        run: |
          scp -i $KEY-r ./build $USERNAME@$SERVER:$TARGET_DIR

Thank you very much for reading, I have not detailed the principle of CI/CD because it would take a lot more time, it is mainly for informative purposes and to encourage people to use this type of tool which saves a lot of time.
Have a nice day

Leave How I integrated Github Actions to:

Written by

Read more #leofinance posts


Best Posts From Alexandre

We have not curated any of alexandre-dev's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.

More Posts From Alexandre