Congratulations to all who made it this far in the program. ALCwithGoogle We were recently assigned tasks in each track. I am in the cloud track and I would be taking you through my workflow for the task assigned to the Cloud Track deploying a react application to Google Kubernetes Engine(GKE). So I used a Google VM instance as my development environment, that way we all have the same experience. First Step would be to create a VM for our development environment login to your Google Cloud Console, I used a QwikLab environment for this one. . you have 2 Hours to complete everything on this environment. https://googlepluralsight.qwiklabs.com/focuses/23638 VM Specifications are: name -> development-env type -> n1-standard OS -> Ubuntu 16:04 allow http traffic Next Open on the VM instance so we can preview the application while in development environment. To achieve this we need to create a with a , then edit the VM instance to have this network tag. port 3000 firewall rule network tag development-env name -> allow-traffic-port-3000 specified-target-tags -> nodejs-dev Source IP Ranges  -> 0.0.0.0/0 tcp port 3000 Use the Images below to configure the Firewall rule After this Edit the Virtual Machine to include the network tag nodejs-dev now we would be able to view whatever is running on port 3000 of the virtual machine from the public IP. next we SSH into the VM. Use the Open in browser window option on Google Console. From the SSH terminal, we will then Install and on our development environment. NodeJs Docker run the following commands to install NodeJs sudo apt-get update
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install nodejs
sudo apt-get install npm run the following commands to install Docker curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add –
sudo add-apt-repository sudo apt-get update
sudo apt-get install -y docker-ce "deb [arch=amd64] https://download.docker.com/linux/ubuntu stable" $(lsb_release -cs) After installing docker, I created a folder that will hold all our application code, you can choose to do this wherever run the following commands to create the directory /opt
sudo mkdir dev dev
sudo chown -R [your-username] . cd cd we then need to install ReactJs and its dependencies, an Easy way to install React and its dependencies for Node is using the create-react-app command. but first we need this command available in out nodejs environment run the following command to install create-react-app sudo npm install -g create-react-app next we use create-react-app to create a react application create-react-app -andela-challenge test This will create a new folder called , this folder contains our react application, next we go into the directory and run the react application. test-andela-challenge -andela-challenge
npm start cd test your terminal prompt should look like this when the application is running you can now view the application from the public IP address of our development environment on port 3000, http://[public-ip]:3000 Optional If you want to make changes to the application, you can. use to stop the application from the terminal. go into the src directory and edit and files. from within you use to save and to exit. Ctrl + C App.js App.css nano Ctrl + O Ctrl + X src
nano App.js // nano App.css cd Now we need to Containerize the Application (put the application in a container). We will build the docker container to host the application and serve it via nginx web-server. First we build the React Application npm run build Next we create a Dockerfile touch Dockerfile Next we edit the Dockerfile and add the following content FROM nginx:alpine
COPY /build /usr/share/nginx/html
EXPOSE 80
CMD [ , , ] "nginx" "-g" "daemon off;" The content of the file, means we are building from an existing image " " Docker will pull this image from the Container Registry. it will then copy the content of the " " directory to the folder on our container, then expose port 80, and start the nginx service nginx:alpine build html Now we have defined our container as a Dockerfile. we can now build the container image and supply a name for it. I used " " as the name for my image. test-andela-challenge-docker sudo docker build . -t -andela-challenge-docker test we have successfully built the container image, you can view the images in your environment with the following command. sudo docker images Now our container image is built. we will to upload it to a container registry in so we can create applications from it. we will be uploading it to the Google Container Registry. to do this we would need the following: google cloud SDK google account username and password gcp project-id gcp region First we install Google Cloud SDK on our development environment | sudo tee -a /etc/apt/sources.list.d/google-cloud-sdk.list
curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key --keyring /usr/share/keyrings/cloud.google.gpg add –
sudo apt-get update && sudo apt-get install google-cloud-sdk echo "deb [signed-by=/usr/share/keyrings/cloud.google.gpg] http://packages.cloud.google.com/apt cloud-sdk main" you may or may not need to run these commands ~
sudo chown -R [username] .config cd Now we will connect the Google Cloud SDK to our google cloud account. There are two options: using a service account using the root google account details we will be using the root google account details. run the following command gcloud init you will need to supply some options, (login with google account) just follow the prompts. like image below after you supply the verification code, you will be authenticated to your google cloud account. follow the prompts and specify your project ID and google cloud region. I have been using eu-west-1b. Next we use gcloud to configure docker gcloud auth configure-docker now we tag the application using the google cloud format sudo docker tag [image-name] [gcloud-host]/[project-id]/[image-tag:version] this is what my own command looks like: sudo docker tag -andela-challenge-docker eu.gcr.io/qwiklabs-gcp-00-ee40f571c6fa/react-docker:v1 test now we will push the image to Google Container Registry, which will make it available in my Google Cloud Console sudo docker push eu.gcr.io/qwiklabs-gcp-00-ee40f571c6fa/react-docker:v1 the container image will now be available in "Container Registry" on your Google Cloud Console. Hang on, we're almost there. All that's left is to create a Kubernetes cluster and run this Container Image as a pod in that cluster. the following this we would do from the Google Cloud Console. Create a Kubernetes Cluster, from the Kubernetes Engine tab. My cluster has 2 nodes, It would also work with just 1 node, we are not expecting a lot of traffic. the more nodes, the more the compute charges to your account. once the Cluster is done creating, we can add a workload to run on the cluster, which would be our container image. click the workload option on the sidebar and add a workload. Choose existing container image and select our image from the container registry, also use an existing cluster and select the cluster we have just created. Once we have created the deployment, we then need to expose the application to the outside world. remember our application runs from port 80 inside the container because we are serving it with nginx. we akso want to expose it to the default https port 80 to the outside world, so we would map port 80 from the outside would to port 80 inside the container. now we have exposed our application on port 80, we can reach the application through the IP attached to the external Endpoint. *insert sigh of relief*.

Google

Target

Too Long; Didn't Read

Developers: Build Less. Deliver More. [Learn how]	

Deploy React Application to Kubernetes Cluster on Google Cloud Platform

Too Long; Didn't Read

Companies Mentioned

Uche Nebed

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Deploy React Application to Kubernetes Cluster on Google Cloud Platform

Too Long; Didn't Read

Companies Mentioned

Uche Nebed

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES