Deploy a Django and React application using Render and integrate AWS S3

To deploy a Django and React application using Render and integrate AWS S3 for media storage, you can follow these steps:

Prerequisites

1. Render Account: Create an account on Render.
2. AWS S3 Bucket: Set up an S3 bucket on AWS.
   • Ensure the bucket has the correct permissions for public access (if needed).
   • Create an IAM user with programmatic access and attach a policy that allows access to S3 (e.g., AmazonS3FullAccess).

Set up AWS S3 for Django Media Files

1. Install Required Dependencies: Install the following libraries for handling AWS S3 integration in Django:

   pip install django-storages boto3

1. Configure django-storages and AWS S3: In your Django settings.py, add the following configurations for AWS S3:

   INSTALLED_APPS = [
       ...
       'storages',
   ]

   # AWS S3 Configuration
   AWS_ACCESS_KEY_ID = 'your_aws_access_key'
   AWS_SECRET_ACCESS_KEY = 'your_aws_secret_key'
   AWS_STORAGE_BUCKET_NAME = 'your_s3_bucket_name'
   AWS_S3_REGION_NAME = 'your_region'  # e.g. 'us-west-1'
   AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'

   # Media files storage configuration
   DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

   # Optional settings for better performance and control
   AWS_S3_FILE_OVERWRITE = False
   AWS_DEFAULT_ACL = None
   AWS_QUERYSTRING_AUTH = False  # Removes S3 authentication from URLs

This configuration tells Django to store and retrieve media files from your S3 bucket.

Set Up React Frontend

1. Build React App: Make sure your React app is built for production:

   npm run build

1. Serve React with Django: Adjust Django settings to serve React build files:

   STATICFILES_DIRS = [
       BASE_DIR / 'frontend/build/static',
   ]

   TEMPLATES = [
       {
           ...
           'DIRS': [BASE_DIR / 'frontend/build'],
           ...
       },
   ]

In urls.py, serve the React frontend:

   from django.views.generic import TemplateView

   urlpatterns = [
       ...
       path('', TemplateView.as_view(template_name='index.html')),
       ...
   ]

Deploy on Render

1. Create a New Web Service:

   • Log in to Render and create a new "Web Service".
   • Connect it to your GitHub repository containing the Django and React project.

2. Configure Build and Start Commands:

   • Build Command:

    pip install -r requirements.txt && npm install --prefix frontend && npm run build --prefix frontend
   

• Start Command:
  

   gunicorn your_project_name.wsgi
  

1. Set Environment Variables:
   In Render, add the following environment variables:

   • AWS_ACCESS_KEY_ID
   • AWS_SECRET_ACCESS_KEY
   • AWS_STORAGE_BUCKET_NAME
   • AWS_S3_REGION_NAME
   • SECRET_KEY
   • Any other variables required for your project.

2. Optional render.yaml:
   You can create a render.yaml file in the root of your project to define services and environment variables:
   

   services:
     - type: web
       name: your-app-name
       env: python
       plan: starter
       buildCommand: pip install -r requirements.txt && npm install --prefix frontend && npm run build --prefix frontend
       startCommand: gunicorn your_project_name.wsgi
       envVars:
         - key: SECRET_KEY
           value: your_secret_key
         - key: AWS_ACCESS_KEY_ID
           value: your_aws_access_key
         - key: AWS_SECRET_ACCESS_KEY
           value: your_aws_secret_key
         - key: AWS_STORAGE_BUCKET_NAME
           value: your_s3_bucket_name
         - key: AWS_S3_REGION_NAME
           value: your_region

Final Steps:

• Push Code: Push your code to the connected GitHub repository.
• Deploy: Render will automatically detect the changes and deploy your application.

Now, your Django backend and React frontend will be live, with media storage handled by AWS S3.

Let me know if you need any further assistance!