【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 image
FROM node:13.12.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
RUN npm install [email protected] -g --silent
COPY . ./
RUN npm run build
FROM nginx:1.19
EXPOSE 80
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
COPY --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/v1
kind: Deployment
metadata:
  name: yc
spec:
  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"

然後ConfigMap

apiVersion: v1
kind: ConfigMap
metadata:
  name: web-config
  namespace: hktv-frs-cms
data:
  web.properties: |
    window.API_URL= "http://localhost:8090"
    window.VERSION= "1.0.1s"

完成啦