Post

[Jobby] 환경 세팅 3

Posted
By AI-chemist97
9 min read

오늘 목표

2편까지는:

  • server/에 Express 서버 띄우고 /, /health, /intro 엔드포인트 만들었고
  • client/에 Vite + React 기본 앱까지 띄워놨다.

3편에서는 Dialogflow랑 진짜로 연결할 준비를 끝내는 것이 목표다:

  • Jobby 전체 구조를 다시 정리하고
  • Google Cloud에서 Jobby용 프로젝트랑 서비스 계정 만들고
  • Dialogflow 에이전트 생성해서 GCP 프로젝트랑 묶은 다음
  • server/config/dev.js에 실제 값까지 채워넣는다.

이 편이 끝나면, 서버에서 Dialogflow API를 부를 수 있는 인증 준비는 끝난다.

Jobby 전체 구조 다시 정리

Jobby는 결국 이렇게 돌게 된다:

  1. 사용자가 웹에서 Jobby에게 질문을 보낸다.
  2. 프론트(React)가 이 질문을 백엔드(Express 서버)로 보낸다.
  3. 서버가 Dialogflow API로 이 질문을 넘긴다.
  4. Dialogflow가 의도/응답을 계산해서 서버로 돌려보낸다.
  5. 서버가 받은 답을 다시 프론트로 보내고, 프론트가 화면에 보여준다.

지금까지는:

  • 2번 중 “프론트에서 서버로 보내기 직전”까지
  • 3번 중 “서버가 어디 있는지(Express, /intro 등)”까지만 만들어 둔 상태.

이제 3번 단계에서 서버 ↔ Dialogflow 사이를 열 준비를 한다.

1. Jobby용 GCP 프로젝트 만들기

먼저 Dialogflow가 묶일 Google Cloud 프로젝트부터 하나 만든다.

  1. Google Cloud Console 접속
    • https://console.cloud.google.com
  2. 상단 프로젝트 선택 드롭다운 열고 “새 프로젝트” 클릭
  3. 이름 예시: jobby-chatbot
    • 조직/결제 계정은 개인 계정 기준 기본값 그대로 둬도 된다.
  4. 만들기 → 생성 완료되면 상단에서 방금 만든 프로젝트가 선택됐는지 확인

이 프로젝트 ID가 나중에 dev.js의 googleProjectID로 들어간다.

2. 서비스 계정 만들기 + 역할 지정

Dialogflow API를 서버에서 호출하려면 서비스 계정이 필요하다.

  1. 왼쪽 메뉴에서
    “IAM & Admin → 서비스 계정(Service Accounts)” 이동
  2. “서비스 계정 만들기” 클릭
    • 서비스 계정 이름 예시: jobby-dialogflow-sa
    • 서비스 계정 ID는 기본 자동 생성 값 그대로 둬도 된다.
  3. 역할(Role) 설정
    • “역할 선택” 클릭 → 검색창에 Dialogflow 입력
    • Dialogflow API Client 같은 권한 선택
  4. 나머지는 기본값으로 두고 생성 완료

이 서비스 계정이 나중에 googleClientEmail, googlePrivateKey로 이어진다.

3. 서비스 계정 키(JSON) 발급

이제 방금 만든 서비스 계정에 대해 키(JSON 파일)를 하나 발급한다.

  1. 방금 만든 서비스 계정 클릭 → “키(Keys)” 탭으로 이동
  2. “키 추가 → 새 키 만들기(Create new key)” 선택
  3. 키 유형: JSON 선택 후 생성
  4. 브라우저로 JSON 파일이 하나 다운로드된다.
    이 파일은 깃에 절대 올리면 안 되고, 로컬에서만 잘 보관한다.

이 JSON 안에 project_id, client_email, private_key 같은 값들이 들어있다.
이게 전부 dev.js로 들어간다.

4. Dialogflow 에이전트 만들기

이제 Dialogflow 쪽에서 에이전트를 생성해서, 방금 만든 GCP 프로젝트와 묶는다.

  1. Dialogflow ES 콘솔 접속
    • https://dialogflow.cloud.google.com
  2. 왼쪽 상단에서 “새 에이전트 만들기” 선택
  3. 설정:
    • 에이전트 이름: 예시로 Jobby-Agent
    • 기본 언어: Korean (ko)
    • 기본 시간대: Asia/Seoul (없으면 Tokyo라도 괜찮음)
    • GCP 프로젝트: 아까 만든 jobby-chatbot 프로젝트 선택
  4. 생성 완료

이제 이 에이전트가 방금 만든 GCP 프로젝트에 연결되었다.
즉, 아까 만든 서비스 계정 JSON을 사용해서 이 에이전트에 요청을 보낼 수 있다.

5. dev.js에 실제 값 채워 넣기

이제 서버 쪽으로 돌아와서, 아까 받은 JSON 파일을 열고 dev.js를 채워 넣는다.

5-1. dev.js 파일 만들기 (이미 있으면 건너뛰기)

server/config/dev.js 파일이 아직 없으면 새로 만든다.

1
2
3

cd server
mkdir -p config
touch config/dev.js

5-2. JSON에서 필요한 값 찾기

다운로드된 JSON 파일을 열어보면 대략 이런 필드들이 들어 있다:

  • "project_id": "jobby-chatbot-xxxxx"
  • "client_email": "jobby-dialogflow-sa@jobby-chatbot-xxxxx.iam.gserviceaccount.com"
  • "private_key": "-----BEGIN PRIVATE KEY-----\n....\n-----END PRIVATE KEY-----\n"

이 세 가지가 핵심이다.

5-3. dev.js 내용 채우기

server/config/dev.js에 이렇게 적는다:

1
2
3
4
5
6
7
8
9

// server/config/dev.js

module.exports = {
  googleProjectID: "jobby-chatbot-xxxxx", // JSON의 project_id
  dialogFlowSessionID: "jobby-session",
  dialogFlowSessionLanguageCode: "ko",
  googleClientEmail: "jobby-dialogflow-sa@jobby-chatbot-xxxxx.iam.gserviceaccount.com", // JSON의 client_email
  googlePrivateKey: "-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n", // JSON의 private_key 전체
};

주의할 점:

  • googleProjectID에는 JSON의 "project_id" 값 그대로 넣기
  • googleClientEmail에는 "client_email" 값 그대로 넣기
  • googlePrivateKey는 "private_key"에 들어있는 전체 문자열을 그대로 복붙하는데,
    줄바꿈 문자(\n)까지 포함된 그대로 넣어야 한다.
  • 이 파일은 .gitignore에 이미 등록해놨기 때문에 깃에는 올라가지 않는다.

지금까지 구조 + 설정 정리

여기까지 하고 나면, Jobby 구조는 이렇게 정리된다:

1
2
3
4
5
6
7
8
9
10
11
12
13

jobby/
├── server/
│   ├── index.js              # Express 서버 + /, /health, /intro
│   ├── config/
│   │   └── dev.js            # Dialogflow / GCP 설정 값 (gitignore 대상)
│   ├── package.json
│   └── package-lock.json
├── client/                   # Vite + React 기본 앱
│   ├── index.html
│   ├── package.json
│   └── src/ ...
├── .gitignore                # dev.js, .env 제외 설정 포함
└── README.md (예정)

1편: 폴더 구조 + .gitignore
2편: 서버/클라 뼈대
3편: Google Cloud + Dialogflow + dev.js 설정까지 완료.

이제 남은 건, 이 설정을 실제로 사용해서 서버에서 Dialogflow API를 호출하는 코드를 붙이는 것이다.

오늘 실제로 한 작업 (로그)

  • Google Cloud Console에서 Jobby용 GCP 프로젝트 생성
  • 같은 프로젝트 안에 Dialogflow용 서비스 계정 만들고, 역할 Dialogflow API Client 부여
  • 서비스 계정 JSON 키 발급 및 로컬 저장
  • Dialogflow ES 콘솔에서 Jobby 에이전트 생성 후, 방금 만든 GCP 프로젝트와 연결
  • server/config/dev.js 생성
  • JSON의 project_id, client_email, private_key를 읽어서
    googleProjectID, googleClientEmail, googlePrivateKey에 채워 넣음
  • dialogFlowSessionID, dialogFlowSessionLanguageCode 기본값 설정

다음 글에서 할 것

다음 편에서는 이 설정들을 실제로 사용해서:

  • 서버에서 Dialogflow 텍스트 질의(textQuery) API를 호출하는 함수를 만들고
  • Jobby용 /api/dialogflow/textQuery 같은 라우트를 하나 만들어서
  • 나중에 React 클라이언트에서 이 엔드포인트를 직접 호출할 수 있게 만드는 것

까지 구현해 볼 예정이다.

Portfolio, Jobby
Jobby
This post is licensed under CC BY 4.0 by the author.