[ChatGPT 챗봇 실습 4강] 백엔드 프록시 구성 – API 키 보안 처리

이번 강의에서는 OpenAI API 연동 시 가장 중요한 API 키 보안 문제를 해결하기 위해, 간단한 백엔드 프록시 서버를 구성하는 방법을 알아봅니다. 프론트엔드에서 직접 키를 노출하지 않고 안전하게 요청을 전달할 수 있는 실습입니다.

용어 설명

• API 키 노출: 클라이언트 코드에 API 키가 포함되면 누구나 무단 사용 가능
• 프록시 서버: 클라이언트와 외부 API 사이에서 요청을 중계해주는 중간 서버
• .env 파일: 환경변수를 저장하여 코드에 직접 키를 작성하지 않도록 처리

 

기본 개념

• React에서 직접 OpenAI API를 호출하면 키가 브라우저에 노출됨
• Express 기반의 간단한 Node 서버를 구성해 키를 서버에 보관
• 프론트엔드는 /api/chat 같은 내부 경로로만 요청함

 

주요 사용 위치

• 모든 유료 API 연동 프로젝트에서 필수 보안 조치
• 기업 서비스, 유료 모델, 외부 호출이 많은 챗봇 등

 

구체적 코드 예시

1. 서버 구성 (server/index.js)

const express = require('express');
const cors = require('cors');
const dotenv = require('dotenv');
const fetch = require('node-fetch');

dotenv.config();
const app = express();
app.use(cors());
app.use(express.json());

app.post('/api/chat', async (req, res) => {
  const messages = req.body.messages;

  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${process.env.OPENAI_API_KEY}`
    },
    body: JSON.stringify({
      model: 'gpt-3.5-turbo',
      messages
    })
  });

  const data = await response.json();
  res.json(data);
});

app.listen(3001, () => console.log('Server listening on port 3001'));

 

2. 환경 변수 설정 (.env)

OPENAI_API_KEY=sk-xxxxxxx...

 

3. 프론트에서 요청하기

const res = await fetch('http://localhost:3001/api/chat', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ messages: updatedMessages })
});

 

핵심 요점 정리

• API 키를 노출 없이 서버에 보관하고 프론트엔드는 프록시 서버만 호출
• Express 서버 구성은 간단한 POST 라우터 1개로 충분
• .env 환경변수로 키를 분리 관리
• CORS 허용 설정도 포함해야 프론트에서 접근 가능

 

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.