deploy to bl1231

[dsclassen]

Issue and branch to track changes needed to deploy to bl1231/hyperion.

[dsclassen]

@yonglbl I think the main issue we are encountering when attempting to deploy is related to CORS.

To troubleshoot CORS issues in your multi-container application involving Django, React, and Nginx, follow these steps:

1. Django Configuration

Ensure that Django is configured to handle CORS properly:

• Install django-cors-headers if you haven't already:

  pip install django-cors-headers

• Add it to your INSTALLED_APPS:

  INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
  ]

• Add the CORS middleware to your MIDDLEWARE:

  MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
  ]

• Configure allowed origins in your settings (usually settings.py):

  CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",  # Adjust this to match your React app's URL
    "http://your-frontend-domain.com",
  ]

2. Nginx Configuration

Ensure Nginx is configured correctly to forward headers:

• Check your Nginx configuration to ensure it forwards the necessary headers. You might have a configuration block like this:

  server {
    listen 80;
    server_name your-domain.com;
  
    location / {
        proxy_pass http://your-django-backend;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
  
        # Add these lines to handle CORS
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
        add_header Access-Control-Allow-Headers "Origin, Authorization, Content-Type";
        add_header Access-Control-Allow-Credentials true;
    }
  
    location /static/ {
        alias /path/to/your/static/files;
    }
  
    location /media/ {
        alias /path/to/your/media/files;
    }
  }

  Note: Adjust the values according to your specific setup. The Access-Control-Allow-Origin should be restricted to specific domains in production.

3. React Configuration

Ensure that your fetch requests in the React app are configured correctly:

• When making fetch requests, include credentials if your Django backend requires authentication:

  fetch('http://your-backend-domain/api/', {
    method: 'GET',
    credentials: 'include', // or 'same-origin' if applicable
    headers: {
        'Content-Type': 'application/json',
        // other headers
    },
  })

4. Browser and Network Debugging

Use your browser's developer tools to inspect the network requests:

• Check the network tab for failed requests and examine the response headers to see what is being blocked.
• Look at the console for CORS-related error messages that can provide more insight.

5. Debug Logs

Enable debug logs in Django to get more detailed information about incoming requests and CORS handling.

By carefully checking each of these areas, you should be able to identify and resolve the CORS issues in your multi-container application setup. If you have any specific configurations or error messages you'd like to share, I can provide more detailed assistance.