[React] Netlify 로 배포해서 APIKEY 숨기기

---

0.문제발생

.env 파일을 만들어서 API키를 commit에서 제외하더라도 GitHub Actions의 secrets와 variables를 사용하여 배포를 하면 나의 API키를 안전하게 지킬수있을줄알았다.

GitHub Actions

 

 

문제는 결국 클라이언트 사이드쪽에서 API키를 통해 호출해야하기 때문에 F12를 눌러나오는 개발자 도구의 Network탭에서 쉽게 확인이 가능해져버린다. 클라이언트 사이드에서 API 키를 숨기려면 API 키를 백엔드 서버로 이전하는 방법을 사용해야 한다고 한다. 그러면 따로 도메인을 사고, 서버를 구입해서 열어야 하는걸까?
그렇게 찾던 도중 서버리스 서비스에 대해 알게되었다.

개발자도구

 

 

 

 

 

 

1.Netlify 

웹 애플리케이션을 빠르고 쉽게 배포하고 관리할 수 있는 플랫폼으로 GitHub과 연동또한 가능하다.
또한 서버리스 함수를 제공하기 때문에 GithubPapes를 통한 배포에서 Netlify 로 옮겨 개발자 도구에서의 나의 APIKEY를 숨기기로 하였다.

 

1-1.서버리스(Serverless)

클라우드 컴퓨팅에서 서버를 직접 관리하지 않고, 인프라와 서버에 대한 걱정을 줄여주는 아키텍처 모델을 의미한다.
"서버리스"라는 이름은 실제로 서버가 없는 것을 의미하지 않고 개발자가 서버의 설정, 관리, 확장 등을 직접 처리할 필요가 없다는것을 의미하는것이다.

 

 

 

 

2.Netlify 사용법

2-1.회원가입 및 로그인

우선 Netlify 사이트에 가서 회원가입과 로그인을 하자

https://app.netlify.com/

Netlify

 

 

 

 

 

2-2.사이트 만들기

만들고 우측에서 나의 사이트 목록에 가게된다면 Add new site 버튼이 있다.

 

 

 

나는 Github의 레포지토리에서 내 사이트 코드를 가져올것이므로 Import an existing project를 선택후
github 을 선택해줬다.

 

 

 

 

 

 

 

2-3. 사이트 설정

2-3-1.사이트 이름 설정

이 부분에서는 사이트의 이름을 설정하게된다. 
사이트 이름은 도메인에 반영되며 때문에 중복설정은 불가능하다.
(사이트 도메인은 따로 구입한 도메인이 존재하면 추후 변경가능)

 

 

 

2-3-2.빌드 설정

다음은 빌드 설정이다.

 

 

Branch to deploy는 말 그대로 내 깃헙의 브런치를 선택하는것이다. 
나는 따로 Netlify 용 으로 브런치를 만들어놨으므로 이것을 선택했다.

 

 

 

이거는 Base directory를 설정하는것인데 
내프로젝트의 경우 루트페이지에서 기본적으로 빌드하고 실행이 가능하므로 따로 작성하지않았다. 

 

 

 

이건 Build command를 작성하는곳인데 나의경우 
package.json에 npm run build를 build 하는 명령어를 적어놨기 때문에 이걸 적었다.
이경우 vite가 dist 폴더에 빌드파일을 생성해준다.

 

 

 

이건 위에 빌드 명령어를 입력했을때 생긴 빌드파일의 디렉토리를 적어보면된다.
뭐가 생기는지 모르면 로컬환경에서 한번 실행해서 확인해보자

 

 

이부분은 일단 netlify/functions 를 작성하자. 
이부분이 바로 서버리스 함수를 실행하는 부분이다.

 

 

 

 

2-3-3. API 키 설정

최종적으로 API 키들을 설정해주자

 

 

 

 

 

 

 

3.netlify 서버리스 함수 작성

기본적으로 netlify 서버리스 함수는 다음과같은 형태로 작성된다.
event 객체는 HTTP 요청과 관련된 정보가 포함되고
context 객체는 Netlify 함수가 실행되는 컨텍스트 정보를 담고있다.

때문에 기존 API 요청 함수들을 아래 형태처럼 변환해서 위에 설정할때 만들었던 netlify\functions 내부에 넣어주자
(process.env.키이름 으로 키의 형태는 바꿔야함)

/// <reference types="node" />
import { Handler } from '@netlify/functions';

export const handler: Handler = async (event, context) => {
  // 요청에 대한 처리 로직
  return {
    statusCode: 200,
    body: JSON.stringify({ message: 'hi' })
  };
};

 

 

 

 

 

4.netlify 서버리스 함수 호출

이제 이 서버리스 함수를 호출해보자.
나의 경우에는 axios 를사용했다.
/.netlify/functions/함수파일이름 을 통해 하나의 엔드포인트 처럼 접근이 가능해졌다. 

const response = await axios.post('/.netlify/functions/getFoodRecallInfoApi', {
      page,
      searchString,
    });

 

 

이제 기존에 API 서버와 클라이언트가 직접 주고 받아서 나의 APIKey가 노출되는 형태에서

 

 

 

서버리스함수를 통해 나의 Key를 안전하게 고칠수있게 되었다!

 

 

 

 

 

 

 

 

 

 

5.하면서 겪을수 있는 문제들

5-1."build.command" failed 이 떠요

package.json에서 scripts 내부에 명령어가 있는지 확인해봅시다.

 

 

 

 

5-2. process.env. 가 안되요

@types/node 패키지를 설치후

npm install --save-dev @types/node

 

tsconfig.json에 다음을 추가해보자

{
  "compilerOptions": {
    "types": ["node"],
    "typeRoots": ["node_modules/@types"]
  }
}

 

그리고 이걸 api 호출 함수 최상단에 적어보자

/// <reference types="node" />

 

 

 

 

 

5-3.URLSearchParams API_KEY가 undefined

다음 코드를 추가해서 undefined이 안온다고 안심시켜주자

if (!API_KEY) {
  throw new Error('API_KEY is missing!');
}

if (!API_KEY) {
  throw new Error('API_KEY is missing!');
}

const params = new URLSearchParams({
  serviceKey: API_KEY, // API_KEY가 반드시 존재해야 함
  type: "json",
  pageNo: String(page + 1),
  numOfRows: "30",
});