能否在PythonAnywhere.com部署React前端与Django后端API应用？

Absolutely! PythonAnywhere fully supports running a Django API backend alongside a React frontend—this is a super common setup, and I’ve walked through it with plenty of developers. Let’s break down exactly how to make it work smoothly.

1. First: Get Your Django Backend Up and Running #

Start with your Django API just like you would any standard Django project on PythonAnywhere:

• Upload your code via Git, or drag-and-drop files using the PythonAnywhere file manager.
• Set up a virtual environment (don’t skip this!)—run mkvirtualenv --python=3.11 my-django-env (use your preferred Python version) then install dependencies with pip install -r requirements.txt.
• Tweak your Django settings:
  • Add your PythonAnywhere subdomain (e.g., yourusername.pythonanywhere.com) to ALLOWED_HOSTS.
  • Flip DEBUG to False for production (critical for security).
  • Install django-cors-headers and configure CORS_ALLOWED_ORIGINS to include your React frontend’s URL (we’ll cover that URL in the next section).
• Use PythonAnywhere’s WSGI config wizard to point to your project’s wsgi.py file—if you started a new Django project from their dashboard, this is already set up, but you can edit it manually too.
• Run migrations with python manage.py migrate and collect static files with python manage.py collectstatic (make sure STATIC_ROOT is defined in your settings).

2. Deploying Your React Frontend #

React apps are static once built, so you’ve got two solid options here:

Option 1: Serve React from Django’s Static Files #

This is great if you want everything under one domain:

• Build your React app locally with npm run build—this creates a build folder with all minified assets.
• Copy the entire contents of build into a subfolder of your Django project’s static directory, like static/react-build.
• Set up a Django view to serve the React index.html file. You can use a simple TemplateView in your urls.py:

  from django.views.generic import TemplateView
  
  urlpatterns = [
      # ... your API endpoints here ...
      path('', TemplateView.as_view(template_name='react-build/index.html')),
  ]
  

• Note: If you’re using React Router, switch to HashRouter instead of BrowserRouter—PythonAnywhere’s static file serving doesn’t handle fallback routes for SPAs by default.

Option 2: Host React as a Separate Static Site #

If you prefer keeping frontend and backend separate:

• Build your React app locally with npm run build, then upload the build folder to PythonAnywhere (I usually put it in /home/yourusername/react-build).
• Go to the "Web" tab in PythonAnywhere, click "Add a new web app", select "Static files", then set:
  • URL: / (if you want React to be the main site) or /frontend/
  • Source directory: /home/yourusername/react-build
• Update your React app’s API calls to point to your Django backend URL (e.g., https://yourusername.pythonanywhere.com/api/).

3. Critical Configuration Tips #

• CORS is non-negotiable: Make sure django-cors-headers is installed, added to INSTALLED_APPS and MIDDLEWARE, and CORS_ALLOWED_ORIGINS includes your React site’s full URL (e.g., ["https://yourusername.pythonanywhere.com"]).
• Prefix your API routes: Keep all Django endpoints under /api/ so there’s no conflict with React routes or static files.
• Secure your secrets: Use PythonAnywhere’s "Secret keys" feature or a .env file (never commit this to Git) to store database credentials, API keys, etc. For Django, use python-dotenv to load these variables into your settings.

4. Troubleshooting Common Hiccups #

• React can’t reach the API? Double-check CORS settings, verify the backend URL is correct, and check Django’s error logs in PythonAnywhere (under the "Web" tab) for any server errors.
• Static files not loading? For Django, confirm collectstatic ran successfully and that your static URL is configured right. For React static sites, make sure the source directory in PythonAnywhere points directly to the build folder.
• React Router 404s? If you insist on BrowserRouter, you’ll need to set up a catch-all route in Django that serves the React index.html for any non-API path. Add this to your Django urls.py:

  path('', TemplateView.as_view(template_name='react-build/index.html')),
  path('<path:path>', TemplateView.as_view(template_name='react-build/index.html')),
  

内容的提问来源于stack exchange，提问作者Mohd Ahshan Danish