Deployments of Angular, React and Vue Applications on Kubernetes

This project describes how to deploy Angular, React and Vue applications to Kubernetes on the IBM Cloud.

Jump to the documentation of your preferred web framework:

• Angular
• React
• Vue

In order to serve the web applications, nginx is used. Check out nginx.conf for a simple sample configuration. The file also shows how to access other domains via HTTP.

The built web applications in the dist/build folders are copied on a Docker image. The image extends the standard nginx image from DockerHub.

In order to deploy the applications to Kubernetes, the Docker images are pushed to Docker registries and the Kubernetes configurations are deployed via the kubectl CLI.

Make sure you have the following tools installed:

• Node
• Docker
• Kubernetes CLI
• git
• Create Account (for deployments to Kubernetes on the IBM Cloud)
• IBM Cloud CLI (for deployments to Kubernetes on the IBM Cloud)
• Angular CLI (for Angular)
• React CLI (for React)
• Vue CLI (for Vue)

Clone the repo:

$ git clone https://github.com/nheidloff/web-apps-kubernetes.git

Angular

Create a new application or use the provided sample application which has been generated with the Angular CLI:

$ npm install -g @angular/cli
$ ng new angular-app
$ cd angular-app
$ ng build --prod

Run the application locally:

$ cd web-apps-kubernetes/angular-app
$ npm install
$ ng serve

Build the Docker image:

$ cd web-apps-kubernetes/angular-app
$ docker build -t angular-app .

Run Docker container locally:

$ cd web-apps-kubernetes/react-app
$ docker run -d -p 8080:80 react-app 

Push the Docker image to the IBM Cloud Image Registry (replace the namespace/account):

$ bx plugin install container-service -r Bluemix
$ bx login -a https://api.ng.bluemix.net
$ bx cs region-set us-south
$ bx cr login
$ docker tag angular-app registry.ng.bluemix.net/nheidloff/angular-app
$ docker push registry.ng.bluemix.net/nheidloff/angular-app

Or push it to DockerHub (replace the namespace/account):

$ docker login
$ docker tag angular-app nheidloff/angular-app
$ docker push nheidloff/angular-app

Deploy the application to Kubernetes on the IBM Cloud:

Change the Docker image name in kube-angular.yaml. By default an image is used from DockerHub.

$ bx plugin install container-service -r Bluemix
$ bx login -a https://api.ng.bluemix.net
$ bx cs region-set us-south
$ bx cs clusters
$ bx cs cluster-config <your-cluster-name>
$ 'export ...' (copy the output of previous command)
$ kubectl apply -f kube-angular.yaml

Open the application:

$ bx cs workers <your-cluster-name>
$ kubectl describe service angular-app

Copy the public IP address of your cluster and the NodePort, e.g. 33838, and open the app in a browser.

React

Create a new application or use the provided sample application which has been generated with the React CLI:

$ npm install -g create-react-app
$ create-react-app react-app
$ cd react-app
$ npm run build

Run the application locally:

$ cd web-apps-kubernetes/react-app
$ npm start

Build the Docker image:

$ cd web-apps-kubernetes/react-app
$ docker build -t react-app .

Run Docker container locally:

$ cd web-apps-kubernetes/react-app
$ docker run -d -p 8080:80 react-app 

Push the Docker image to the IBM Cloud Image Registry (replace the namespace/account):

$ bx plugin install container-service -r Bluemix
$ bx login -a https://api.ng.bluemix.net
$ bx cs region-set us-south
$ bx cr login
$ docker tag react-app registry.ng.bluemix.net/nheidloff/react-app
$ docker push registry.ng.bluemix.net/nheidloff/react-app

Or push it to DockerHub (replace the namespace/account):

$ docker login
$ docker tag react-app nheidloff/react-app
$ docker push nheidloff/react-app

Deploy the application to Kubernetes on the IBM Cloud:

Change the Docker image name in kube-react.yaml. By default an image is used from DockerHub.

$ bx plugin install container-service -r Bluemix
$ bx login -a https://api.ng.bluemix.net
$ bx cs region-set us-south
$ bx cs clusters
$ bx cs cluster-config <your-cluster-name>
$ 'export ...' (copy the output of previous command)
$ kubectl apply -f kube-react.yaml

Open the application:

$ bx cs workers <your-cluster-name>
$ kubectl describe service react-app

Copy the public IP address of your cluster and the NodePort, e.g. 33838, and open the app in a browser.

Vue

Create a new application or use the provided sample application which has been generated with the Vue CLI:

$ npm install --global vue-cli
$ vue init webpack vue-app
$ cd vue-app
$ npm run build

Run the application locally:

$ cd web-apps-kubernetes/vue-app
$ npm run dev

Build the Docker image:

$ cd web-apps-kubernetes/vue-app
$ docker build -t vue-app .

Run Docker container locally:

$ cd web-apps-kubernetes/vue-app
$ docker run -d -p 8080:80 vue-app 

Push the Docker image to the IBM Cloud Image Registry (replace the namespace/account):

$ bx plugin install container-service -r Bluemix
$ bx login -a https://api.ng.bluemix.net
$ bx cs region-set us-south
$ bx cr login
$ docker tag vue-app registry.ng.bluemix.net/nheidloff/vue-app
$ docker push registry.ng.bluemix.net/nheidloff/vue-app

Or push it to DockerHub (replace the namespace/account):

$ docker login
$ docker tag vue-app nheidloff/vue-app
$ docker push nheidloff/vue-app

Deploy the application to Kubernetes on the IBM Cloud:

Change the Docker image name in kube-vue.yaml. By default an image is used from DockerHub.

$ bx plugin install container-service -r Bluemix
$ bx login -a https://api.ng.bluemix.net
$ bx cs region-set us-south
$ bx cs clusters
$ bx cs cluster-config <your-cluster-name>
$ 'export ...' (copy the output of previous command)
$ kubectl apply -f kube-vue.yaml

Open the application:

$ bx cs workers <your-cluster-name>
$ kubectl describe service vue-app

Copy the public IP address of your cluster and the NodePort, e.g. 33838, and open the app in a browser.