CloudFlare로 환경변수 설정하기(Next.js)

개요

팀프로젝트를 하던 중, 1차 랜딩 페이지를 배포하기 위해 CloudFlare라는 클라우드 타입 배포 서비스를 이용하게 되었다.

배포에 대해 무지해서 아는 게 없던 와중에 감사하게도 나의 개발 인생 롤모델인 이동욱님의 개발 블로그에서 CloudFlare로 Next.js 서비스를 배포하는 법을 찾을 수 있었다.

CloudFlare를 통한 Next.js 서비스 배포하는 법은 해당 블로그 글을 참고해보자!

이동욱님 개발 블로그(CloudFlare Pages로 Next.js 서비스 배포하기)

CloudFlare Pages로 Next.js 서비스 배포하기

 

문제인식

하지만 배포를 하는 과정에서 내가 원하는 경로로 api 요청을 제대로 하지 못하는 현상을 발견했다.

분명 로컬에서는 원하는 경로로 잘 요청이 갔는데, 배포된 버전에서는 원하는 경로로 요청을 보내지 못하는 것이었다.

일단 기본 개발 환경은 axios 요청을 통해 백엔드로 api 요청을 보내는 것이었고, 환경변수(ex: 192.168.62.16:3000~~~)는 .env 파일에 정리해 두었다. 소스 코드는 다음과 같다.

// .env 파일. dev 모드와 prod 모드 일 때의 환경변수 지정
NEXT_PUBLIC_API_URL_DEV=http://127.0.0.1:5000
NEXT_PUBLIC_API_URL_PROD=https://https://port-0-daytiny-dihik2mlj9t2gbk.sel4.cloudtype.app

 

// next.config.js
module.exports = {
  ...nextConfig,
  env: {
    // 여기서 NEXT_PUBLIC_API_URL라는 변수를 개발 환경에 따라 다르게 할당
    NEXT_PUBLIC_API_URL: process.env.NODE_ENV === 'production'
      ? process.env.NEXT_PUBLIC_API_URL_PROD
      : process.env.NEXT_PUBLIC_API_URL_DEV,
  },
  images: {
    unoptimized: true,
  },
};

 

// axios.ts 초기의 axios 요청 환경 만들기
import axios from 'axios';

const axiosBaseURL = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
});

export default axiosBaseURL;

 

// 여기서 이제 경로에 따라 api 요청을 하는 로직.
import axiosBaseURL from '../../axios';

export const registUser = async (formData) => {
  // 기본 url 경로(.env에 정의된 경로)에다가 요청 보내고 싶은 api의 경로를 추가한 후, 데이터를 넣어서 요청을 보낸다 
  const response = await axiosBaseURL.post('/api/user/survey', {
    phoneNumber: formData.phoneNumber,
    surveyList: JSON.stringify(formData.surveyList),
  });
  return response;
};

 

 

위와 같이 코드를 짰다. 이론상 완벽하다.

이론상 로컬에서 실행시킬 때는 http://127.0.0.1:5000/api/user/survey로 api 요청이 갈 것이고,

배포 환경에서 실행시킬 때는 https://port-0-daytiny-dihik2mlj9t2gbk.sel4.cloudtype.app/api/user/survey로 api 요청이 갈 것이다.

그럼 코드를 한 번 실행시켜보자.

로컬환경

보시다시피 127.0.0.1:5000/api/user/survey로 api 요청이 잘 가고, 응답도 200번으로 잘 받는 모습니다.

잘 동작하는구나 싶어서 바로 CloudFlare에 배포해보았다.

 

배포환경

api 요청이 port-0-daytiny-~~~~로 가야하는데 d3a0975b.daytiny~~~~로 가는 모습이다.

api 요청이 완전 잘못된 경로로 가고 있다..

 

해결 방법

도대체 왜 내가 원하는 경로(port-0-daytiny-~~~~)로 가야하는데 저 경로로 안갈까 곰곰이 생각해보았다. 생각해보니 답은 아주 간단하였다. 개발을 할 때에는 dotenv 라이브러리를 활용하여 .env 파일에 환경 변수들을 지정하여 사용하였는데,

배포된 환경에는 dotenv 라이브러리가 안깔려 있을 뿐더라 .env 파일도 git에 올라가지 않기 때문에(.gitignore 목록에 포함되어 있음) 빌드된 파일이 올라가는 CloudFlare 입장에서는 NEXT_PUBLIC_API_URL 변수를 이해하지 못하는 것이 당연하다.

그래서 CloudFlare 내에서 환경변수를 등록하는 방법을 찾아보았다.

감사하게도 한 블로그(CloudFlare에서 환경변수 적용하기)에서 CloudFlare에서 환경변수 설정하는 방법을 찾을 수 있었고, 해당 방법을 적용시켜 보았다.

Settings - Environment variables에 Variable과 Preview 둘 다에 환경변수를 등록하고 다시 빌드 및 배포를 진행하였다.

 

결과

위 과정을 거친 후, 배포 환경에서 다시 api 요청을 보내 보았다.

결과는 아래와 같다.

보시다시피 내가 원히는 url인 port-0-daytiny~~~~~/api/user/survey에 정상적으로 api 요청이 가는 것을 확인할 수 있고, 응답 또한 제대로 받았음을 확인할 수 있다.

 

이 문제를 해결함에 있어서 코드 상에서만 문제를 해결하려고 골머리를 썼었는데, 결국 원인은 툴(CloudFlare) 숙련도 미숙에서 찾을 수 있었다.

앞으로 디버깅을 함에 있어서는 단순 코드에서 원인을 찾을 뿐만 아니라 사용하는 개발 환경 및 개발툴에서도 문제가 없을지에 대해서 생각의 영역을 넓혀 나가야겠다고 생각했다.

처음 접해보는 환경이 있다면 사용법을 확실히 알고가자!!!