들어가기 전에

Github Actions는 Github에서 제공하는 CI/CD 서비스로, 코드를 빌드하고 테스트하며 배포하는 일련의 과정을 자동화할 수 있습니다. Github Actions를 사용하면 코드 변경 사항이 발생할 때마다 자동으로 테스트하고 배포할 수 있어, 개발자들이 더 효율적으로 협업할 수 있습니다.

Secrets는 Github Actions에서 사용하는 환경 변수로, Github 저장소에 노출되지 않도록 안전하게 관리할 수 있습니다. Secrets를 사용하면 API 키, 패스워드 등 민감한 정보를 코드에 직접 노출하지 않고, 안전하게 관리할 수 있습니다.

Github Actions 설정

먼저 Github Actions를 설정해보겠습니다.

github actions

Github 저장소로 이동한 후, 상단 메뉴의 Actions를 클릭합니다.
Set up this workflow 버튼을 클릭하여 새로운 Workflow를 생성합니다.
.github/workflows 폴더에 main.yml 파일을 생성합니다. (next.js 프로젝트라면 보통 build.yml로 생성합니다.)
다음과 같이 Workflow를 설정합니다. (예시)

.github/workflows/main.yml

name: CI/CD with Github Actions
 
on:
  push:
    branches:
      - main
 
jobs:
  build:
    runs-on: ubuntu-latest
 
    steps:
    - uses: actions/checkout@v2
 
    - name: Install dependencies
      run: npm install
 
    - name: Build
      run: npm run build
 
    - name: Deploy
      run: |
        echo "Deploying..."

name: Workflow의 이름을 설정합니다.
on: Workflow가 실행될 조건을 설정합니다. 여기서는 main 브랜치에 push될 때 실행되도록 설정했습니다.
jobs: Workflow의 작업을 설정합니다.
runs-on: 작업이 실행될 환경을 설정합니다. 여기서는 ubuntu-latest로 설정했습니다.
steps: 작업의 단계를 설정합니다.
uses: 사용할 Action을 설정합니다. 여기서는 actions/checkout@v2를 사용하여 코드를 체크아웃했습니다.
run: 실행할 명령어를 설정합니다. 여기서는 npm install, npm run build 등을 실행했습니다.
주의 : yml 파일은 줄마다 들여쓰기를 해야 합니다. 들여쓰기가 잘못되면 Workflow가 동작하지 않을 수 있습니다.

참고로 현재는 Deploy에 관한 내용이 없습니다. 또한 아주 간단한 구조에 대한 예시이므로, 실제 프로젝트에 맞게 수정하셔야 합니다.

설정이 완료되면 Start commit 버튼을 클릭하여 커밋합니다.
Actions 탭으로 이동하여 Workflow가 정상적으로 동작하는지 확인합니다.

이제 Github Actions를 설정했습니다.

Build Fail

build fail

이전 글에서 .env를 사용하여 Firebase 서비스 계정 키를 관리했습니다.

.env

NEXT_PUBLIC_FIREBASE_TYPE=어쩌구
NEXT_PUBLIC_FIREBASE_PROJECT_ID=저쩌구
NEXT_PUBLIC_FIREBASE_PRIVATE_KEY_ID=
NEXT_PUBLIC_FIREBASE_PRIVATE_KEY=
NEXT_PUBLIC_FIREBASE_CLIENT_EMAIL=
NEXT_PUBLIC_FIREBASE_CLIENT_ID=
NEXT_PUBLIC_FIREBASE_AUTH_URI=
NEXT_PUBLIC_FIREBASE_TOKEN_URI=
NEXT_PUBLIC_FIREBASE_AUTH_PROVIDER_CERT_URL=
NEXT_PUBLIC_FIREBASE_CLIENT_CERT_URL=
NEXT_PUBLIC_FIREBASE_UNIVERSE_DOMAIN=

하지만 .env 파일은 local에서만 사용되는 환경 변수 파일이므로, Github Actions에서는 사용할 수 없습니다.

그래서 Build가 실패하게 됩니다.

Secrets 설정

이제 Secrets를 설정해보겠습니다.

secrets

Github 저장소로 이동한 후, 상단 메뉴의 Settings를 클릭합니다.
좌측 메뉴에서 Secrets and variables 내 Actions를 클릭합니다.
New repository secret 버튼을 클릭하여 새로운 Secret을 추가합니다.
Name에 환경변수를 입력하고, Value에 Firebase 서비스 계정 키를 입력합니다. (Github Actions는 NEXT_PUBLIC_을 붙일 필요가 없습니다.)
Add secret 버튼을 클릭하여 Secret을 추가합니다.

이제 Secrets를 설정했습니다.

Secrets 사용하기

이제 Workflow에서 Secrets를 사용해보겠습니다.

.github/workflows/main.yml

jobs:
  build:
    runs-on: ubuntu-latest
 
    steps:
    - uses: actions/checkout@v2
    - name: Set environment variables
        run: |
          echo "FIREBASE_PRIVATE_KEY=${{ secrets.FIREBASE_PRIVATE_KEY }}" >> $GITHUB_ENV
          echo "FIREBASE_CLIENT_EMAIL=${{ secrets.FIREBASE_CLIENT_EMAIL }}" >> $GITHUB_ENV
          echo "FIREBASE_PROJECT_ID=${{ secrets.FIREBASE_PROJECT_ID }}" >> $GITHUB_ENV

위와 같이 steps에 Secrets를 사용할 환경 변수를 설정하면, Workflow에서 Secrets를 사용할 수 있습니다.