Running React Fastapi app in a google cloud instance using docker-compose & nginx

3 min read 01-10-2024
Running React Fastapi app in a google cloud instance using docker-compose & nginx


Running a React/FastAPI App on Google Cloud with Docker Compose and Nginx

Building and deploying modern web applications often involves a mix of technologies. This article will guide you through deploying a React frontend and a FastAPI backend on Google Cloud using Docker Compose and Nginx, offering a streamlined and scalable solution.

Scenario: Imagine you have a React application that needs to communicate with a FastAPI backend for data handling. You want to deploy this application to Google Cloud for robust hosting and scalability.

Let's break down the process:

1. Setting Up the Environment:

  • Docker Compose: This tool simplifies container orchestration, allowing you to manage your React and FastAPI applications within Docker containers.
  • Nginx: A powerful web server that acts as a reverse proxy, routing requests to the appropriate container (React or FastAPI) based on the URL path.
  • Google Cloud: You'll need a Google Cloud project with an instance to host your containers.

2. Dockerfile for React:

FROM node:16-alpine

WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --production

COPY . .

CMD ["yarn", "start"]

This Dockerfile defines a container for your React application:

  • It uses a Node.js image with Alpine Linux.
  • It sets the working directory and installs dependencies.
  • It copies the React application source code and finally starts the app.

3. Dockerfile for FastAPI:

FROM python:3.9-slim

WORKDIR /app
COPY requirements.txt ./
RUN pip install --no-cache-dir -r requirements.txt

COPY . .

CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]

This Dockerfile defines a container for your FastAPI application:

  • It uses a Python image with a slim build.
  • It sets the working directory and installs dependencies.
  • It copies the FastAPI application source code and runs the application with uvicorn on port 8000.

4. Docker Compose Configuration:

version: '3.8'

services:
  nginx:
    build: nginx
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - react
      - fastapi

  react:
    build: react
    ports:
      - "3000:3000"

  fastapi:
    build: fastapi
    ports:
      - "8000:8000"

This Docker Compose file defines the services for your applications and Nginx:

  • nginx: Builds the Nginx container, maps port 80 (HTTP) to the container, mounts a custom Nginx configuration file, and depends on the React and FastAPI containers.
  • react: Builds the React container and maps port 3000 to the container.
  • fastapi: Builds the FastAPI container and maps port 8000 to the container.

5. Nginx Configuration:

server {
    listen 80;

    location /api/ {
        proxy_pass http://fastapi:8000/;
    }

    location / {
        proxy_pass http://react:3000/;
    }
}

This Nginx configuration file routes requests based on the URL path:

  • /api/: Requests to this path are forwarded to the FastAPI application running on port 8000.
  • /: Requests to other paths are forwarded to the React application running on port 3000.

6. Deployment on Google Cloud:

  • Google Cloud Instance: Create a Google Cloud Compute Engine instance with a suitable operating system (Ubuntu or Debian).
  • SSH Access: Connect to the instance via SSH.
  • Docker Installation: Install Docker on the instance.
  • Docker Compose Installation: Install Docker Compose on the instance.
  • Project Deployment: Copy your Dockerfile, Docker Compose file, and Nginx configuration file to the instance. Run docker-compose up -d to start the containers.

7. Accessing your App:

  • Public IP: Your deployed application will be accessible via the public IP address of your Google Cloud instance.
  • Firewall Rules: You might need to create firewall rules to allow traffic to the port you configured for Nginx (typically port 80).

Additional Tips:

  • Production Optimization: For production environments, consider minifying your React bundle, optimizing your FastAPI backend for performance, and using a caching strategy.
  • Monitoring and Logging: Set up monitoring and logging tools to track your application's performance and identify any issues.
  • Security: Ensure your application is secure by using HTTPS and implementing security best practices.

Conclusion:

Deploying your React and FastAPI application on Google Cloud with Docker Compose and Nginx offers a robust, scalable, and manageable approach. This setup provides a solid foundation for a successful and efficient deployment.

Resources: