Docker : Run a React app in a minikube

bogotobogo.com site search:

Note

Continued from Run a React app in a docker, in this post, we'll deploy the React app to Kubenetes cluster, actually, to minikube.

First, we'll deploy a react default app and then our hello-world app.

Create React App (CRA)

npm (Node Package Manager) is a package manager for the JavaScript programming language. It has become the de facto package manager for the web. It is installed with Node.js

$ npm -v
6.14.5

$ node -v
v11.9.0

We will use npm to install Create React App CLI globally:

$ npm install -g create-react-app
/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
+ create-react-app@3.4.1
added 98 packages from 46 contributors in 8.297s

Let's start off with a fresh React application created with create-react-app. So, react App the works by running the following command:

$ npx create-react-app react-minikube
...
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
...

This generates all the required configuration and files, folders, and libraries to start developing a new React application.

We can see three top level sub-folders:

/node_modules: Where all of the external libraries used to piece together the React app are located. We shouldn't modify any of the code inside this folder as that would be modifying a third party library, and our changes would be overwritten the next time we run the npm install command.
/public: Assets that aren't compiled or dynamically generated are stored here. These can be static assets like logos or the robots.txt file.
/src: Where we'll be spending most of our time.

The package.json file outlines all the settings for the React app:

name is the name of our app
version is the current version
"private": true is a failsafe setting to avoid accidentally publishing our app as a public package within the npm ecosystem.
dependencies contains all the required node modules and versions required for the application. Here, it contains htree dependencies, which allow us to use react, react-dom, and react-scripts in our JavaScript. In the screenshot above, the react version specified is ^16.13.1. This means that npm will install the most recent major version matching 16.x.x. We may also see something like ~1.2.3 in package.json, which will only install the most recent minor version matching 1.2.x.
scripts specifies aliases that we can use to access some of the react-scripts commands in a more efficient manner. For example running npm test in our command line will run react-scripts test --env=jsdom behind the scenes.

Run React App - start app development server

We must be in the folder where package.json is:

$ cd react-minikube

Start the React app by typing npm start into the terminal.

$ npm start  
...
Compiled successfully!

You can now view hello-world in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.0.0.161:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Changes made to the React app code are automatically shown in the browser thanks to hot reloading (any changes we make to the running app's code will automatically refresh the app in the browser to reflect those changes).

If everything goes well, a new browser tab should open showing the placeholder React component:

Edit the "App.js" and save it. Then, we'll immediately see the changes on the browser.

We may want to have an optimized production build of the React application which can be created with:

$ npm run-script build

> react-minikube@0.1.0 build /Users/kihyuckhong/React-Minikube/react-minikube
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  39.39 KB  build/static/js/2.91e125fa.chunk.js
  776 B     build/static/js/runtime-main.5edc06ea.js
  650 B     build/static/js/main.54f008fc.chunk.js
  547 B     build/static/css/main.5f361e03.chunk.css    
 ...

We can see we have the production build of our application available at build/.

Dockerfile

To create a Docker container we need a Dockerfile at the root level of our React application folder.

$ docker --version
Docker version 19.03.8, build afacb8b

We'll be using nginx to serve the content of the React application. So, add the following Dockerfile to the root of the project:

FROM nginx:stable-alpine
COPY build/ /usr/share/nginx/html

As we can see our Docker container will have the official nginx Docker image and copies the React production build/ to the container.

Note that we could have used a Dockerfile using multistage build pattern as in Docker : Run a React app in a docker.

To speed up the creation of the Docker container, make sure to add a .dockerignore to our project to exclude such as node_modules from being sent to the Docker context. Here is the .dockerignore file:

node_modules
npm-debug.log
build
.dockerignore
**/.git
**/.DS_Store
**/node_modules

Now that have our React production build in place, we can start our Docker engine.

Let's create our Docker image:

$ docker build -t minikube-react-app .   
Sending build context to Docker daemon  1.138MB
Step 1/2 : FROM nginx:stable-alpine
 ---> ab94f84cc474
Step 2/2 : COPY build/ /usr/share/nginx/html
 ---> 7aa20584ef36
Successfully built 7aa20584ef36
Successfully tagged minikube-react-app:latest

$ docker images
REPOSITORY                     TAG                 IMAGE ID            CREATED             SIZE
minikube-react-app             latest              7aa20584ef36        28 seconds ago      21.8MB

Connecting to minikube

Before we run our app on a kubernetes cluster, we need to put our docker image to DockerHub:

$ docker build -t dockerbogo/minikube-react-app:v1 .
Sending build context to Docker daemon  1.136MB
Step 1/2 : FROM nginx:stable-alpine
 ---> ab94f84cc474
Step 2/2 : COPY build/ /usr/share/nginx/html
 ---> Using cache
 ---> dc86e2209cf1
Successfully built dc86e2209cf1
Successfully tagged dockerbogo/minikube-react-app:v1

$ docker images
REPOSITORY                      TAG                 IMAGE ID            CREATED             SIZE
dockerbogo/minikube-react-app   v1                  dc86e2209cf1        28 seconds ag       21.8MB

$ docker login

$ docker push dockerbogo/minikube-react-app:v1

Let's start our minikube:

$ minikube start

Before we run our app on a kubernetes cluster, we need to put our docker image to DockerHub:

$ docker build -t dockerbogo/minikube-react-app:v1 .
Sending build context to Docker daemon  1.136MB
Step 1/2 : FROM nginx:stable-alpine
 ---> ab94f84cc474
Step 2/2 : COPY build/ /usr/share/nginx/html
 ---> Using cache
 ---> dc86e2209cf1
Successfully built dc86e2209cf1
Successfully tagged dockerbogo/minikube-react-app:v1

$ docker images
REPOSITORY                      TAG                 IMAGE ID            CREATED             SIZE
dockerbogo/minikube-react-app   v1                  dc86e2209cf1        28 seconds ag       21.8MB

$ docker login

$ docker push dockerbogo/minikube-react-app:v1

Now, we are ready to deploy our app to minikube with the following deployment.yaml:

kind: Deployment
apiVersion: apps/v1
metadata:
  name: minikube-react-app
spec:
  replicas: 2
  selector:
    matchLabels:
      app: minikube-react-app
  template:
    metadata:
      labels:
        app: minikube-react-app
    spec:
      containers:
      - name: minikube-react-app
        image: dockerbogo/minikube-react-app:v1
        imagePullPolicy: Always
        ports:
        - containerPort: 80
        resources:
          requests:
            memory: "100Mi"
            cpu: "300m"
          limits:
            memory: "200Mi"
            cpu: "600m"
      restartPolicy: Always
---
kind: Service
apiVersion: v1
metadata:
  name: minikube-react-app
spec:
  type: NodePort
  ports:
    - port: 80
      targetPort: 80
      protocol: TCP
      nodePort: 31000
  selector:
    app: minikube-react-app

$ kubectl apply -f deployment.yaml
deployment.apps/minikube-react-app created
service/minikube-react-app created  

$ kubectl get pods
NAME                                  READY   STATUS    RESTARTS   AGE
minikube-react-app-68b4d9857f-ffpmd   1/1     Running   0          68s
minikube-react-app-68b4d9857f-srt9m   1/1     Running   0          68s

$ kubectl get svc
NAME                 TYPE        CLUSTER-IP      EXTERNAL-IP   PORT(S)        AGE
minikube-react-app   NodePort    10.100.103.80   <none>        80:31000/TCP   74s

$ kubectl get deployment
NAME                 READY   UP-TO-DATE   AVAILABLE   AGE
minikube-react-app   2/2     2            2           83s

We can access the app via $(minikube ip):NodePort as shown below:

We can update our app image and deploy with a new deployment.yaml:

kind: Deployment
apiVersion: apps/v1
metadata:
  name: minikube-react-app
spec:
  replicas: 2
  selector:
    matchLabels:
      app: minikube-react-app
  template:
    metadata:
      labels:
        app: minikube-react-app
    spec:
      containers:
      - name: minikube-react-app
        image: dockerbogo/minikube-react-app:v2
        imagePullPolicy: Always
        ports:
        - containerPort: 80
        resources:
          requests:
            memory: "100Mi"
            cpu: "300m"
          limits:
            memory: "200Mi"
            cpu: "600m"
      restartPolicy: Always
---
kind: Service
apiVersion: v1
metadata:
  name: minikube-react-app
spec:
  type: NodePort
  ports:
    - port: 80
      targetPort: 80
      protocol: TCP
      nodePort: 31000
  selector:
    app: minikube-react-app

Before we update our app, we need to put our docker image to DockerHub:

$ docker build -t dockerbogo/minikube-react-app:v2 .
Sending build context to Docker daemon  1.136MB
Step 1/2 : FROM nginx:stable-alpine
 ---> ab94f84cc474
Step 2/2 : COPY build/ /usr/share/nginx/html
 ---> Using cache
 ---> dc86e2209cf1
Successfully built dc86e2209cf1
Successfully tagged dockerbogo/minikube-react-app:v2

$ docker images
REPOSITORY                      TAG                 IMAGE ID            CREATED             SIZE
dockerbogo/minikube-react-app   v1                  dc86e2209cf1        28 seconds ago       21.8MB

$ docker login

$ docker push dockerbogo/minikube-react-app:v2

$ kubectl apply -f deployment.yaml

$ kubectl get pods
NAME                                  READY   STATUS    RESTARTS   AGE
minikube-react-app-68b4d9857f-6kt2v   1/1     Running   0          17s
minikube-react-app-68b4d9857f-q4h87   1/1     Running   0          17s

$ kubectl get svc
NAME                 TYPE        CLUSTER-IP      EXTERNAL-IP   PORT(S)        AGE
minikube-react-app   NodePort    10.100.15.100   <none>        80:31000/TCP   48s

$ kubectl get deployment
NAME                 READY   UP-TO-DATE   AVAILABLE   AGE
minikube-react-app   2/2     2            2           83s

We can access the updated app via $(minikube ip):NodePort as before.

Refs