<div id="readability-page-1" class="page"><div role="banner"> <div> <h4>07 Apr 2023</h4> Reading time ~1 minute  </div> <h2 id="react-에서-build-이후에-환경dev-product-등에-따른-상수-처리">react 에서 build 이후에 환경(dev, product 등)에 따른 상수 처리</h2> 일반적으로 React에서의 상수는 .env를 활용해서 관리합니다. 하지만, 환경에 따라 상수를 변경해야 한다면 어떻게 처리해야 할까요? 정답은 build 이후에 환경 변수를 주입 할수 있게 설계 하면 됩니다. React에서는 <code>public</code> 이라는 디렉토리가 있고 이는 정적 파일을 보관하는 곳입니다. 또한 이 디렉토리에 있는 파일들은 빌드 시 자동으로 <code>build</code> 디렉토리에 복사 되며, 브라우저에서 접근이 가능한 파일로 사용이 됩니다. <h3 id="전역-상수-파일-생성">전역 상수 파일 생성</h3> 먼저 환경 변수는 전역값으로 처리 하기 위해서 <code>window</code> 전역 객체에 <code>env</code>키를 이용해서 저장 합니다. <div><pre><code>// root 디렉토리에 키 값과 벨류 키값을 가진 _env-config.js 파일 생성
window.env = {
 REACT_APP_API: "V_REACT_APP_API"
};
</code></pre></div> <div><pre><code># 환경에 따라 변하지 않는 값은 여기에 넣습니다. 
REACT_APP_API=https://lahuman.github.io
REACT_APP_USER=lahuman
</code></pre></div> <h3 id="indexhtml-수정">index.html 수정</h3> <code>public</code> 디렉토리의 <code>index.html</code>을 아래와 같이 수정합니다. <div><pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
...
 &lt;body&gt;
 &lt;noscript&gt;
 You need to enable JavaScript to run this app.
 &lt;/noscript&gt;
 &lt;div id="root"&gt;&lt;/div&gt;
 &lt;!-- 추가하는 부분 START --&gt; 
 &lt;script src="%PUBLIC_URL%/env-config.js"&gt;&lt;/script&gt;
 &lt;!-- 추가하는 부분 END --&gt; 
 &lt;/body&gt;
&lt;/html&gt;
</code></pre></div> <h3 id="유틸-생성">유틸 생성</h3> 상수를 불러오는 유틸을 만듭니다. <div><pre><code>// env.ts
const env = (key: string) =&gt; {
 return (window as any).env &amp;&amp; (window as any).env[key]
 ? (window as any).env[key]
 : process.env[key];
};

export default env;
</code></pre></div> 로컬 개발환경에는 <code>window.env</code>가 없을 경우 <code>process.env</code>의 상수를 호출하도록 합니다. <h3 id="소스코드에서-사용-예제">소스코드에서 사용 예제</h3> <div><pre><code>import env from "./env";

export default function App() {
 return (
 &lt;div className="App"&gt;
 &lt;h1&gt;{process.env.REACT_APP_API}&lt;/h1&gt;
 &lt;h1&gt;{env("REACT_APP_API")}&lt;/h1&gt;
 &lt;h2&gt;{env("REACT_APP_USER")}&lt;/h2&gt;
 &lt;/div&gt;
 );
}
</code></pre></div> <h3 id="배포">배포</h3> 이후 배포시 <code>sed</code> 명령어를 이용해서 원하는 값으로 변경합니다. <div><pre><code># 변경하려는 값이 환경 변수에 있다는 가정하에 아래와 같이 처리 합니다. 
# 아래 명령어는 빌드 이후 실행되기 때문에, build된 디렉토리 밑으로 env-config.js 파일을 생성합니다. 
cat _env-config.js | sed \
 -e "s|V_REACT_APP_API|${REACT_APP_API}|g" \
&gt; /build/env-config.js
</code></pre></div> <h3 id="결과-확인">결과 확인</h3> <h2 id="예제-코드-보기"><a href="https://codesandbox.io/s/react-evn-after-build-ydqmw9?file=/src/App.tsx">예제 코드 보기</a></h2> <h2 id="참고자료">참고자료</h2> <ul> <li><a href="https://bobbyhadz.com/blog/typescript-property-does-not-exist-on-type-window">Property does not exist on type Window in TypeScript [Fixed]</a></li> </ul> </div></div>

lahuman

Daniel Lim

react 에서 build 이후에 환경(dev, product 등)에 따른 상수 처리
일반적으로 React에서의 상수는 .env를 활용해서 관리합니다.
하지만, 환경에 따라 상수를 변경해야 한다면 어떻게 처리해야 할까요?
정답은 build 이후에 환경 변수를 주입 할수 있게 설계 하면 됩니다.
React에서는 public 이라는 디렉토리가 있고 이는 정적 파일을 보관하는 곳입니다. 또한 이 디렉토리에 있는 파일들은 빌드 시 자동으로 build 디렉토리에 복사 되며, 브라우저에서 접근이 가능한 파일로 사용이 됩니다.
전역 상수 파일 생성
먼저 환경 변수는 전역값으로 처리 하기 위해서 window 전역 객체에 env키를 이용해서 저장 합니다.
// root 디렉토리에 키 값과 벨류 키값을 가진 _env-config.js 파일 생성
window.env = {
 REACT_APP_API: "V_REACT_APP_API"
};
# 환경에 따라 변하지 않는 값은 여기에 넣습니다. 
REACT_APP_API=https://lahuman.github.io
REACT_APP_USER=lahuman
index.html 수정
public 디렉토리의 index.html을 아래와 같이 수정합니다.
<!DOCTYPE html>
<html lang="en">
...
 <body>
 <noscript>
 You need to enable JavaScript to run this app.
 </noscript>
 <div id="root"></div>
  
 <script src="%PUBLIC_URL%/env-config.js"></script>
  
 </body>
</html>
유틸 생성
상수를 불러오는 유틸을 만듭니다.
// env.ts
const env = (key: string) => {
 return (window as any).env && (window as any).env[key]
 ? (window as any).env[key]
 : process.env[key];
};
export default env;
로컬 개발환경에는 window.env가 없을 경우 process.env의 상수를 호출하도록 합니다.
소스코드에서 사용 예제
import env from "./env";
export default function App() {
 return (
 <div className="App">
 <h1>{process.env.REACT_APP_API}</h1>
 <h1>{env("REACT_APP_API")}</h1>
 <h2>{env("REACT_APP_USER")}</h2>
 </div>
 );
}
배포
이후 배포시 sed 명령어를 이용해서 원하는 값으로 변경합니다.
# 변경하려는 값이 환경 변수에 있다는 가정하에 아래와 같이 처리 합니다. 
# 아래 명령어는 빌드 이후 실행되기 때문에, build된 디렉토리 밑으로 env-config.js 파일을 생성합니다. 
cat _env-config.js | sed \
 -e "s|V_REACT_APP_API|${REACT_APP_API}|g" \
> /build/env-config.js
결과 확인
예제 코드 보기
참고자료
Property does not exist on type Window in TypeScript [Fixed]

react 에서 build 이후에 환경(dev, product 등)에 따른 상수 처리

댓글