404错误：除非我转到/index.html，否则无法使用django rest框架提供静态React构建

编程问答 2022-06-04

问题描述

我有一个React前端，我将其转换为静态文件。我用npm run build来制作文件夹。然后，我配置了Django Rest Framework：

settings.py 

FRONTEND_ROOT = os.path.abspath(os.path.join(BASE_DIR,'..','frontend','build'))

urls.py 

re_path(r'^(?P<path>.*)$',serve,{ 'document_root': settings.FRONTEND_ROOT }),

当我到达localhost:8000时，我得到了404页。如果说如何，我到了localhost:8000/index.html，那么我没有得到404，而是react应用。不过，css和html尚未加载。

这是将静电反应连接到django后端的正确方法吗？我错过了一步吗？

解决方法

Django serve用于在开发中提供静态文件：docs。

对于开发，我只在一个终端中运行react dev服务器，在第二个终端中运行django dev服务器。

对于制作，您几乎没有选择来提供静态文件：

  • 看看WhiteNoise是如何在Django中提供静态文件的（我在某个地方举例说明了如何配置它，但现在无法找到它，请告诉我您是否需要），
  • 将静态反应文件上传到S3并与CDN一起使用（在AWS部署和大流量的情况下）
  • 如果您想将所有内容都保留在一台机器上，那么我建议使用docker-compose。这是一个很好的解决方案，因为您可以与nginx进行交流。此外，您可以使用docker-compose从Let's Encrypt更新SSL证书。这是我正在使用的选项。在我的docker-compose下方。

我正在研究如何使用Django and React from scratch构建自己的SaaS应用程序的完整教程。 docker-compose来自教程。

# docker-compose
version: '2'

services:
    nginx: 
        restart: unless-stopped
        build:
            context: .
            dockerfile: ./docker/nginx/Dockerfile
        ports:
            - 80:80
            - 443:443
        volumes:
            - static_volume:/app/backend/server/django_static
            - ./docker/nginx:/etc/nginx/conf.d
            - ./docker/nginx/certbot/conf:/etc/letsencrypt
            - ./docker/nginx/certbot/www:/var/www/certbot
        depends_on: 
            - backend
    certbot:
        image: certbot/certbot
        restart: unless-stopped
        volumes:
            - ./docker/nginx/certbot/conf:/etc/letsencrypt
            - ./docker/nginx/certbot/www:/var/www/certbot
        entrypoint: "/bin/sh -c 'trap exit TERM; while :; do certbot renew; sleep 12h & wait $${!}; done;'"       
    backend:
        restart: unless-stopped
        build:
            context: .
            dockerfile: ./docker/backend/Dockerfile
        volumes:
            
        entrypoint: /app/docker/backend/wsgi-entrypoint.sh
        volumes:
            - .:/app
            - static_volume:/app/backend/server/django_static
        ports:
            - 8003:8003
        expose:
            - 8003        

volumes:
    static_volume: {}

nginx dockerfile分两个步骤：

  1. 建立反应
  2. 启动nginx 
# nginx dockerfile
# build environment
FROM node:13.12.0-alpine as build

ADD ./frontend /app/frontend/
WORKDIR /app/frontend
RUN npm install
RUN npm run build

# production environment
FROM nginx:stable-alpine
COPY --from=build /app/frontend/build /usr/share/nginx/html
CMD ["nginx","-g","daemon off;"]

default.conf文件

server {
    listen 80;
    server_name yourdomain.com;
    server_tokens off;

    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }

    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    server_name yourdomain.com;
    server_tokens off;

    ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    client_max_body_size 20M;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /api {
        try_files $uri @proxy_api;
    }

    location @proxy_api {
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Url-Scheme $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass   http://backend:8003;
    }

    location /django_static/ {
        autoindex on;
        alias /app/backend/server/django_static/;
    }
}

Django的dockerfile 

FROM python:3.8.3-alpine

WORKDIR /app
ADD ./backend/requirements.txt /app/backend/


RUN pip install --upgrade pip
RUN pip install gunicorn
RUN pip install -r backend/requirements.txt

ADD ./backend /app/backend
ADD ./docker /app/docker

RUN rm -f /app/backend/server/db.sqlite3

wsgi-entrypoint.sh 

#!/bin/sh

#ls -al /app/backend/server/static/client/static/js

until cd /app/backend/server
do
    echo "Waiting for server volume..."
done

until ./manage.py migrate
do
    echo "Waiting for db to be ready..."
    sleep 2
done

ls /app/backend/server

./manage.py collectstatic --noinput

gunicorn server.wsgi --bind 0.0.0.0:8003 --workers 4 --threads 4
#./manage.py runserver 0.0.0.0:8003
https://medium.com/@pentacent/nginx-and-lets-encrypt-with-docker-in-less-than-5-minutes-b4b8a60d3a71中的

init-letsencrypt.sh脚本，我强烈推荐这篇文章！

#!/bin/bash

if ! [ -x "$(command -v docker-compose)" ]; then
  echo 'Error: docker-compose is not installed.' >&2
  exit 1
fi

domains=(yourdomain.com www.yourdomain.com)
rsa_key_size=4096
data_path="./docker/nginx/certbot"
email="" # Adding a valid address is strongly recommended
staging=0 # Set to 1 if you're testing your setup to avoid hitting request limits

if [ -d "$data_path" ]; then
  read -p "Existing data found for $domains. Continue and replace existing certificate? (y/N) " decision
  if [ "$decision" != "Y" ] && [ "$decision" != "y" ]; then
    exit
  fi
fi


if [ ! -e "$data_path/conf/options-ssl-nginx.conf" ] || [ ! -e "$data_path/conf/ssl-dhparams.pem" ]; then
  echo "### Downloading recommended TLS parameters ..."
  mkdir -p "$data_path/conf"
  curl -s https://raw.githubusercontent.com/certbot/certbot/master/certbot-nginx/certbot_nginx/_internal/tls_configs/options-ssl-nginx.conf > "$data_path/conf/options-ssl-nginx.conf"
  curl -s https://raw.githubusercontent.com/certbot/certbot/master/certbot/certbot/ssl-dhparams.pem > "$data_path/conf/ssl-dhparams.pem"
  echo
fi

echo "### Creating dummy certificate for $domains ..."
path="/etc/letsencrypt/live/$domains"
mkdir -p "$data_path/conf/live/$domains"
docker-compose run --rm --entrypoint "\
  openssl req -x509 -nodes -newkey rsa:1024 -days 1\
    -keyout '$path/privkey.pem' \
    -out '$path/fullchain.pem' \
    -subj '/CN=localhost'" certbot
echo


echo "### Starting nginx ..."
docker-compose up --force-recreate -d nginx
echo

echo "### Deleting dummy certificate for $domains ..."
docker-compose run --rm --entrypoint "\
  rm -Rf /etc/letsencrypt/live/$domains && \
  rm -Rf /etc/letsencrypt/archive/$domains && \
  rm -Rf /etc/letsencrypt/renewal/$domains.conf" certbot
echo


echo "### Requesting Let's Encrypt certificate for $domains ..."
#Join $domains to -d args
domain_args=""
for domain in "${domains[@]}"; do
  domain_args="$domain_args -d $domain"
done

# Select appropriate email arg
case "$email" in
  "") email_arg="--register-unsafely-without-email" ;;
  *) email_arg="--email $email" ;;
esac

# Enable staging mode if needed
if [ $staging != "0" ]; then staging_arg="--staging"; fi

docker-compose run --rm --entrypoint "\
  certbot certonly --webroot -w /var/www/certbot \
    $staging_arg \
    $email_arg \
    $domain_args \
    --rsa-key-size $rsa_key_size \
    --agree-tos \
    --force-renewal" certbot
echo

echo "### Reloading nginx ..."
docker-compose exec nginx nginx -s reload

我在这里粘贴了教程中的文件，因此您需要将目录结构更改为您自己的目录和域（抱歉！）。我仍在研究本教程。如有任何疑问，我们很乐意为您提供帮助。

djangodjango-reactdjango-rest-frameworkreactjsreactjs