So you've created your first React project, now are you ready to try deploying it? Fear not, Google offers Cloud Run, a very simple yet powerful tool that can help you do just that . I'll show you how to deploy a containerized React application using Cloud Run in three simple steps.
This tutorial assumes you have already set up your Google Cloud project and have your React application running locally.
Can I simply upload my code to the bucket?
While I was trying to deploy my first React project, I had already used Cloud Run in various other projects. When I wanted to deploy my application to GCP, my first thought was to run a simple npm run build...and upload the compiled output folder to a Google Cloud Storage (GCS) bucket.
After I finished, I realized this approach wasn't going to work. GCS is trying to serve all routes from paths within the bucket. Therefore, if you create a page in React /login, GCS will try to serve files located within a subfolder of the GCS bucket. This will fail because no such file exists. React should handle routing client side. More information can be found here.
The "easiest" way to achieve efficient routing is to use Google App Engine. However, for a number of reasons, I've found that App Engine doesn't scale very well. The main problem I faced was that your App Engine location cannot be changed once activated for the project (why?), there can only be one App Engine location for the entire project.
Cloud running
A better solution is Google Cloud Run. Cloud Run is actually based on Knative, a "Kubernetes-based platform for deploying and managing modern serverless workloads." The main benefit of Knative is that it makes scaling any stateless application very easy. You simply provide a docker image and Knative will scale it to as many instances as needed.
Cloud Run is easier to set up and maintain than running Knative directly on your own Kubernetes cluster. It's also very cheap for projects with small expected traffic loads, since Cloud Run is billed on a per-usage basis (e.g., per request to the service). Another benefit of Cloud Run is the ability to resume your deployment in less than 10 seconds. This feature has saved me some trouble at the startups I work with.
1\. Create a docker image containing the compiled React application
You need to create a file in the root directory of your project Dockerfile. We will be using a multi-stage docker file in this step, so be sure to copy all the code below into a single file .
FROM node:lts-alpine as builder # by only copying package.json, before running npm install. We can leverage dockers caching strategy for steps. Otherwise docker needs to run npm install every time you change any of the code. COPY package.json ./ RUN npm install RUN mkdir /app-ui RUN mv ./node_modules ./app-ui WORKDIR /app-ui COPY . . # in this step the static React files are created. For more info see package.json RUN npm run build
Enter full screen mode Exit full screen mode
After running the builder, all our static files are available. However, we still need a way to provide them to customers. We use nginx for this.
FROM nginx:alpine # copy the .conf template COPY ./.nginx/nginx.conf /etc/nginx/nginx.conf ## Remove default nginx index page and replace it with the static files we created in the first step RUN rm -rf /usr/share/nginx/html/* COPY --from=builder /app-ui/build /usr/share/nginx/html EXPOSE 80 CMD nginx -g 'daemon off;'
Use Google Cloud Run to deploy React applications on GCP_reactnative_cloudO生-cloudnative