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 -dto 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:
- Docker Compose: https://docs.docker.com/compose/
- Nginx: https://nginx.org/
- Google Cloud: https://cloud.google.com/
- FastAPI: https://fastapi.tiangolo.com/
- React: https://reactjs.org/
