Latest news about Bitcoin and all cryptocurrencies. Your daily crypto news habit.
Deploy React Application with Docker and Google Cloud Platform
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 Docker. First, 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 create-react-app package to install and configure simple react application from NPM, Open your terminal and install react app.
For more info on creating a 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 DockerfileNow 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 Nginx to as a server.
Once the docker file is created. I’m creating a new folder named deployment within the app directory which has a nginx.conf file
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.
3. Installing Docker on your machine
Head to this link below and download it for your respective operating system
Once it is installed run open your terminal and run below command to check it is installed successfully
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.
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
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 gcloud as a credential helper or are using another authentication method. To use gcloud as the credential helper, run the command:
- 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 [SOURCE_IMAGE] is the local image name.
- This command names the image with the registry name and applies the tag latest. If you want to apply a different tag, then use the command:
- 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 latest. If you want to push an image that has a different tag, use the command:
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 specifiedmulti-regional location. After pushing your image, you can:
- Go to the GCP Console to view the registry and image.
- Run gcloud container images list-tags to view the image's tag(s) and automatically-generated digest:
- gcloud container images list-tags [HOSTNAME]/[PROJECT-ID]/[IMAGE]
- The command’s output is similar to the following:
- DIGEST TAGS TIMESTAMP44bde... test 2017-..-..
Where
- [HOSTNAME] is listed under Location in the console. It's one of four options: gcr.io, us.gcr.io, eu.gcr.io, or asia.gcr.io.
- [PROJECT-ID] is your Google Cloud Platform Console project ID. See Domain-scoped projects for how to work with projects IDs that include a domain.
- [IMAGE] is the image's name in Container Registry.
- [TAG] is the tag applied to the image. In a registry, tags are unique to an image.
Navigate the GCP console and search of Container Registry, you will be able to see the image which we push.
It’s time to create cluster now inside Kubernetes Engine in GCP
Create deployment under workloads
Select the image which you want to deploy and finally click on Expose to expose the deployment.
Set port to 80 in Target Port since we had EXPOSED our application to 80 in the Dockerfile
Once you have exposed the port you will get IP Adress where your react application will be running live.
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! 💻 😃
Deploy React Application using Docker and Google Cloud Platform was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.
Disclaimer
The views and opinions expressed in this article are solely those of the authors and do not reflect the views of Bitcoin Insider. Every investment and trading move involves risk - this is especially true for cryptocurrencies given their volatility. We strongly advise our readers to conduct their own research when making a decision.