---
# System prepended metadata

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

---

# 使用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>
```

現在這是目前的檔案結構:
![](https://i.imgur.com/hmSIDf3.png)

#### 5. 在本地端啟動react
```
npm start
```
![](https://i.imgur.com/fzOAHhH.png)

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

![](https://i.imgur.com/Lg8K2PH.png)

然後根目錄會多出一個env-config.js
![](https://i.imgur.com/o4CCwEb.png)










現在我們要把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
```





