개발 환경 / 배포 환경 API URL 바꾸기 (feat. dotenv)

잘못된 정보가 있다면 댓글로 알려주세요

.env를 통한 환경변수 사용

Votogether 팀 환경에 경우 AWS EC2로 배포하고 있기 때문에 AWS EC2에서는 .env를 배포 환경으로 생성하고, 개발자들이 사용하는 컴퓨터에서는 .env를 개발환경으로 세팅하면 배포 환경별 API를 바꿔가며 사용할 수 있습니다.

이렇게 사용하는 이유는 개발 환경에서는 MSW를, 실제 배포 환경에서는 서버의 API를 이용하도록 하기 위함입니다. 또한 서버의 앤드 포인트를 외부에 알리면 보안 위험이 있을 수 있습니다. (익명의 사용자가 대량의 요청 시도, 서버의 직접적인 공격) 따라서 dotenv를 통해 환경변수 설정을 해보도록 하겠습니다.

개발 환경

.env

VOTOGETHER_BASE_URL=http://localhost:3000

배포 환경

.env

VOTOGETHER_BASE_URL=http://www.votogether.com(임의로 적은 배포 URL)/api
VOTOGETHER_MOCKING_URL=http://http://localhost:3000/ (MSW 적용시)

BASE_URL 사용을 사용하는 예시

1. 패치 함수를 바꾸는 방법

 

fetch 유틸 함수 코드

const BASE_URL = process.env.BASE_URL;

export const getFetch = async <T>(url: string): Promise<T> => {
  const response = await fetch(`${BASE_URL}${url}`, {
    method: 'GET',
    headers,
  });

  const data = await response.json();

  if (!response.ok) {
    throw new Error(data.message);
  }

  return data;
};

api 코드

export const getPost = async (postId: number): Promise<PostInfo> => {
  return await getFetch<PostInfo>(`/posts/${postId}`);
};

 

2. api 코드에서 바꾸는 방법

 
현재 Votogether 팀 프로젝트에서는 현재 보시는 2번째 방법을 이용하고 있습니다.

로컬 환경에서 실제 api를 테스트 해보기 좋고, 해당 api가 연동되기 전에는 MSW를 사용할 수 있기 때문입니다.

 

이렇게 2주정도 사용해본 결과 PR 올릴때는 서버의 BASE_URL로 올리게 되지만 해당 기능을 개발할 때 MSW로 사용하다가 실제 서버와 API 연동을 테스트해보고 PR을 올릴 수 있다는 장점이 있습니다

 

api 코드

const BASE_URL = process.env.VOTOGETHER_BASE_URL
or
const BASE_URL = process.env.VOTOGETHER_MOCKING_URL

export const getPost = async (postId: number): Promise<PostInfo> => {
  return await getFetch<PostInfo>(`${BASE_URL}/posts/${postId}`);
};

 

 

---

 

MSW 코드

import { rest } from 'msw';

export const mockPost = [
  //게시글 작성
  rest.post('/posts', (req, res, ctx) => {
    window.console.log('게시글 작성 완료', req.body);

    return res(
      ctx.delay(1000),
      ctx.status(201),
      ctx.json({ message: '게시글이 성공적으로 생성되었습니다!!' })
    );
  }),
];

 

 

 

 

 

환경별 분기 방법(응용)

Webpack의 DotenvWebpack 플러그인을 사용한다면 쉽게 개발, 배포 버전을 따로 설정할 수 있습니다.

바로, DotenvWebpack({path: 원하는 env 일 이름)})을 사용하면 가능합니다.

.env.development

VOTOGETHER_BASE_URL=http://localhost:3000

.env.production

VOTOGETHER_BASE_URL=http://www.votogether.com(임의로 적은 배포 URL)/api

webpack.dev.js

const DotenvWebpack = require('dotenv-webpack');
const { merge } = require('webpack-merge');

const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development', // 현재 개발 모드
  devtool: 'eval', // 최대성능, 개발환경에 추천
  devServer: {
    historyApiFallback: true,
    port: 3000,
    hot: true,
  },
  plugins: [new DotenvWebpack({ path: '.env.development' })], // << 이 부분
});

webpack.prod.js

const DotenvWebpack = require('dotenv-webpack');
const { merge } = require('webpack-merge');

const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production', // 현재 배포 모드
  devtool: 'hidden-source-map', // 느리지만 안전 배포에 추천
  plugins: [new DotenvWebpack({ path: '.env.production' })], // << 이 부분
});

.env 환경변수 타입스크립트 설정하기

env.d.ts

declare module NodeJS {
  interface ProcessEnv {
    VOTOGETHER_BASE_URL: string;
  }
}

참고자료

https://abangpa1ace.tistory.com/entry/Configs-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98%EB%A5%BC-%EC%84%A0%EC%96%B8%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-React-%EA%B8%B0%EC%A4%80

 

보투게더 팀 기술 블로그에서 작성한 내용을 가져왔습니다

[프론트엔드] 개발 환경 / 배포 환경 API URL 바꾸기 (feat. dotenv)