Deploying a React App to Google Cloud Run with GitHub Actions

Deploying a React App to Google Cloud Run with GitHub Actions

In this tutorial, we’re going to use create-react-app to quickly spin up a new React project. Then create a Docker image, with the help of Nginx, to create a containerized version of our React app. Next, we’ll push our Docker image to Google Container Registry and manually deploy our image to a Cloud Run service. Finally, we’ll set up a GitHub Action workflow to build, dockerize, and deploy our app whenever we push to master. Google’s Cloud Run product allows for scalable containerized applications in a fully managed serverless environment. Deploying a React App to Google Cloud Run with GitHub Actions

Google’s Cloud Run product allows for scalable containerized applications in a fully managed serverless environment.

Since Cloud Run is serverless it allows your services to scale down to zero and incur no charges or scale to infinity when your app blows up! 🤯

This makes for a great way to quickly deploy and host any number of web applications for very cheap on new startups and highly scalable for a growing product.

In this tutorial, we’re going to use  create-react-app to quickly spin up a new React project. Then create a Docker image, with the help of Nginx, to create a containerized version of our React app. Next, we’ll push our Docker image to Google Container Registry and manually deploy our image to a Cloud Run service. Finally, we’ll set up a GitHub Action workflow to build, dockerize, and deploy our app whenever we push to master.

  • create-react-app
  • Docker
  • Google Container Registry (GCR)
  • Google Cloud Run (other GCR 👀)
  • GitHub Action (GHA)

create-react-app

Assuming you already have Node.js installed, run the following command to create a brand new create-react-app.

npx create-react-app my-app

This tool simply allows us to get up and running with a working React app, if you know of a better process or tool to create a start React app, feel free to use that instead!

Note: I personally recommend using TypeScript, it makes the development experience a lot friendlier, this can be done with create-react-app templates:

npx create-react-app my-app --template typescript

At this point, feel free to develop your React app to your heart’s content, but for the remainder of the tutorial, the base CRA is enough.

docker google-cloud-platform google-cloud-run react

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Overview of Google Cloud Essentials Quest

If you looking to learn about Google Cloud in depth or in general with or without any prior knowledge in cloud computing, then you should definitely check this quest out.

Multi-cloud Spending: 8 Tips To Lower Cost

Mismanagement of multi-cloud expense costs an arm and leg to business and its management has become a major pain point. Here we break down some crucial tips to take some of the management challenges off your plate and help you optimize your cloud spend.

Multi-Region Load Balancing With GO and Google Cloud Run — Part 1

Learn how to deploy a simple GO application to four regions on Google’s Cloud Run platform and improve your service’s availability and latency.

Overview of Google Cloud Platform(GCP) with Cloud Run

In this blog, we are going to discuss deploying stateless containers on Google Cloud Platform(GCP) with Cloud Run service. At very first we see What is Google Cloud Platform(GCP)? Then we see what is cloud run and how to deploy containers using Cloud Run.