러아니푸의 기록

Github Actions란?

GitHub에서 제공하는 자동화 도구로, 코드를 빌드하거나 테스트하고, 배포 또는 다양한 작업을 자동으로 수행할 수 있도록 합니다.

Actions는 조직 및 개인별로 매달 레파지토리 통합 실행 시간 2000분을 무료로 제공합니다.

스토리지는 500MB를 제공한다고 하는데, 오늘은 크론잡만 돌릴거라 신경쓰지 않겠습니다.

금액적인 부분은 아래 공식 페이지에서 확인해주세요.

https://docs.github.com/ko/billing/managing-billing-for-your-products/managing-billing-for-github-actions/about-billing-for-github-actions

1.  프로젝트에 폴더 및 파일 생성

.github/workflows까지 폴더를 만들고 .yml 파일을 생성합니다.

GitHub Actions는 .github/workflows 폴더 아래에 있는 .yml, .yaml 파일을 읽고 조건에 따라 실행합니다.

그러니 폴더 위치와 이름은 정확하게 입력해주시고 파일명은 원하시는대로 작성하셔도 무방합니다.

2. 크론잡 실행 코드 작성

# Actions workflows에 표시될 이름
name: Scheduled Job

on:
  schedule:
    # 매일 자정(밤 12시)마다 프로그램 실행
    - cron: "0 15 * * *"

jobs:
  run-scheduled-task:
    runs-on: ubuntu-latest
    steps:
      # Repository 코드 체크아웃
      - name: Checkout code
        uses: actions/checkout@v3

      # Node.js 프로젝트 설정
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "20.11.1"

      # 의존성 모듈 설치 명령어 (npm install 써도 무방)
      - name: Install dependencies
        run: npm ci
        
      # 프로그램 실행 명령어
      - name: Run scheduled script
        run: npm run start

작성한 코드를 깃에 올려주면 GitHub Actions가 자동으로 파일을 읽고 조건에 맞게 실행됩니다.

3. Actions 실행 결과 확인

Actions 탭으로 이동하면 실행된 결과를 확인할 수 있습니다.

schedule.yml 파일에서 Actions workflows에 표시될 이름을 설정했었죠.

저는 간단하게 Scheduled Job이라는 이름으로 작성했는데, 다른 액션과 구분이 쉽고 이해하기 편한 이름으로 설정해주세요.

실행 결과를 보니 실행 시간이 30초 정도 걸렸다고 나옵니다.
실제 로컬에서 돌릴때는 10초 이내로 끝났던 작업인데 시간이 더 걸렸습니다.

그래서 실행 결과를 상세 결과를 확인하기 위해 눌러서 들어가봤습니다.

프로그램 실행 이전에 의존성 모듈 설치부터 작업하는 부분이 많았나봅니다.

Run scheduled script가 로컬에서 npm run start로 프로그램을 실행하는 부분입니다.

8초정도 걸린걸 보니 로컬에서 돌릴때의 시간이랑 비슷했습니다.

그래도 실행 결과 요약에 표시된 시간은 총 19초인데 27초로 계산되어있네요.

보여주지 않는 부분에서 시간을 더욱 측정하는건지 오차는 조금 있어보입니다.

실행시간은 금액적인 부분과도 직결되어있기 때문에 꾸준한 모니터링을 해주는것이 좋겠습니다.

📜  문제 발생 배경

예시 프로젝트 구조

/project-root
├── /src
└── /sub_project
    └── index.ts -> save()

- src는 svelte 기본 프로젝트

- sub_project의 index.ts에서 firebase로 데이터를 저장하는 함수(save()) 보유

- sub_project는 스케쥴러로 돌리려고 따로 만든 프로젝트라서 단일로 실행하면 잘 되는 상태

이 상태에서 save() 함수를 svelte 프로젝트인 src 내부 컴포넌트에서 실행하면, 아래와 같은 오류가 발생하였습니다.

TypeError: Class extends value undefined is not a constructor or null
    at node_modules/firebase-admin/lib/utils/api-request.js (chunk-L7KXJSNS.js?v=f0a29e65:4034:59)
    at __require2 (chunk-7RP6IU3L.js?v=f0a29e65:16:50)
    at node_modules/firebase-admin/lib/app/credential-internal.js (chunk-L7KXJSNS.js?v=f0a29e65:25858:25)
    at __require2 (chunk-7RP6IU3L.js?v=f0a29e65:16:50)
    at node_modules/firebase-admin/lib/utils/index.js (chunk-L7KXJSNS.js?v=f0a29e65:26540:33)
    at __require2 (chunk-7RP6IU3L.js?v=f0a29e65:16:50)
    at node_modules/firebase-admin/lib/app/index.js (chunk-L7KXJSNS.js?v=f0a29e65:27012:19)
    at __require2 (chunk-7RP6IU3L.js?v=f0a29e65:16:50)
    at firebase-admin_app.js?v=f0a29e65:9:26

다른 문서들에서는 firebase의 앱 초기화가 중복되는 문제일 확률이 높다던데 중복되지 않게 처리하고 있어서 다른 근본적인 원인을 찾느라 헤매고 있었습니다.

💊 원인 분석 및 해결 방법

아무리 검토해 봐도 firebase 연결 상태나 초기화 중복 문제는 아니었기에 다른 원인을 생각해 봤습니다.

sub_project만 단일적으로 실행하면 잘 되는데, src에서는 sub_project 쪽 파일을 서버로 인식하지 않는다는 느낌을 받았습니다.

sub_project는 전체가 서버쪽 코드로 이루어져 있는데 svelte 쪽에서 실행하려 할 때는 클라이언트에서 서버 코드를 실행하려고 하니 firebase 오류가 나는 것이였습니다.

해결방법

import type { RequestEvent } from '@sveltejs/kit';
import { json } from '@sveltejs/kit';
import { save } from '$root/sub_project/index.ts';

export async function GET(event: RequestEvent) {
  const userID = event.url.searchParams.get('user_id') ?? '';
  const result = await save(userID);

  return json({ ...result });
}

sub_project 함수를 +server.ts 파일로 불러와서 사용할 수 있도록 처리하였더니 오류가 깔끔하게 해결되었습니다.

생각해보면 당연한 문제인데 파이어베이스 연동 오류라고만 생각해서 조금 헤매게 되었던 것 같습니다.

앞으로도 프레임워크의 동작 방식과 구조를 잘 이해하고 되새기며 개발해야겠습니다.

1. Google Cloud 프로젝트 생성

링크로 접속합니다.

https://console.cloud.google.com/freetrial/signup/tos?hl=ko

서비스 약관에 동의합니다.

계좌 유형 및 주소를 입력합니다.

본인 실명 및 주민번호 전화번호 등을 입력합니다.

카드 번호를 입력합니다.

마스터카드 및 visa 카드가 아니여도 등록 가능합니다.

인증을 마치면 프로젝트가 생성되며 크레딧이 들어옵니다.

• 대략 40만원 정도 들어오고 3개월동안 사용할 수 있는 크레딧입니다.
• 무료체험 기간이 종료되어도 계정을 활성화 시키지 않으면 비용이 발생하지 않습니다.

2. 라이브러리 설정

API 및 서비스 > 라이브러리 로 이동합니다.

검색창에 vision을 입력하고 Cloud Vision API를 클릭하고 사용 버튼을 클릭합니다.

3. API 키 생성

사용자 인증 정보 > 사용자 인증 정보 만들기 > API 키 를 클릭하여 새로운 API 키를 생성합니다.

4. 이미지 속성 감지 API 실행

import dotenv from 'dotenv';
import fetch from 'node-fetch';

dotenv.config();

export async function googleImageDetection(imgURI) {
  const apiKey = process.env.GOOGLE_CLOUD_API_KEY;

  try {
    const response = await fetch(`https://vision.googleapis.com/v1/images:annotate?key=${apiKey}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        requests: [
          {
            image: {
              source: {
                imageUri: imgURI,
              },
            },
            features: [
              {
                type: 'IMAGE_PROPERTIES',
                maxResults: 10,
              },
            ],
          },
        ],
      }),
    });

    const data = await response.json();
    if (response.ok) {
      const colors = data.responses[0].imagePropertiesAnnotation.dominantColors.colors;
      console.log(colors);
      return colors;
    } else {
      throw new Error(data.error.message);
    }
  } catch (error) {
    console.error('Error detecting image properties:', error);
  }
}

간단한 테스트를 위해 이미지 속성 감지 API를 실행해보았습니다.

클라이언트 측에서는 보안상의 이유로 실행할 수 없기 때문에 서버측에서 실행되도록 세팅하셔야 합니다.

• GOOGLE_CLOUD_API_KEY : 발급받았던 API 키를 환경변수로 설정하고 불러옵니다.
• imageUri : 속성을 분석하고싶은 이미지 링크를 전달합니다.
• IMAGE_PROPERTIES : 이미지 관련 API 기능 중에서 이미지 속성 감지가 실행될 수 있도록 해당 타입을 지정합니다.
• maxResults : 속성 결과물을 최대 몇개까지 추출할지 설정합니다. (10개로 설정해도 그 이하로 추출될 수 있습니다)

이미지 속성 감지 결과가 콘솔에 잘 출력되었습니다.

속성 결과물을 최대 10개 이하로 설정하였는데, 색상이 많지 않은 이미지라 그런지 4개만 추출되었습니다.

https://cloud.google.com/vision/docs/detecting-properties?hl=ko#vision_image_property_detection-nodejs

https://developers.google.com/explorer-help/code-samples?hl=ko#node.js

1. 결제정보 추가 (포인트 충전)

결제 정보를 추가합니다.

visa 또는 master 카드 등 해외 결제가 가능한 카드만 등록 가능합니다. (일반 체크카드 등록시 오류)

최소 충전금액이 5$로 설정되어있어서 최소 금액으로 충전 후 카드 등록을 완료할 수 있었습니다.

크레딧이 일정 금액 미만으로 떨어질 경우 자동 충전도 가능하도록 설정할 수 있습니다.

2. API 키 발급

‘+ Create new secret key’를 클릭합니다.

이름 및 권한 설정 후 키를 생성합니다.

발급받은 키는 이 팝업 이후로는 확인할 수 없기 때문에 복사후 안전한 곳에 저장해두시길 권장드립니다.

3. 라이브러리 설치

npm install --save openai
# or
yarn add openai

OpenAI 라이브러리를 설치합니다.

4. 텍스트 생성 API 사용해보기

import OpenAI from "openai";

const openai = new OpenAI({
  apiKey: process.env.CHATGPT_API_KEY
});

async function main() {
  const completion = await openai.chat.completions.create({
    messages: [
      {
        role: "system",
        content: "You are a helpful assistant designed to output JSON.",
      },
      { role: "user", content: "Who won the world series in 2020?" },
    ],
    model: "gpt-3.5-turbo-0125",
    response_format: { type: "json_object" },
  });
  console.log(completion.choices[0].message.content);
}

main();

간단한 테스트를 위해 json 형식으로 답변해주는 모드를 사용해보았습니다.

• CHATGPT_API_KEY : 환경변수로 ChatGPT API 키를 설정해줍니다. (.env 파일에 세팅)
• role(system) : 모델에게 역할을 지정하거나 대화 맥락을 지정해줄 수 있습니다.
• role(user) : 모델에게 질문할 내용을 입력할 수 있습니다.
• response_format : { type: "json_object" }으로 설정하여 답변을 json 형식으로 제한합니다.
• model : 모델은 여러가지가 있으니 프로젝트에 맞는 조건의 모델을 선택하시길 바랍니다.

예제 실행 결과를 출력해보았더니 json 형식으로 잘 들어오는것을 확인할 수 있었습니다.

1. 로고 및 파비콘을 생성합니다.

저는 클립스튜디오를 사용하여 직접 그려주었습니다. (기본 로고, 다크모드 로고, favicon 등)

더 빠른 느낌을 주기위해 'JS' 부분을 달리는 사람의 모습으로 표현하고 싶었습니다.

2. 프로젝트에 이미지 파일 추가

public 아래로 생성한 이미지들을 넣어줍니다.

저는 public > images 폴더에 이미지를 넣었습니다.

3. 파비콘 적용하기

metadata에서 icons로 favicon 이미지를 연결합니다.

정상적으로 적용되었습니다만, 나중에 더 눈에 띄는 이미지로 교체할까 합니다.

4. 로고 적용하기

로고 이미지를 헤더 또는 원하는 위치에서 이미지 태그로 불러옵니다.

다크모드 설정에 따라 다르게 나오는 화면을 볼 수 있습니다.

📜 속도 이슈 발생

local에서는 1초를 넘는 경우를 본적이 없는데, 배포후 응답시간이 거의 2초까지 늘어나서 무슨 문제가 있다고 생각했습니다.

(캡처본에는 없지만 3초대도 본적이 있었습니다)

💊 원인 분석 및 해결 방법

아직 개발중인 프로젝트라서 vercel로 간단하게 배포하였는데 vercel 문제인가 싶어서 찾아봤더니 Region 설정이 문제였습니다.

데이터베이스의 Region은 서울로 되어있는데 워싱턴D.C(기본설정)에서 요청하고있으니.. 느릴수밖에 없었습니다.

저는 데이터베이스 위치와 동일하게 서울로 변경해주었습니다.

변경후 응답 속도가 평균 3배이상 빨라진것을 확인할 수 있습니다.

배포 연동시 Region 선택지가 없었어서 놓쳤던 부분이였습니다.

배포 또는 DB 연동등 완료후에 setting을 꼼꼼하게 확인해 보는 습관을 들여야겠습니다.