Deploy Simple React App with Kubernetes gcp | Linux Guru

Spread the love
Here i will explain that how to deploy simple react app to kubernetes easy way, i am using ubuntu machine So , First you need to install npm and node on your local system.





Install required package to the system.


$ apt-get update
$ apt-get install curl
$ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash –
$ apt-get install -y nodejs
$ apt-get install -y build-essential


To check npm and Node version  : 
$ node -v
$ npm -v


Now we will clone the simple react code from github and build it.
$ git clone https://github.com/imvishalvyas/simple-react-app.git


Go to the directory and install npm in to that and create build.
$ cd simple-react-app
$ npm install 
$ npm run build # it will create build folder from code.


Now we will deploy that build to the kubernetes deployments. for that we will have require docker for build that code and upload it to docker container, So now we will create one Dockerfile for build.


Build the docker file. It will copy build directory in to docker image container.


$ vim Dockerfile


FROM nginx:1.15.2-alpine
COPY ./build /var/www
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
ENTRYPOINT [“nginx”,”-g”,”daemon off;”]




— it will copy your build folder to container.also copy nginx file to the container and expose it to port 80.


Build the images and push to Google container engine. here i am using google container registery for the store docker image which i have build. you can also use docker hub. 


To build Docker image :
$ docker build -t us.gcr.io/gcp-project-name/mysite:v1 .



Push Docker image to GCR. this command will push the docker image to google container registery.
$ docker push us.gcr.io/gcp-project-name/mysite:v1




Now we will create kubernetes cluster and deploy our build to that cluste. here we assumed that you have created kubernetes cluster already. Connect to the cluster with gcloud and create kubernetes deployment.

To create Deployment on Kubernetes :
$ kubectl run mysite –image=us.gcr.io/gcp-project-name/mysite:v1 –port=80

To Expose service : 
$ kubectl expose deployment mysite –type=LoadBalancer


Done. Now you can access your react website using load balancer ip.

Linuxguru

Leave a Comment