In this article, you will learn how to deploy applications on GCP. We will deploy a create-react-app. Link to the Repo — https://github.com/Harshmakadia/react-docker Before we get started with the actual steps of deploying the React App using GCP and . First, Docker let’s understand what docker actual is? Docker is a tool which is designed to make the creating, deploying and running of applications easier with the help of containers. Containers are something which allows the developer to bundle the application with all the necessary ingredients like different libraries, dependencies and ship is as only a single package. We will go step by step 1. Creating React Application Create react app is a lot easier using the create-react-app (CRA) We will use package to install and configure simple react application from NPM, Open your terminal and install react app. create-react-app For more info on creating a react app _Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an…_github.com facebook/create-react-app once you run the application using command$ npm start After that, it’s time to create a build the app, run$ npm run build 2. Creating minimal Dockerfile creating a docker file is a cup of your tea. The is no rocket science in creating a docker file. Just Create a new file with name **_Dockerfile_**Now once the file is created we will add some command to that which will help us to create, run, deploy the application. Here the content of Dockerfile for react app. Note I’m using to as a server. Nginx Dockerfile Once the docker file is created. I’m creating a new folder named within the app directory which has a file deployment nginx.conf The content of nginx file, note that this is default configuration you may not need to alter this file unless you have some special requirements. nginx.conf 3. Installing Docker on your machine Head to this link below and download it for your respective operating system _Docker Desktop Enterprise is a new commercial desktop offering that gives you everything you need for enterprise-ready…_www.docker.com Docker Desktop Once it is installed run open your terminal and run below command to check it is installed successfully docker — — version Docker version Now that we have the docker setup on our machine it’s time to create the first image using the following command docker build -t first-docker . more info about different command can be found . here Once you run this command it will execute all the command listed down in the Dockerfile. Creating Image we have successfully created the image. Let’s proceed to next step 4. Make use of gcloud SDK Download SDK from the below link and setup on your machine _A collection of command line tools for the Google Cloud Platform. Includes gcloud, bq, gsutil and other important…_cloud.google.com Cloud SDK | Cloud SDK | Google Cloud Now that we have the gcloud SDK setup on our machine - — Create a new project in GCP Next step is to create a new project in the GCP where we will be pushing our docker images to the containers. Configure Docker to use as a credential helper or are using another . To use as the credential helper, run the command: gcloud authentication method gcloud gcloud auth configure-docker It’s time to push the image to the registry Tag the local image with the registry name by using the command: docker tag [SOURCE_IMAGE] [HOSTNAME]/[PROJECT-ID]/[IMAGE] where is the local image name. [SOURCE_IMAGE] This command names the image with the registry name and applies the tag . If you want to apply a different tag, then use the command: latest docker tag [SOURCE_IMAGE] [HOSTNAME]/[PROJECT-ID]/[IMAGE]:[TAG] Push the tagged image to Container Registry Push the tagged image to Container Registry by using the command: docker push [HOSTNAME]/[PROJECT-ID]/[IMAGE] This command pushes the image that has the tag . If you want to push an image that has a different tag, use the command: latest docker push [HOSTNAME]/[PROJECT-ID]/[IMAGE]:[TAG] When you push an image to a registry with a new hostname, Container Registry creates a storage bucket in the specified . After pushing your image, you can: multi-regional location Go to the to view the registry and image. GCP Console Run to view the image's tag(s) and automatically-generated digest: gcloud container images list-tags gcloud container images list-tags [HOSTNAME]/[PROJECT-ID]/[IMAGE] The command’s output is similar to the following: DIGEST TAGS TIMESTAMP   44bde... test 2017-..-.. Where is listed under in the console. It's one of four options: , , , or . [HOSTNAME] Location gcr.io us.gcr.io eu.gcr.io asia.gcr.io is your Cloud Platform Console . See for how to work with projects IDs that include a domain. [PROJECT-ID] Google project ID Domain-scoped projects is the image's name in Container Registry. [IMAGE] is the tag applied to the image. In a registry, tags are unique to an image. [TAG] Pushing Image Navigate the GCP console and search of you will be able to see the image which we push. Container Registry, It’s time to create cluster now inside in GCP Kubernetes Engine Creating cluster Create deployment under workloads Select the image which you want to deploy and finally click on to expose the deployment. Expose Set since we had EXPOSED our application to 80 in the Dockerfile port to 80 in Target Port Once you have exposed the port you will get IP Adress where your react application will be running live. Deployed Application And that it’s you are all set with docker. Whenever you want to push new image to the container first build the image with above-specified commands and then push the image to container registry and finally make that image live by going to rolling update option. Please note down your questions in the comment section below if you have any doubts & I’ll be happy to address them. That’s the end 🔚 I hope you have learned something new. Happy Learning! 💻 😃

Facebook

Google

Target

Too Long; Didn't Read

ML Practitioners - Ready to Level Up your Skills?

Deploy React Application using Docker and Google Cloud Platform

Too Long; Didn't Read

Companies Mentioned

@MakadiaHarsh

RELATED STORIES