项目作者: neutonfoo

项目描述 :
A simple React and Express stack running on Kubernetes and Docker Compose
高级语言: JavaScript
项目地址: git://github.com/neutonfoo/Kubernetes-and-Docker-Compose-Simple-Stack.git


Install NGINX Ingress Controller

  • Needed for k8s deployment (used instead of the nginx reverse proxy)

https://kubernetes.github.io/ingress-nginx/

  • NGINX Ingress Controller will be installed in the ingress-nginx namespace
  • Port 80 will automatically be exposed
  • Configuation is stored in k8s/ingress-service.yaml

kubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/controller-v0.34.1/deploy/static/provider/cloud/deploy.yaml

React Client

The client was created with npx create-react-app client. The .git and node_module folders were deleted. App was modified to load a value from an Express endpoint on componentDidMount() with Axios.

To build and push the client image to Docker Hub, run

  1. docker build client -t neutonfoo/client
  2. docker push neutonfoo/client

Express Server

The server was created with only a bare package.json file serving a single endpoint /api/value.

To build and push the server image to Docker Hub, run

  1. docker build server -t neutonfoo/server
  2. docker push neutonfoo/server

docker-compose

To run this application with Docker Compose, simply run docker-compose up --build and docker-compose down when you’re done. With Docker Compose, an nginx server is used as a reverse proxy direct traffic to either the nginx server hosting the client, or the Express server API.

k8s

  • You will need NGINX Ingress Controller installed.

To run this application in Kubernetes, you will have to have NGINX Ingress Controller installed (above). This nginx Ingress server is used instead of the nginx reverse proxy in the Docker Compose deployment.

  1. kubectl apply -f k8s

Cleanup

  1. kubectl delete -f k8s
  2. kubectl delete namespace ingress-nginx