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