実行時環境変数

12965 ワード
react devops singlepageapp javascript テキストリンク
反応としては、ブラウザのランタイム環境内の静的なページとして実行される単一のページアプリケーション(SPA)とブラウザの中には、スパで使用できるランタイム変数のようなものはありません.しかし、我々は反応アプリケーションで動的な環境変数を実装することができるいくつかのハッキングがあります.
しかし、問題は、静的なページのためにランタイム変数を必要とする理由です?まあ、私の経験では、いくつかの場合は、我々は反応のアプリでランタイムや動的変数を探すために、または任意のスパのための事実のために事実があります.例えば、ローカルAPI、プリプロード、およびプロダクションのための異なるAPIエンドポイント、pre - prodとprodのための異なるAPIキーと同様に.

ローカル開発に着手するための設定はほとんどありません.
  • 環境ファイル
  • bashスクリプト
  • NPMスクリプト
  • パブリック/インデックスにスクリプトタグを含める.HTML
  • 実行時変数が必要なスクリプト

    • 1 .環境ファイル
    envを作成します.preprod file/public/env/location/public/env/envにこのファイルを作成します.予言する
    これはランタイム環境変数が格納されるファイルで、ファイルに複数の変数が存在する可能性があります.パブリックディレクトリの下でなぜですか?ビルドプロセス中にtarballにバンドルされるので
    //Filename: env.preprod
REACT_APP_RUNTIME_PREPROD_KEY=xyz

    bashスクリプト
    実行中のスクリプトnpm start ローカルの場合、env configを作成します.ENVからのコンテンツ付きのJS.展開中にpreprodファイルとpre - prodに同じです.prodについては、デフォルトのENV設定を行います.jsファイル.
    ファイル名: env .sh
    #!/bin/bash

# look for runtime env file
if [ ! -z "${2}" ]; then
  envFile="${1}"/env."${2}"
fi

#If can't find it then exit
if [[ ! -f "$envFile" ]]; then
echo "Env file doesn't exist!"
exit 1;
fi


# create runtime env JS file
if [[ ! -z "${1}" ]]; then
  envJs="${1}/env-config.js"
fi

#Recreate config file
rm -rf ${envJs}
touch ${envJs}

# Add assignment 
echo "window._env_ = {" >> ${envJs}

# Read each line in .env file
# Each line represents key=value pairs
while read -r line || [[ -n "$line" ]];
do
  # Split env variables by character `=`
  if printf '%s\n' "$line" | grep -q -e '='; then
    varname=$(printf '%s\n' "$line" | sed -e 's/=.*//')
    varvalue=$(printf '%s\n' "$line" | sed -e 's/^[^=]*=//')
  fi

  # Read value of current variable if exists as Environment variable
  value=$(printf '%s\n' "${!varname}")
  # Otherwise use value from .env file
  [[ -z $value ]] && value=${varvalue}

  # Append configuration property to JS file
  echo "  $varname: \"$value\"," >> ${envJs}
done < ${envFile}

echo "};" >> "${envJs}"

echo "generated ${envJs} with content"
cat ${envJs}

    NPMスクリプト
    これは、prestart npm script bashスクリプトを実行します.
    //Change in package.json file
"prestart" : "chmod +x ./public/env/env.sh && ./public/env/env.sh ./public/env preprod"

    4 . public/indexにスクリプトタグを含める.HTML
    env configこれまで作成されたJSはインデックスにロードする必要があります.HTML、それ以外は使用できません.ENV設定時.ブラウザのウィンドウオブジェクトにランタイム変数が割り当てられます.
    <!--Change in index.html-->
<head>
  <script src="%PUBLIC_URL%/env/env-config.js?d=20210529"></script>
</head>

    実行時変数が実際に使用されるスクリプト
    そして今、これまで行われたすべてのハードワークについては、ランタイム変数を使用して/使用する時間です.変数はウィンドウオブジェクトとして割り当てられているので、今私たちは望む方法を使うことができます.これは、バニラJSファイルや反応アプリJSX/TSXファイルで使用することができます.チェックアウトSample Code 
    //Filename: some-important.js
const RUNTIME_ENV_KEY = window?._env_?.REACT_APP_RUNTIME_PROD_KEY ? window._env_.REACT_APP_RUNTIME_PROD_KEY : window?._env_?.REACT_APP_RUNTIME_PREPROD_KEY;
    また、いくつかの重要な含まれます.インデックスのJS.ヘッドタグ
    <!--Change in index.html-->
<head>
  <script src="%PUBLIC_URL%/some-important.js?d=20210529"></script>
</head>

    捕食する
  • 展開中にスクリプトを実行する
  • ロケーション.conf ( nginxの使用時)

    • 展開中にスクリプトを実行する
    スクリプトを実行するenv.sh 展開プロセスで.Dockerイメージの詳細については、最後にチェックアウトリファレンスセクション.
    ファイル名: preprod展開.sh
    bash ./public/env/env.sh ./public/env preprod

    2 .場所conf ( nginxの使用時)
    NGNXサーバがWebサーバとして使用されるとき、ENV Configへのアクセスを許可します.jsファイル.
    ファイル名:場所.conf
    location ~ /env/(.+\.(?:js))$ {
  expires -1;
  add_header Cache-Control "public"
}

    生産のために

    1 .デフォルトのENV設定を作成します.js
    既定の作成は、生産展開中に必要な手順を設定する努力を減らします.しかし、もし我々が望むなら、envのような別のenvファイルを作ることができます.プロシージャ展開中に同じを実行して実行します.しかし、これは完全にあなた次第です!
    ファイル名: ENV設定.js
    window._env_ = {
  REACT_APP_RUNTIME_PROD_KEY=runtime-env-value
};

    サンプルコード
    このブログで紹介されているコードスニペットはGithubにあります.Sample Code . 場合は、ファイルに興味を持っている場合は、チェックアウトGitHub Gist
    あなたがここに達したならば、私はあなたを読書させ続けるのに十分な努力をしました.任意のコメントを残したり、任意の修正を求める親切にしてください.ハッピーコーディング!

    参照:
  • https://www.freecodecamp.org/news/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70/

    • 他のブログ




    • Android icon sizes
    シーザーのパスワード