django-react 无法访问静态文件答案

【问题标题】：cant reach static files django-reactdjango-react 无法访问静态文件
【发布时间】：2020-11-26 08:11:06
【问题描述】：

我正在尝试将 Django-React 部署到弹性 beantalk 部署显示为成功，但只给我一个白色的空白页面，（api调用正常工作）。

检查 /var/log/nginx/error.log 显示：

2020/08/06 02:58:06 [error] 4461#0: *11 open() "/var/app/current/staticbundle.js" failed (2: No such file or directory)

所以我知道它试图找到 bundle.js 但在错误的路径上，我不知道如何修复它应该如下所示：

/var/app/current/static/bundle.js

我认为它没有正确构建静态文件夹，但它确实构建了，结果如下：

current
   
│
└───static
│   │   bundle.js
│   │   index.html
│   
└───...

这是我的项目设置

Django 方面：

1.1 设置.py

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')
STATICFILES_STORAGE = 'whitenoise.storage.CompressedStaticFilesStorage'

1.2 urls.py

from django.contrib import admin
from django.urls import path, include, re_path
from django.views.generic import TemplateView

urlpatterns = [
    path('api/', include('backend.urls')),
    re_path(r'^.*', TemplateView.as_view(template_name='index.html')),

]

1.3 django.config

    option_settings:
      aws:elasticbeanstalk:container:python:
        WSGIPath: cerbero.wsgi
    
      aws:elasticbeanstalk:environment:proxy:staticfiles:
        /static/: static/
    container_commands:
      01_node_install:
        command: "curl -sL https://rpm.nodesource.com/setup_12.x | sudo bash - && sudo yum -y install nodejs"
        ignoreErrors: false
    
      02_npm_install:
        command: "npm install"
        ignoreErrors: false
    
      03_react_collect:
        command: "npm run build"
        ignoreErrors: false

2.WebPack端： - webpack.config.js

// webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

  entry: './frontend/src/index.js',
  watch : false,
  devtool : 'source-map',
  output : {
    filename: 'bundle.js',
    path : path.resolve(__dirname, 'static/'),
    publicPath: '/',
  },

  devServer: {
    contentBase: './',
    inline: true,
    hot: true,
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
      new HtmlWebpackPlugin({
        template: './frontend/templates/frontend/index.html',
        filename : './index.html',
        minify: false
    })
  ]
};

index.html

<!doctype html>

{%load static %}

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cerbero</title>
  </head>
  <body>
     <div id="app"></div>
    <script src = "{% static '/bundle.js' %}"></script>

  </body>
</html>

我真的不知道问题是属于 django、webpack 还是 react

【问题讨论】：

你能不试试aws:elasticbeanstalk:environment:proxy:staticfiles吗？ /static 默认被认为是静态的，所以没有理由覆盖它。
没有解决错误和消息是一样的，但感谢信息
可以通过设置baseUrl来解决

标签： django reactjs webpack amazon-elastic-beanstalk static-files

【解决方案1】：

urlpatterns = [
    path('api/', include('backend.urls')),
    re_path(r'^.*', TemplateView.as_view(template_name='index.html')),

]+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

【讨论】：

你能解释一下你的答案吗
你能解释一下它的作用或它使用什么进口吗？