# 使用Docker打包React 並且讀取Kubernetes 容器環境變量

之前遇到一個案子，卡了我很久，為了要在線上切換開發環境與給客戶的線上測試版本，為了要辨別目前是什麼環境，我需要在react裡獲取Kubernetes環境變量

文章參考至：　https://www.freecodecamp.org/news/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70/

首先看以下程式碼：

#k8s container 環境變數設定
  containers:
  - name: aiotweb
    image: wibaseaiotplatform.azurecr.io/aiotplatformreactmatx:undefined
    imagePullPolicy: Always
    env: 
      - name: REACT_APP_AZURE_REDIRECT_URL
        value: https://xxxxxxxxxxx.eastasia.cloudapp.azure.com
    ports:
    - containerPort: 3000

#### 1. 在.env.development新增一個本機端環境變數

#.env.development
REACT_APP_AZURE_REDIRECT_URL=https://localhost:8443

#### 2. 在根目錄新建一支.env.sh的檔案

#!/bin/bash

# 執行env.sh檔的後會把env-config.js刪掉
rm -rf ./env-config.js
touch ./env-config.js

# 獲取　Kubernetes 的環境變數
REACT_APP_AZURE_REDIRECT_URL=$(printenv REACT_APP_AZURE_REDIRECT_URL)
echo $REACT_APP_AZURE_REDIRECT_URL

# 如果沒有獲取到　代表目前是在本地端　會去讀取.env.development的變數
localURLENV=$(sed 's/REACT_APP_AZURE_REDIRECT_URL=\(.*\)/\1/g' .env.development)

if [ $REACT_APP_AZURE_REDIRECT_URL ]
then 
  URL=$REACT_APP_AZURE_REDIRECT_URL
else
  URL=$localURLENV
fi

# 判斷好目前的環境　把變數寫入到新的env-config.js裡
echo "window._env_= {" >> ./env-config.js
echo "REACT_APP_AZURE_REDIRECT_URL: " \""$URL\"" >> ./env-config.js
echo "}" >> ./env-config.js

#### 3. 修改一些package.json內容

  "scripts": {
    "start": "chmod +x ./.env.sh && sh ./.env.sh && cp env-config.js ./public/ && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

我們修改了start的cmd
–`chmod +x ./.env.sh` 新增.env.sh的執行權限
-`sh ./.env.sh` 執行 .env.sh
-`cp env-config.js ./public/` 複製一份放到public資料夾

#### 4. 在index.html導入 env-config.js

<script src="%PUBLIC_URL%/env-config.js"></script>

現在這是目前的檔案結構:

#### 5. 在本地端啟動react

npm start


然後按F12
在console裡面打上 `window._env_`
可以看到 本機端環境變數


然後根目錄會多出一個env-config.js

現在我們要把code佈署到k8s 會在k8s的container運行

#### 6. 撰寫dockerfile

#Dockerfile

FROM node:10
RUN npm install -g serve 
ADD package.json /app/
WORKDIR /app
RUN npm install
ADD . /app
RUN npm run build
EXPOSE 3000
CMD chmod +x ./.env.sh && sh ./.env.sh && cp env-config.js ./build/ && serve -s build -l 3000