[Github Actions] 프로젝트에 github Actions 적용

Git 대표이미지

 

접근 (요약)

업무에서 Web Service 배포 방식에 변화(→ Github Actions)를 도모했다.

이러한 변화를 개인 프로젝트에도 적용하고자 Nextjs 프로젝트 + Github Action을 적용한 샘플을 기록한다.

(각 단계를 Step별로 작성해본다.)

 

  0. Create Project (Terminal) → 하단에 게시글 첨부

- 경로 이동

- Project App 생성

- Open Project & Branch 변경 (main → master)

- 4. 원격저장소 생성(Web) & Push (로컬 → 원격저장소) 

 

  1. Github Action 적용

- (Web) Actions > set up a workflow yourself

- 

 

---

방법

   1. Github Action 적용

1. (Web) Actions > set up a workflow yourself

 

 

2. root 경로에 ./github/workflows/OOO.yml 파일생성

 

3. 기본 Build code 작성

name: Test Build

on:
  push:
    branches:
      - master
      - develop
  pull_request:
    branches:
      - master
      - develop

jobs:
  build:
    runs-on: ubuntu-latest
#   직접 서버 운영시 (자체 호스팅)
#   runs-on: action-runner-dev-linux

    steps:
      # Repo 체크아웃
      - name: checkout repository
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      # package manager를 자동으로 감지하는 단계
      - name: Detect package manager
        id: detect-package-manager
        run: |
          if [ -f "${{ github.workspace }}/package.json" ]; then
            echo "manager=npm" >> $GITHUB_OUTPUT
            echo "command=ci" >> $GITHUB_OUTPUT
            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
            exit 0
          elif [ -f "${{ github.workspace }}/yarn.lock" ]; then
            echo "manager=yarn" >> $GITHUB_OUTPUT
            echo "command=install" >> $GITHUB_OUTPUT
            echo "runner=yarn" >> $GITHUB_OUTPUT
            exit 0
          else
            echo "Unable to determine package manager" >&2
            exit 1
          fi

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18
#          cache: ${{ steps.detect-package-manager.outputs.manager }}

      - name: Install dependencies
        run: npm install
        # 만일, 프로젝트 경로 Depth가 한 층 더 들어간다면, 아래처럼
        # Detect package manager의 -f package.json 찾는 경로 또한 {{.}}/visualization/package.json 
        # working-directory: ./visualization 

      - name: Run ESLint
        run: npm run lint

# TODO : Jest Test 코드 추가
#      - name: Run Tests
#        run: npm test

      - name: Build Next.js
        run: npm run build

 

action/checkout@v4 안정화버전

4. 로컬저장소 master 브랜치에서 원격 저장소 pull

 

 

 

 

 

 

[ 참고 ]

[Github] 프로젝트 생성 (로컬 저장소에서 원격 저장소 Push)