Nasaďte aplikaci React do Kubernetes v 5 snadných krocích

Kubernetes je aktuálně de-facto standardem pro nasazení aplikací v cloudu. Každý velký poskytovatel cloudu nabízí vyhrazenou službu Kubernetes (např. Google Cloud s GKE, AWS s EKS atd.) pro nasazení aplikací v clusteru Kubernetes.

Existuje mnoho důvodů, proč si pro nasazení aplikace React vybrat Kubernetes:

  • jednotný a standardizovaný model nasazení napříč poskytovateli cloudu
  • odolnost proti prostojům při nasazení několika kontejnerů (horizontální škálování)
  • zvládání špičky provozu pomocí automatického škálování
  • rozmístění s nulovými prostoji, nasazení canary atd.
  • jednoduché A/B testování

V tomto příspěvku ukážu, jak nasadit aplikaci React do clusteru Kubernetes pomocí pěti jednoduchých kroků. Abyste mohli sledovat článek, potřebujete pouze základní znalosti Dockeru.

Protože všichni chceme rychlou zpětnou vazbu při učení nového tématu, použiji pro tento příklad místní cluster Kubernetes. Tento místní cluster Kubernetes můžete roztočit během několika minut, pokud máte na svém počítači nainstalovaný Docker engine s podporou Kubernetes. Tato funkce je k dispozici od verze 18.06.0 pro oba Docker Desktop pro Windows/Mac.

Začněme...

Krok 1:Vytvořte aplikaci React

Začínám s novou aplikací React vytvořenou pomocí create-react-app z Facebooku:

➜ node -v
v10.16.0
➜ npm -v
6.9.0
➜ npx create-react-app react-app-kubernetes
npx: installed 91 in 5.787s

Creating a new React app in /Users/rieckpil/Desktop/react-app-kubernetes.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

...

Happy hacking!

Tím se vytvoří všechny požadované konfigurace a soubory pro zahájení vývoje nové aplikace React.

Ujistěte se, že můžete spustit a získat přístup k aplikaci React na vašem místním počítači na http://localhost:3000 pomocí npm start . Pro další sekce potřebujeme optimalizované produkční sestavení aplikace React, která je vytvořena pomocí:

➜ npm run-script build
> [email protected] build /Users/rieckpil/Desktop/junk/react-app-kubernetes
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  36.44 KB  build/static/js/2.b41502e9.chunk.js
  762 B     build/static/js/runtime~main.a8a9905a.js
  602 B     build/static/js/main.28647029.chunk.js
  517 B     build/static/css/main.2cce8147.chunk.css

...

Pokud máte existující aplikaci React, můžete tuto část přeskočit a pokračovat další. Jen se ujistěte, že máte produkční sestavení vaší aplikace k dispozici na build/ .

Krok 2:Dockerize aplikace React

Pro nasazení aplikace React do Kubernetes ji musíme zabalit do kontejneru. Kubernetes podporuje několik kontejnerových enginů, ale Docker je v současné době tím nejrozšířenějším.

K vytvoření kontejneru Docker potřebujeme Dockerfile na kořenové úrovni naší složky aplikace React. Tento soubor definuje, jaký OS se používá, jak je nakonfigurován a jaké další aplikace běží v tomto kontejneru.

V tomto příkladu používám nginx k poskytování obsahu aplikace React a nejjednodušší Dockerfile vypadá následovně:

FROM nginx:1.17
COPY build/ /usr/share/nginx/html

Náš kontejner Docker zdědí vše z oficiálního nginx:1.17 Docker image a pouze zkopíruje produkční sestavení React do kontejneru.

Chcete-li urychlit vytváření kontejneru Docker, nezapomeňte přidat .dockerignore do vašeho projektu vyloučit node_modules před odesláním do kontextu Docker:

node_modules

Jakmile budete mít produkční sestavu React na místě, spusťte Docker engine a spusťte následující příkaz k vytvoření obrazu Docker:

➜ docker build -t my-react-app .
Step 1/2 : FROM nginx:1.17
1.17: Pulling from library/nginx
fc7181108d40: Pull complete
d2e987ca2267: Pull complete
0b760b431b11: Pull complete
Digest: sha256:96fb261b66270b900ea5a2c17a26abbfabe95506e73c3a3c65869a6dbe83223a
Status: Downloaded newer image for nginx:1.17
 ---> f68d6e55e065
Step 2/2 : COPY build/ /usr/share/nginx/html
 ---> 35d48f28a918
Successfully built 35d48f28a918
Successfully tagged my-react-app:latest

Chcete-li kontejner Docker lépe připravit na produkci, nezapomeňte přizpůsobit konfiguraci nginx svým potřebám.

Krok 3:Připojte se ke clusteru Kubernetes

Chcete-li spustit místní cluster Kubernetes, otevřete předvolby Docker Desktop a přepněte na kartu Kubernetes:

Zde můžete povolit podporu Kubernetes. Pokud jej povolíte poprvé, vytvoření clusteru může nějakou dobu trvat , protože se na pozadí stahuje několik obrázků Docker.

Jakmile je spuštěn váš místní cluster Kubernetes, připojte se k němu pomocí kubectl (pokud chybí, stáhněte si zde):

➜ kubectl config use-context docker-for-desktop
Switched to context "docker-for-desktop".
➜ kubectl get nodes
NAME                 STATUS    ROLES     AGE       VERSION
docker-for-desktop   Ready     master    3d        v1.10.11
➜ kubectl cluster-info
Kubernetes master is running at https://localhost:6443
KubeDNS is running at https://localhost:6443/api/v1/namespaces/kube-system/services/kube-dns:dns/proxy

To further debug and diagnose cluster problems, use 'kubectl cluster-info dump'.

S touto podporou Kubernetes pro Docker Desktop získáte místní klastr s jedním uzlem což je příjemné pro účely hodnocení a učení.

Pokud chcete nasadit svou aplikaci React do clusteru Kubernetes v cloudu, začněte zde:

  • Rychlý start Google Kubernetes Engine (GKE)
  • Rychlý start Azure Kubernetes Engine (AKS)
  • Rychlý start AWS Kubernetes Engine (EKS)
  • Rychlý start Oracle Container Engine for Kubernetes (OKE)

Krok 4:Nahrajte obrázek Dockeru do registru kontejnerů

Abychom mohli stáhnout obrázek Docker v rámci clusteru Kubernetes, musíme obrázek nahrát do registru Docker . Pro nasazení v cloudu obvykle získáte vyhrazený registr od poskytovatele cloudu k nahrání obrázku. Protože nasazujeme aplikaci do místního clusteru, potřebujeme místní registr Docker.

Místní registr Docker můžete vytvořit pomocí následujícího příkazu:

➜ docker run -d -p 5000:5000 --restart=always --name registry registry:2

Pro nahrání našeho dříve vytvořeného obrázku React Docker musíme označit obrázek s názvem hostitele a portem registru:

➜ docker tag my-react-app localhost:5000/my-react-app

A nyní můžeme konečně poslat obrázek do našeho registru Docker:

➜ docker push localhost:5000/my-react-app
The push refers to repository [localhost:5000/my-react-app]
9d9745936581: Pushed
d2f0b6dea592: Pushed
197c666de9dd: Pushed
cf5b3c6798f7: Pushed
latest: digest: sha256:66c94bdba6b06d1964a764cd14dc97d8adf202b02ab6e6fbd10b23ad4a8554a1 size: 1158

Nyní jsme připraveni nasadit aplikaci do clusteru Kubernetes.

Krok 5:Nasazení aplikace React

Obvykle každý objekt Kubernetes (service , pod , deployment , atd.) je popsán v .yaml soubor, ale .json je také možné.

Pro nasazení aplikace React do Kubernetes potřebujeme takzvaný deployment . Tato entita Kubernetes zajišťuje, že naše aplikace bude mít tolik replik (paralelních modulů), kolik definujeme. Kromě toho můžeme definovat obraz Dockeru, který chceme použít, jaké porty se používají a další metadata pro naši aplikaci:

kind: Deployment
apiVersion: apps/v1
metadata:
  name: my-react-app
spec:
  replicas: 2
  selector:
    matchLabels:
      app: my-react-app
  template:
    metadata:
      labels:
        app: my-react-app
    spec:
      containers:
        - name: my-react-app
          image: localhost:5000/my-react-app
          imagePullPolicy: Always
          ports:
            - containerPort: 80
      restartPolicy: Always

Pouze s deployment neměli bychom přístup k naší aplikaci zvenčí. Pro vystavení aplikací nabízí Kubernetes takzvaný service . Pomocí service můžeme definovat, které porty vystavit clusteru/venku.

Existuje několik různých typů Kuberntes service a pro váš příklad vybírám ten nejjednodušší:NodePort . Tento typ odhalí definovaný port na každém uzlu v našem clusteru Kubernetes (s místním clusterem Kubernetes máme jen jeden uzel) a namapuje jej na port aplikace:

kind: Service
apiVersion: v1
metadata:
  name: my-react-app
spec:
  type: NodePort
  ports:
    - port: 80
      targetPort: 80
      protocol: TCP
      nodePort: 31000
  selector:
    app: my-react-app

Oba service a deployment lze přidat do jednoho .yaml soubor s --- pro oddělení. V našem příkladu jsem vytvořil jeden deployment.yaml soubor pro uložení obou:

kind: Deployment
apiVersion: apps/v1
# more ...
---
kind: Service
apiVersion: v1
# more ...

Nyní můžete tento soubor použít k nasazení aplikace do Kubernetes s:

➜ kubectl apply -f deployment.yaml
deployment.apps "my-react-app" created
service "my-react-app" created

A může zkontrolovat, že vše běží pomocí:

➜ kubectl get pods
NAME                            READY     STATUS    RESTARTS   AGE
my-react-app-6c8b5c4759-fgb2q   1/1       Running   0          7m
my-react-app-6c8b5c4759-jrzzj   1/1       Running   0          7m
➜ kubectl get deployment
NAME           DESIRED   CURRENT   UP-TO-DATE   AVAILABLE   AGE
my-react-app   2         2         2            2           7m
➜ kubectl get service
NAME           TYPE        CLUSTER-IP      EXTERNAL-IP   PORT(S)        AGE
kubernetes     ClusterIP   10.96.0.1       <none>        443/TCP        3d
my-react-app   NodePort    10.99.224.141   <none>        80:31000/TCP   7m

Jakmile je vše připraveno a spuštěno, navštivte na svém počítači http://localhost:31000 a měli byste vidět svou aplikaci React, která je nyní obsluhována z clusteru Kubernetes:

Chcete-li odebrat aplikaci React z clusteru Kubernetes, stačí spustit

➜ kubectl delete service,deployment my-react-app
service "my-react-app" deleted
deployment.extensions "my-react-app" deleted

Celou kódovou základnu pro tento příklad najdete na GitHubu.

Pro další příspěvky související s Reactem navštivte můj blog:

  • Náhled souborů PDF pomocí React
  • MicroProfile JWT Authentication with Keycloak and React
  • Načítání a stahování souborů pomocí React a Spring Boot

Bavte se nasazováním aplikací React do Kubernetes,
Phil