🚀 React to the Clouds ☁️: A Guide to Effortless GCP Deployment

So, you've built an amazing React app, and now it's time to deploy it to the Google Cloud Platform (GCP) using Docker and Cloud Build. This tutorial will guide you through the process step by step, and by the end of it, your React app will be up and running in the cloud.

📋 Prerequisites

Before we dive into the code, make sure you have the following prerequisites in place:

• Google Cloud Platform Account: You'll need a GCP account. If you don't have one, you can sign up here.
• GitHub Repository: Your working React js/ts project should be hosted on GitHub.

📂 Code Files

For this deployment, we'll use three essential files: Dockerfile, nginx.conf, and cloudbuild.yaml. Add these files in project root, these files are crucial for building, containerizing, and deploying your React app.

Dockerfile

The Dockerfile is used to build and package your React app into a Docker image. Here's a simplified version:

# Step 1: Build the application
FROM node:16 AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install

COPY . .
# Customize the environment variables as needed for your project
ARG GENERIC_ENV_VARIABLE
ENV GENERIC_ENV_VARIABLE $GENERIC_ENV_VARIABLE
RUN npm run build

# Step 2: Set up the production environment
FROM nginx:stable-alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]

This Dockerfile consists of two stages. The first stage builds your React app, and you can customize the GENERIC_ENV_VARIABLE environment variable as needed for your project.

nginx.conf

Here's a basic nginx.conf file for configuring Nginx as a web server:

server {
    listen 8080;
    server_name localhost;
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

This configuration tells Nginx to serve your React app on port 8080.

cloudbuild.yaml

The cloudbuild.yaml file defines the build steps for Cloud Build, which will build the Docker image and deploy it to Cloud Run:

steps:
  # Build the Docker image
  - name: 'gcr.io/cloud-builders/docker'
    args:
      [
        'build',
        '.',
        '-t',
        'gcr.io/$PROJECT_ID/react-project:$SHORT_SHA', # Change "react-project" to your project name
        '-f',
        'Dockerfile',
        '--build-arg',
        'GENERIC_ENV_VARIABLE=${_GENERIC_ENV_VARIABLE}', # Customize this variable for your project
      ]

  # Push the Docker image to Container Registry
  - name: 'gcr.io/cloud-builders/docker'
    args: ['push', 'gcr.io/$PROJECT_ID/react-project:$SHORT_SHA'] # Change "react-project" to your project name

  # Deploy the Docker image to Cloud Run
  - name: 'gcr.io/cloud-builders/gcloud'
    args:
      - 'run'
      - 'deploy'
      - 'react-project' # Change "react-project" to your project name
      - '--region=${_REGION}' # Customize the region as needed
      - '--platform=managed'
      - '--allow-unauthenticated'
      - '--image=gcr.io/${PROJECT_ID}/react-project:$SHORT_SHA' # Change "react-project" to your project name
      - '--port=8080'

options:
  logging: CLOUD_LOGGING_ONLY

This cloudbuild.yaml file defines three steps: building the Docker image, pushing it to Container Registry, and deploying it to Cloud Run. Customize the GENERIC_ENV_VARIABLE and the region as needed for your project.

🌐 Connecting Your Repository

To use Cloud Build, you'll need to connect your repository in GCP. Follow the GCP documentation to connect your Github Repository to your project.

🛠️ Creating a Cloud Build Trigger

A Cloud Build trigger automates the process of building and deploying your React app whenever changes are pushed to your connected repository. Follow these steps to create a Cloud Build trigger:

1. Click on "Triggers" in the Cloud Build section.

2. Click the "Create Trigger" button.

3. Configure your trigger as follows:

- Name: Give your trigger a descriptive name, such as "React App Build Trigger."

- Event: Select the event that triggers the build. Typically, you'd choose "Push to a branch."

- Source: Choose the repository connected before.

- Branch (optional): Specify the branch to trigger the build. For example, "main" or "master."

- Build Configuration: Select "cloudbuild.yaml" as the build configuration file.

4. Add Substitution variables mentioned in the cloudbuild.yaml

5. Scroll down and click on the "Save" button to create the trigger.

🚀 Triggering the Build

Now that you've created a Cloud Build trigger, any push to the specified branch in your repository will automatically trigger the build process. Here's how it works:

1. Make changes to your React app code.

2. Commit and push those changes to the branch specified in your trigger.

3. Cloud Build will detect the push event and start the build process using the cloudbuild.yaml configuration.

4. The build process will build your Docker image, push it to Container Registry, and deploy it to Cloud Run.

5. You can monitor the build progress in the Google Cloud Console under "Cloud Build."

✅ Testing the Deployment

Once the build and deployment process is complete, you can access your deployed React app. Here's how:

1. In the Google Cloud Console, go to "Cloud Run."

2. Find and select your deployed service (e.g., "react-project").

3. Access the URL provided in the "Service details" section.

4. Your React app should now be live and accessible via the URL

🎉 Conclusion

Congratulations! You've successfully set up Cloud Build to automate the deployment of your React app in GCP. With this workflow in place, your app will automatically update whenever you make changes to the connected repository.