【YC的寻路青春】

react上k8s的部分

前提
如果放在.env里面 react再build的时候就会把${process.env.REACT_APP_API_URL}给取代掉了，所以不能写.env里面。

所以我们的思路应该是
1.写一个放变数的js我叫他config.js 放在public底下
2.在public底下的index.html写一个scripts把变数丢进去
3.这样读取的时候就会读取到config.js的值，那我们把config.js写成configmap就可以随时更改，不必重启改起来也不用动代码。

一、在src里面多一个congfig.ts (请用typescript)

把你要的变数写在里面。

二、在public里面多一个config.js

三、在public里面的index.html里面多一行

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

这样已经可以在本地改这个参数了

那接下来就是用volume在deployment的时候把这个档案换进去啦
(volumeMounts大概就是一个可以把外部的档案(configmap或是serect)放到你的目录底下的东西)
我们先用docker compose看一下效果

四、想用docker compose起的话、在root底下再盖一个config-production.js

写一个docker compose
(dockerfile的部分网路上都有 有空我会补一篇docker->deployment->service->ingress)
dockerfile 这边用two fact 然后因为nginx所以到时后port会是80.

# pull official base imageFROM node:13.12.0-alpine as buildWORKDIR /appENV PATH /app/node_modules/.bin:$PATHCOPY package.json ./COPY package-lock.json ./RUN npm install --silentRUN npm install react-scripts@3.4.1 -g --silentCOPY . ./RUN npm run buildFROM nginx:1.19EXPOSE 80COPY ./nginx.conf /etc/nginx/conf.d/default.confCOPY --from=build /app/build /usr/share/nginx/html CMD ["nginx", "-g", "daemon off;"]

version: "3"services:  web:    build:      context: .    ports:      - "3000:80"    volumes:      - ./config-production.js:/usr/share/nginx/html/config.js

build起来看看

可以 讚讚讚

再来就是k8s啦

五、附上Deployment跟ConfigMap

Deployment

apiVersion: apps/v1kind: Deploymentmetadata:  name: ycspec:  selector:    matchLabels:      app: yc  strategy:    rollingUpdate:      maxSurge: 25%      maxUnavailable: 25%    type: RollingUpdate  template:    metadata:      labels:        app: yc    spec:      containers:        - name: yc          image: dockername          imagePullPolicy: Never          ports:            - containerPort: 80 //我开80          volumeMounts:            - name: config              mountPath: "/usr/share/nginx/html/config.js"              subPath: "config.js"      volumes:        - name: config          configMap:              name: web-config              items:                  - key: "web.properties"                    path: "config.js"

然后ConfigMap

apiVersion: v1kind: ConfigMapmetadata:  name: web-config  namespace: hktv-frs-cmsdata:  web.properties: |    window.API_URL= "http://localhost:8090"    window.VERSION= "1.0.1s"

完成啦