All Projects → CodepediaOrg → multi-stage-react-app-example

CodepediaOrg / multi-stage-react-app-example

Licence: other
Repo for blog post - "A cleaner multi-stage continuous deployment on Kubernetes of a Create React App with kustomize, helm and skaffold"

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects
Dockerfile
14818 projects

Projects that are alternatives of or similar to multi-stage-react-app-example

action-setup-kube-tools
Github Action that setup Kubernetes tools (kubectl, kustomize, helm, kubeconform, conftest, yq, rancher, tilt, skaffold) very fast and cache them on the runner. Please [✩Star] if you're using it!
Stars: ✭ 45 (+136.84%)
Mutual labels:  helm, skaffold, kustomize
khelm
A Helm chart templating CLI, kpt function and kustomize plugin
Stars: ✭ 46 (+142.11%)
Mutual labels:  helm, kustomize
homelab
My self-hosting infrastructure, fully automated from empty disk to operating services
Stars: ✭ 4,451 (+23326.32%)
Mutual labels:  helm, kustomize
big-bang
Big Bang is a declarative, continuous delivery tool for core DoD hardened and approved packages into a Kubernetes cluster.
Stars: ✭ 55 (+189.47%)
Mutual labels:  helm, kustomize
Flux
Successor: https://github.com/fluxcd/flux2 — The GitOps Kubernetes operator
Stars: ✭ 6,688 (+35100%)
Mutual labels:  helm, kustomize
examples
Examples to demonstrate how to use PipeCD
Stars: ✭ 21 (+10.53%)
Mutual labels:  helm, kustomize
monokle
🧐 Monokle streamlines the process of creating, analyzing, and deploying Kubernetes configurations by providing a unified visual tool for authoring YAML manifests, validating policies, and managing live clusters.
Stars: ✭ 795 (+4084.21%)
Mutual labels:  helm, kustomize
Book k8sInfra
< 컨테이너 인프라 환경 구축을 위한 쿠버네티스/도커 >
Stars: ✭ 176 (+826.32%)
Mutual labels:  helm, kustomize
tondra
Continuous Development on Kubernetes environments with Skaffold
Stars: ✭ 105 (+452.63%)
Mutual labels:  helm, skaffold
flux-kustomize-example
Flux v1: Example of Flux using manifest generation with Kustomize
Stars: ✭ 71 (+273.68%)
Mutual labels:  kustomize
charts
HAProxy Ingress helm charts
Stars: ✭ 24 (+26.32%)
Mutual labels:  helm
kube-karp
☸ Add a floating virtual IP to Kubernetes cluster nodes for load balancing easily.
Stars: ✭ 104 (+447.37%)
Mutual labels:  helm
litmus-helm
Helm Charts for the Litmus Chaos Operator & CRDs
Stars: ✭ 23 (+21.05%)
Mutual labels:  helm
k8s-istio-demo
Demo showing the capabilities of Istio
Stars: ✭ 22 (+15.79%)
Mutual labels:  helm
gitops-build-lib
Jenkins pipeline shared library for automating deployments via GitOps
Stars: ✭ 23 (+21.05%)
Mutual labels:  helm
helm
GitHub action for deploying Helm charts.
Stars: ✭ 107 (+463.16%)
Mutual labels:  helm
helm-namespace
Namespace auto-creation for Helm 3
Stars: ✭ 29 (+52.63%)
Mutual labels:  helm
aks-multi-tenant-agic
This sample shows how to use the Application Gateway Ingress Controller in a multi-tenant AKS cluster to expose multiple instances of the same application, one for each tenant.
Stars: ✭ 27 (+42.11%)
Mutual labels:  helm
KubeStitch
Kubernetes deployment stitcher
Stars: ✭ 19 (+0%)
Mutual labels:  helm
helm-unittest
BDD styled unit test framework for Kubernetes Helm charts as a Helm plugin.
Stars: ✭ 276 (+1352.63%)
Mutual labels:  helm

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Deploy on Kubernetes

Normal objects

Build docker image

docker build --tag multi-stage-react-app-example:latest .

Deploy with native kubectl commands

kubectl apply -f kubernetes/config-dev.yaml # creates the configMap in the Kubernetes cluster
kubectl apply -f kubernetes/deployment.yaml
kubectl apply -f kubernetes/service.yaml

** Undo deployments **

kubectl delete configMap multi-stage-react-app-example-config
kubectl delete deployment multi-stage-react-app-example
kubectl delete service multi-stage-react-app-example

Forward port

kubectl port-forward svc/multi-stage-react-app-example 3001:80

Then access the app at http://localhost:3001

Deploy with helm

Create release

helm upgrade dev-release ./helm-chart/ --install --force --values helm-chart/config-values/config-dev.yaml
helm ls #verify dev-release is present

Undo release

helm delete --purge dev-release

Deploy with kustomize

Build with kustomize to see what Kubernetes objects are generated

kustomize build kustomize/base/

Apply base

kubectl apply -k kustomize/base

Undo

kubectl delete -k kustomize/base

Apply DEV overlay

kubectl apply -k kustomize/overlays/dev

Undo

kubectl delete -k kustomize/overlays/dev

Cherry on the cake - use skaffold

We will use skaffold profiles

Deploy via kubectl

skaffold run -p native-kubernetes
skaffold delete -p native-kubernetes

Deploy via kustomize

For example build the prod thing:

skaffold run -p kustomize-prod
skaffold delete -p kustomize-prod
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].