The following exercise takes you step by step to deploy a React application on Kubernetes
https://github.com/jayaramcloud/react-cat
Dockerfile build: https://github.com/jayaramcloud/react-cat/blob/main/Dockerfile
Note: Ensure the docker build and push to the docker registry is setup before the docker is built.
The gihub actions file is setup: https://github.com/jayaramcloud/react-cat/actions/workflows/build-docker-image.yml
Settings > Secret > DOCKERHUB_TOKEN value is set, based on your docker repo
Docker Image: https://hub.docker.com/repository/docker/canada/en
Kubernetes Deployment: https://github.com/jayaramcloud/react-cat/blob/main/react-cat.yaml
Add the required DNS entries
Dockerfile build:
git clone https://github.com/roryschadler/ElevatorApp.git
docker build . -t react-elevator
docker image ls
REPOSITORY TAG IMAGE ID CREATED SIZE
react-elevator latest cd875f865590 41 minutes ago 489 MB
docker tag react-elevator docker.io/canada/react-elevator:0.01
docker login docker.io
docker push docker.io/canada/react-elevator:0.01
docker run canada/react-elevator:0.01
(node:14) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.(Use `node --trace-deprecation ...` to show where the warning was created)
(node:14) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Compiled successfully!
You can now view elevator_app in the browser.
Local: http://localhost:3000
On Your Network: http://172.17.0.2:3000
Deploy to Kubernetes:
apiVersion: apps/v1
kind: Deployment
metadata:
name: react-elevator
namespace: dev
labels:
app.kubernetes.io/name: react-elevator
spec:
replicas: 1
selector:
matchLabels:
app.kubernetes.io/name: react-elevator
template:
metadata:
labels:
app.kubernetes.io/name: react-elevator
spec:
containers:
- name: react-elevator
image: docker.io/canada/react-elevator:0.01
ports:
- name: react-elevator
containerPort: 3000
protocol: TCP
resources:
limits:
cpu: 200m
memory: 512Mi