React, Docker, 런타임 환경 변수

5017 단어 dockerruntimeenvreact

문제



컨테이너화된 반응 앱은 가장 일반적으로 정적 서빙nginx을 사용하므로 런타임에 환경 변수를 javascript에 직접 전달할 방법이 없습니다.

마구 자르기



수정된 런타임<script>에 index.html 블록을 추가하고 환경 변수를 로드합니다.

따라서 우리index.html는 다음과 같아야 합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>ReactApp</title>
    <base href="/" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <script>
      window.env = {};
      /*ENV_BEGIN*/`
      `/*ENV_END*/
        .split('\n')
        .map((kv) => kv.split('='))
        .forEach(([key, value]) => {
          window.env[key] = value;
        });
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>


이렇게 하면 제공된 변수가 window.env 에 로드됩니다.

다음은 Dockerfile 접두사가 붙은 환경 변수를 제공하는 예REACT_APP_입니다.

FROM nginx:alpine

WORKDIR /usr/share/nginx/html

COPY ./dist/apps/react-app .

RUN printf "server {\n\
        listen       80;\n\
        location / {\n\
                root   /usr/share/nginx/html;\n\
                try_files \$uri \$uri/ /index.html;\n\
                add_header Cache-Control \"no-store, no-cache, must-revalidate\";\n\
        }\n\
}\n" > /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD sed  -i '/\/\*ENV_BEGIN\*\/`/r '<(env | grep --color=never "^REACT_APP_") index.html; nginx '-g daemon off;'


작업 예


nx here에서 전체 작업 예제를 찾을 수 있습니다.
Rails에서 PAY.JP API 사용 ~ 구현 준비편 ~ (payjp.js v2)
프래그먼트를 동적으로 사용

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage