Deploying a React application can sometimes be a daunting task, especially for those new to the world of cloud computing and containerization. In this blog, we will navigate through the process of deploying a simple React application using Docker and Google Cloud Run. By the end, you’ll have a better understanding of how to make your application accessible to the world.

Prerequisites

Before diving into the deployment process, make sure you have:

• Node.js installed
• A Google Cloud account
• Docker installed on your machine
• Basic knowledge of React and command line operations

Step 1: Creating a Simple React Application

Let’s start by creating a basic React application. You can easily do this using Create React App. Open your terminal and run the following command:

npx create-react-app my-react-app
cd my-react-app

This command sets up a new directory with a simple React starter application.

Step 2: Test Your Application Locally

Now that your React application is created, let’s run it locally to ensure everything works as expected:

npm start

Open your browser and navigate to http://localhost:3000. You should see your new React app running smoothly.

Step 3: Preparing the Dockerfile

Next up, we’ll create a Dockerfile to containerize your application. In the root of your React app directory, create a file named Dockerfile with the following content:

# Step 1: Use the official Node.js image as the base image
FROM node:14 as build

# Step 2: Set the working directory
WORKDIR /usr/src/app

# Step 3: Copy package.json and package-lock.json
COPY package*.json ./

# Step 4: Install all dependencies
RUN npm install

# Step 5: Copy the rest of the application code
COPY . .

# Step 6: Build the application
RUN npm run build

# Step 7: Use a web server to serve the static files
FROM nginx:alpine

# Step 8: Copy build files to the Nginx server
COPY --from=build /usr/src/app/build /usr/share/nginx/html

# Step 9: Expose the port the app runs on
EXPOSE 80

# Step 10: Command to run the server
CMD ["nginx", "-g", "daemon off;"]

Step 4: Build the Docker Image

In the terminal, build your Docker image using the following command:

docker build -t my-react-app .

This command tells Docker to build an image named my-react-app using the instructions in the Dockerfile.

Step 5: Run Your Docker Container Locally

Now, let’s test our Docker container locally to ensure it works:

docker run -p 8080:80 my-react-app

This runs your image and maps port 80 of the container to port 8080 on your host. Navigate to http://localhost:8080 in your browser, and you should see your React app.

Step 6: Pushing the Docker Image to Google Container Registry

Next, we need to push our Docker image to Google Container Registry (GCR). First, make sure you are authenticated to Google Cloud by running:

gcloud auth login

Once authenticated, tag your Docker image for GCR. Replace <PROJECT-ID> with your actual Google Cloud project ID:

docker tag my-react-app gcr.io/<PROJECT-ID>/my-react-app

Now, use the following command to push the image to the registry:

docker push gcr.io/<PROJECT-ID>/my-react-app

Step 7: Deploying to Google Cloud Run

Now that our Docker image is in GCR, we can deploy it to Google Cloud Run:

1. Go to the Google Cloud Console.
2. Navigate to Cloud Run and click on "Create Service."
3. Select the Docker image you pushed by searching for gcr.io/<PROJECT-ID>/my-react-app.
4. Configure the settings as required (e.g., service name, region, etc.), then click "Deploy."

Step 8: Accessing Your Deployed Application

Once deployed, you will receive a URL to access your React application. Visit the URL and enjoy your live React App running on Google Cloud Run!

Additional Considerations

• Make sure to read about Cloud Run's pricing so you can understand how it scales and how charges are incurred.
• Consider implementing monitoring and logging to keep track of your application’s performance and health.

By following these steps, you should have a solid understanding of deploying a React application using Docker and Google Cloud Run. Each step is crucial in ensuring that your application is not only functional but also scalable and accessible on the cloud. Keep exploring and happy coding!